From c6e608c52438f175661f6bf041612bf8e2a38c44 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Mon, 9 Oct 2023 12:54:20 -0400 Subject: [PATCH 1/6] docs(patternfly-accessibility): Updates content as part of content audit. --- .../patternfly-accessibility.md | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md index debe3af0d1..1598012252 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md @@ -3,34 +3,35 @@ id: PatternFly's accessibility section: accessibility --- -As a design system, PatternFly provides accessible building blocks to work with. We do our best to cover all areas that are within our control and take at least some of the accessibility work off your hands. +# PatternFly components accessibility -With constant enhancements to PatternFly, we maintain this accessibility through a combination of automated and manual testing. We use [aXe: The Accessibility Engine](https://www.deque.com/axe/) on our build to ensure that all components pass this accessibility audit before they’re added to PatternFly. +We do our best to build accessibility into PatternFly's components to take some of the accessibility work off your hands. -We regularly audit keyboard accessibility with both manual testing and integration tests. We’re also aiming to provide full support for Voice Over as our main screen reader, but we still test our components through NVDA and JAWS. As part of our manual audit, every component is run through Voice Over to make sure they’ll be as accessible as possible in your products. +As PatternFly is updated and enhanced, we maintain accessibility through a combination of automated and manual testing. We use [aXe: The Accessibility Engine](https://www.deque.com/axe/) to ensure that all components pass an accessibility audit before they’re added to PatternFly. -## What PatternFly aims to address +We also regularly audit keyboard accessibility with both manual testing and integration tests. We aim to provide full support for Voice Over as our main screen reader, but we still test our components through NVDA and JAWS. As part of our manual audit, every component is run through Voice Over to make sure they’ll be as accessible as possible in your products. -Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use PatternFly or contribute to PatternFly as a designer or developer, these are the items you can expect to be covered in PatternFly: +## PatternFly accessibility standards +Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use or contribute to PatternFly, these are the accessibility guidelines you can expect PatternFly to meet: | Guideline | Link | Applies to | Tested | | --- | --- | --- | --- | -| Semantic HTML structures are used to accurately communicate the purpose and relationship of UI elements. | [WCAG 1.3.1](//www.w3.org/WAI/WCAG21/quickref#info-and-relationships) | `design` `html` `css` | Automated testing with axe and manual testing | -|Color is not the only method of communication. Providing meaning with color is supplementary to providing meaning with text. | [WCAG 1.4.1](//www.w3.org/WAI/WCAG21/quickref#use-of-color) | `design` `html` `css` | Manual testing and axe used | -| Colors used provide sufficient contrast | [WCAG 1.4.3](//www.w3.org/WAI/WCAG21/quickref#contrast-minimum) and [1.4.11](//www.w3.org/WAI/WCAG21/quickref#non-text-contrast) | `css` | Automated testing with axe | +| Semantic HTML structures are used to accurately communicate the purpose and relationship of UI elements. | [WCAG 1.3.1](//www.w3.org/WAI/WCAG21/quickref#info-and-relationships) | `design` `html` `css` | Automated testing with aXe and manual testing | +|Color is not the only method of communication. Providing meaning with color is supplementary to providing meaning with text. | [WCAG 1.4.1](//www.w3.org/WAI/WCAG21/quickref#use-of-color) | `design` `html` `css` | Manual testing and aXe used | +| Colors used provide sufficient contrast | [WCAG 1.4.3](//www.w3.org/WAI/WCAG21/quickref#contrast-minimum) and [1.4.11](//www.w3.org/WAI/WCAG21/quickref#non-text-contrast) | `css` | Automated testing with aXe | | Font sizes can scale up to 200% without loss of content or functionality, and up to 400% without needing to scroll in more than one direction. | [WCAG 1.4.4](//www.w3.org/WAI/WCAG21/quickref#resize-text) and [1.4.10](//www.w3.org/WAI/WCAG21/quickref#reflow) | `css` | Manual testing | -| Styles that affect text spacing (line height, space between paragraphs, letter spacing, and word spacing) can be increased without loss of content or functionality. | [WCAG 1.4.12](//www.w3.org/WAI/WCAG21/quickref#text-spacing) | `css` | Manual testing and axe used | -| Contents that appear on hover and focus are dismissable, hoverable, and persistent. | [WCAG 1.4.13](//www.w3.org/WAI/WCAG21/quickref#content-on-hover-or-focus) | `html` `css` `js` | Manual testing | +| Styles that affect text spacing (line height, space between paragraphs, letter spacing, and word spacing) can be increased without loss of content or functionality. | [WCAG 1.4.12](//www.w3.org/WAI/WCAG21/quickref#text-spacing) | `css` | Manual testing and aXe used | +| Contents that appear on hover and focus are dismissible, hoverable, and persistent. | [WCAG 1.4.13](//www.w3.org/WAI/WCAG21/quickref#content-on-hover-or-focus) | `html` `css` `js` | Manual testing | | All functionality is keyboard accessible. | [WCAG 2.1.1](//www.w3.org/WAI/WCAG21/quickref#keyboard) and [2.1.2](//www.w3.org/WAI/WCAG21/quickref#no-keyboard-trap) | `html` | Manual testing | | Elements in the HTML and in the layout follow a logical order. | [WCAG 1.3.2](//www.w3.org/WAI/WCAG21/quickref#meaningful-sequence) and [2.4.3](//www.w3.org/WAI/WCAG21/quickref#focus-order) | `design` `html` `css` | Manual testing | | Elements with focus are clearly visible. | [WCAG 2.4.7](//www.w3.org/WAI/WCAG21/quickref#focus-visible) | `css` | Manual testing | | Flashing content does not flash more than three times in any one-second period, or the flash is below the general flash and red flash thresholds. | [WCAG 2.3.1](//www.w3.org/WAI/WCAG21/quickref/?showtechniques=231#three-flashes-or-below-threshold) | `css` | Manual testing| | Functionality that uses complex gestures can also be operated with a single pointer without a path-based gesture. | [WCAG 2.5.1](//www.w3.org/WAI/WCAG21/quickref#pointer-gestures) | `design` | Manual testing | -| Pointer events can be cancelled. | [WCAG 2.5.2](//www.w3.org/WAI/WCAG21/quickref#pointer-cancellation) | `js` | Manual testing | -| Visible labels of UI components are either the same as the accessible name or used in the beginning of the accessible name. | [WCAG 2.5.3](//www.w3.org/WAI/WCAG21/quickref#label-in-name) | `html` | Automated testing with axe and manual testing | +| Pointer events can be canceled. | [WCAG 2.5.2](//www.w3.org/WAI/WCAG21/quickref#pointer-cancellation) | `js` | Manual testing | +| Visible labels of UI components are either the same as the accessible name or used in the beginning of the accessible name. | [WCAG 2.5.3](//www.w3.org/WAI/WCAG21/quickref#label-in-name) | `html` | Automated testing with aXe and manual testing | | The target area for clickable elements is at least 44 by 44 [CSS pixels](//www.w3.org/TR/WCAG21#dfn-css-pixels). | [WCAG 2.5.5 (AAA)](//www.w3.org/WAI/WCAG21/quickref#target-size)* | `css` | Manual testing | -| An accessible name is provided for all elements. | [WCAG 4.1.2](//www.w3.org/WAI/WCAG21/quickref#name-role-value) | `design` `html` | Automated testing with axe and manual testing with VO +| An accessible name is provided for all elements. | [WCAG 4.1.2](//www.w3.org/WAI/WCAG21/quickref#name-role-value) | `design` `html` | Automated testing with aXe and manual testing with Voice Over | Status messages can be programmatically determined through role or properties. | [WCAG 4.1.3](//www.w3.org/WAI/WCAG21/quickref#status-messages) | `html` | Manual testing | -*WCAG 2.5.5 is included for reference only. This guideline suggests a size that is larger than what PatternFly requires. +*WCAG 2.5.5 is included for reference only. This guideline suggests a size that is larger than what PatternFly requires. \ No newline at end of file From 84d732fd74c534f783bf4fa35d5329fd1e9b7d0e Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 24 Oct 2023 18:03:22 -0400 Subject: [PATCH 2/6] Update packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md --- .../content/developer-resources/patternfly-accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md index 1598012252..668342861d 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md @@ -13,7 +13,7 @@ We also regularly audit keyboard accessibility with both manual testing and inte ## PatternFly accessibility standards -Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use or contribute to PatternFly, these are the accessibility guidelines you can expect PatternFly to meet: +Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use or contribute to PatternFly, these are the accessibility guidelines you can expect PatternFly to meet the following: | Guideline | Link | Applies to | Tested | | --- | --- | --- | --- | From 28cfd887500b7c4c0730bc2dedf505733b59945c Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:55:02 -0400 Subject: [PATCH 3/6] Update packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../content/developer-resources/patternfly-accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md index 668342861d..f31efa9358 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md @@ -9,7 +9,7 @@ We do our best to build accessibility into PatternFly's components to take some As PatternFly is updated and enhanced, we maintain accessibility through a combination of automated and manual testing. We use [aXe: The Accessibility Engine](https://www.deque.com/axe/) to ensure that all components pass an accessibility audit before they’re added to PatternFly. -We also regularly audit keyboard accessibility with both manual testing and integration tests. We aim to provide full support for Voice Over as our main screen reader, but we still test our components through NVDA and JAWS. As part of our manual audit, every component is run through Voice Over to make sure they’ll be as accessible as possible in your products. +We also regularly audit keyboard accessibility with both manual testing and integration tests. We aim to provide full support for VoiceOver as our main screen reader, but we still test our components through NVDA and JAWS. As part of our manual audit, every component is run through VoiceOver to make sure they’ll be as accessible as possible in your products. ## PatternFly accessibility standards From 0e91353222347bec012545c6c18e254f594950c1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:57:58 -0400 Subject: [PATCH 4/6] Apply suggestions from code review --- .../content/developer-resources/patternfly-accessibility.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md index f31efa9358..34e5ad0d62 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md @@ -3,7 +3,7 @@ id: PatternFly's accessibility section: accessibility --- -# PatternFly components accessibility +## Component accessibility We do our best to build accessibility into PatternFly's components to take some of the accessibility work off your hands. @@ -11,9 +11,9 @@ As PatternFly is updated and enhanced, we maintain accessibility through a comb We also regularly audit keyboard accessibility with both manual testing and integration tests. We aim to provide full support for VoiceOver as our main screen reader, but we still test our components through NVDA and JAWS. As part of our manual audit, every component is run through VoiceOver to make sure they’ll be as accessible as possible in your products. -## PatternFly accessibility standards +## Accessibility standards -Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use or contribute to PatternFly, these are the accessibility guidelines you can expect PatternFly to meet the following: +Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use or contribute to PatternFly, the following accessibility guidelines are some that you can expect PatternFly: | Guideline | Link | Applies to | Tested | | --- | --- | --- | --- | From d3019c76c4272325bfae2b6b0a73165dbb182392 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:24:48 -0500 Subject: [PATCH 5/6] Update packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md --- .../content/developer-resources/patternfly-accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md index 34e5ad0d62..06257af9a6 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md @@ -13,7 +13,7 @@ We also regularly audit keyboard accessibility with both manual testing and inte ## Accessibility standards -Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use or contribute to PatternFly, the following accessibility guidelines are some that you can expect PatternFly: +Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa). If you use or contribute to PatternFly, the following accessibility guidelines are some that you can expect PatternFly to adhere to: | Guideline | Link | Applies to | Tested | | --- | --- | --- | --- | From 072e2d0ae5c30600836883b361292f38b4d46e71 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:45:10 -0500 Subject: [PATCH 6/6] Update packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../content/developer-resources/patternfly-accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md index 06257af9a6..6d7789d6d7 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/patternfly-accessibility.md @@ -31,7 +31,7 @@ Our goal is to meet [level AA in the Web Content Accessibility Guidelines 2.1](h | Pointer events can be canceled. | [WCAG 2.5.2](//www.w3.org/WAI/WCAG21/quickref#pointer-cancellation) | `js` | Manual testing | | Visible labels of UI components are either the same as the accessible name or used in the beginning of the accessible name. | [WCAG 2.5.3](//www.w3.org/WAI/WCAG21/quickref#label-in-name) | `html` | Automated testing with aXe and manual testing | | The target area for clickable elements is at least 44 by 44 [CSS pixels](//www.w3.org/TR/WCAG21#dfn-css-pixels). | [WCAG 2.5.5 (AAA)](//www.w3.org/WAI/WCAG21/quickref#target-size)* | `css` | Manual testing | -| An accessible name is provided for all elements. | [WCAG 4.1.2](//www.w3.org/WAI/WCAG21/quickref#name-role-value) | `design` `html` | Automated testing with aXe and manual testing with Voice Over +| An accessible name is provided for all elements. | [WCAG 4.1.2](//www.w3.org/WAI/WCAG21/quickref#name-role-value) | `design` `html` | Automated testing with aXe and manual testing with VoiceOver | Status messages can be programmatically determined through role or properties. | [WCAG 4.1.3](//www.w3.org/WAI/WCAG21/quickref#status-messages) | `html` | Manual testing | *WCAG 2.5.5 is included for reference only. This guideline suggests a size that is larger than what PatternFly requires. \ No newline at end of file