Accessibility revamp continued

Author: dimodi

accessibility/compliance.md

@@ -5,31 +5,30 @@ description: Compliance with the accessibility standards and requirements in the
 slug: accessibility-compliance
 tags: telerik,blazor,accessibility,standards,compliance
 published: True
-position: 4
+position: 10
 previous_url: /accessibility/wcag-section-508-wai-aria
 ---
 
 # Accessibility Standards Compliance
 
-This article lists the compliance with the various accessibility standards that the Telerik UI for Blazor components provide.
+This article lists the accessibility compliance of the Telerik UI for Blazor components.
 
-For details on the keyboard support and how it works, see the [Keyboard Navigation]({%slug accessibility-overview%}#keyboard-navigation) section.
+## Accessibility Conformance Report
 
-All components implement the required WAI-ARIA attributes without the need for any extra configuration.
+The [Accessibility Conformance Report (ACR)](https://www.section508.gov/sell/acr/) is a document that explains how information and communication technology products such as software, hardware, electronic content, and support documentation conform to the <a href="https://www.access-board.gov/ict/" target="_blank">Revised 508 Standards for IT accessibility</a>. Progress Software provides an ACR for Telerik UI for Blazor through a <a href="https://www.itic.org/policy/accessibility/vpat" target="_blank">Voluntary Product Accessibility Template (VPAT®)</a>.
 
-Due to the complexity of some of the components in the suite, we sometimes run into scenarios that are not covered by the WAI-ARIA specification. In those cases, we benefit from the know-how of the dedicated accessibility professionals at Progress Software and feedback from accessibility-minded users.
+>tip Download the latest version of the <a href="assets/BlazorVPAT.doc" download>Telerik UI for Blazor Accessibility Conformance Report</a>.
 
-The Telerik UI for Blazor components are highly extensible and customizable. This means that, depending on the level of customization applied, you may be introducing rendering that is not accessible. Therefore, it is recommended that you test any modifications and templates you create to ensure the components still meet the desired level of accessibility standards. Additionally, be mindful of components working with custom input (images, text, HTML content, and so on) and make sure your content is accessible too.
-
-## Voluntary Product Accessibility Template
-
-A [Voluntary Product Accessibility Template (VPAT®)](https://www.section508.gov/sell/vpat/) is a document that explains how information and communication technology (ICT) products such as software, hardware, electronic content, and support documentation meet (conform to) the Revised 508 Standards for IT accessibility.
+## Compliance Table
 
->tip Download and review the latest version of the <a href="assets/BlazorVPAT.doc" download>Telerik UI for Blazor VPAT document</a>.
+The compliance table below is subject to the following considerations:
 
-## Compliance Table
+* All components implement the required WAI-ARIA attributes without the need for any extra configuration. Some components may provide parameters that render additional optional WAI-ARIA attributes, for example, `aria-label` or `aria-describedby`.
+* The compliance levels are achievable with the [*Default Ocean Blue A11y* theme swatch]({%slug accessibility-overview%}#color-contrast).
+* The accessibility and compliance of some components may depend on the enabled features. Component templates may introduce custom markup that is not accessible. Test any modifications to ensure the components still meet the desired level of accessibility compliance. Additionally, be mindful of components that work with user input such as images, text, or HTML content. Make sure that content is accessible too.
+* Due to the complexity of some components, there are scenarios that are not covered by the WAI-ARIA specification. In those cases, we benefit from the know-how of the dedicated accessibility professionals at Progress Software and feedback from accessibility-minded users.
 
-> The compliance and accessibility of some components may depend on the enabled features. The compliance levels in the table below are achievable with the [*Default Ocean Blue A11y* theme swatch]({%slug accessibility-overview%}#color-contrast).
+The *Keyboard Navigation* column links to component-specific online demos or keyboard shortcut lists. For general information on how the keyboard support works, see the [Keyboard Navigation]({%slug accessibility-overview%}#keyboard-navigation) section.
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
@@ -56,7 +55,7 @@ A [Voluntary Product Accessibility Template (VPAT®)](https://www.section508.gov
 | CircularGauge | No | N/A | N/A | N/A |
 | ColorGradient | Yes | AA | [Enhanced](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) | [Documentation]({%slug colorgradient-wai-aria-support%}) |
 | ColorPalette | Yes | AA | [Enhanced](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation) | [Documentation]({%slug colorpalette-wai-aria-support%}) |
-| ColorPicker | Yes | AA | [Enhanced](https://demos.telerik.com/blazor-ui/colorpicker/overview) <br /> Also see the [ColorGradient](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) and [ColorPalette](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation). | [Documentation]({%slug colorpicker-wai-aria-support%}) |
+| ColorPicker | Yes | AA | [Enhanced](https://demos.telerik.com/blazor-ui/colorpicker/overview) <br /> Also see [ColorGradient](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) and [ColorPalette](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation). | [Documentation]({%slug colorpicker-wai-aria-support%}) |
 | ComboBox | Yes | AA | [Enhanced](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation) | [Documentation]({%slug combobox-wai-aria-support%}) |
 | ContextMenu | Yes | AA | [Enhanced](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation) | [Documentation]({%slug contextmenu-wai-aria-support%}) |
 | DateInput | Yes | AA | [Enhanced](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation) | [Documentation]({%slug dateinput-wai-aria-support%}) |

accessibility/overview.md

@@ -5,17 +5,17 @@ description: Accessibility features in the Telerik UI for Blazor suite.
 slug: accessibility-overview
 tags: telerik,blazor,accessibility,overview
 published: True
-position: 0
+position: 1
 previous_url: /accessibility/keyboard-navigation,/accessibility/accessibility-swatch
 ---
 
 # Blazor Accessibility Overview
 
 Websites and applications are accessible when they provide full control over their features by enabling users with disabilities to access their content through assistive technologies or keyboard navigation.
 
-Accessibility consists of several aspects:
+Web content accessibility includes several aspects:
 
-* [WCAG, Section 508, and WAI-ARIA standards]({%slug accessibility-standards%})
+* WCAG, Section 508, and WAI-ARIA standards
 * [Keyboard Navigation](#keyboard-navigation)
 * [Color Contrast](#color-contrast)
 * [Globalization]({%slug globalization-overview%})
@@ -28,49 +28,38 @@ Accessibility consists of several aspects:
 
 ## Keyboard Navigation
 
-The Telerik UI for Blazor components support keyboard navigation and the end users can use the keyboard to walk through them and invoke actions such as clicking buttons, paging the Grid, and so on.
+Normally, users can use the keyboard only to focus and navigate to HTML links, buttons, and form inputs. Telerik UI for Blazor has gone to the next level and provides focusable and navigable components, even though they represent complex structures. Users can use the keyboard to invoke actions such as opening DropDownLists, sorting Grid columns, resizing Splitter panes, and so on.
 
-Generally, to focus a component, use the `Tab` key as the keyboard support of the page follows the normal flow of the content. Once inside a component, you can use specific keyboard shortcuts to trigger specific actions such as using the `Arrow` keys to focus different cells in the Grid, or the `Enter` key to click a button.
+The keyboard support follows the normal flow of the web page content. Use the `Tab` key to focus a component and then use specific keyboard shortcuts to trigger specific actions. For example, use the arrow keys to move across cells in the Grid or hit `Enter` to invoke a button click.
 
-Normally, users can use the keyboard to navigate only to HTML links, buttons, and form controls. The Telerik UI for Blazor library has gone to the next level and the components it delivers are focusable. In this way, even though the components represent complex structures, users can interact with them too.
-
-The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, the focus has to follow the visual horizontal and vertical flow of the page. For example, left-to-right and top-to-bottom, header first followed by the main and, then, page navigation.
-
-Most of the components in the library represent a single `Tab` stop. Once users reach and focus a component, they can leave it with a single tab. If the component is more complex, users can walk though its inside elements with the `Arrow` keys, for example, Grid cells, Menu items, Toolbar buttons. Some complex components can accommodate multiple other components. For example, the Grid can host a Toolbar and a Pager. In this case, you can tab to move the focus from one nested component to another.
+Most components represent a single tab stop. Once users reach and focus a component, they can leave it with a single `Tab` key press. If the component is more complex, users can walk through its inner elements with the arrow keys, for example, Grid cells, Menu items, Toolbar buttons. Some complex components can accommodate multiple other components. For example, the Grid can host a Toolbar and a Pager. In this case, tab to move the focus from one nested component to another.
 
 ### Types of Keyboard Support
 
-The Telerik UI for Blazor components may provide enhanced, standard, or no keyboard support. See the [compliance table]({%slug accessibility-compliance%}) for component-specific information.
+The Telerik UI for Blazor components may provide enhanced, standard, or no keyboard support. See the [compliance table]({%slug accessibility-compliance%}#compliance-table) for component-specific information.
 
 * *Standard keyboard support* implies similar keyboard navigation capabilities as standard HTML elements. For example, the Button components support `Enter` and `Space` for clicking them. All components with standard keyboard support are reachable through the `Tab` key and provide focus styles.
 * *Enhanced keyboard support* builds on top of the standard key combinations and provides additional built-in shortcuts for improved flexibility and user experience.
-* The components with no keyboard support serve a purely visualization purpose, are just content containers, provide no interaction, or provide only mouse and touch interaction by design.
+* Components with no keyboard support may serve a purely visual purpose, or be containers with no available interaction.
 
 ### Right-to-Left Support
 
-When the [right-to-left direction is enabled]({%slug rtl-support%}), the keyboard shortcuts for the components that support keyboard navigation remain unchanged except for the `Left arrow` and `Right arrow` keys—their functionality is reversed to follow the right-to-left direction.
+When using [right-to-left text direction]({%slug rtl-support%}), the keyboard shortcuts for the components remain unchanged. The left and right arrow keys reverse their behavior to be consistent with the RTL mode.
 
 ## Color Contrast
 
-WCAG sections [1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) define contrast ratios for accessibility compliance. The *Default Ocean Blue A11y* [theme swatch]({%slug themes-overview%}#basics) in Telerik UI for Blazor conforms to WCAG Level AA, which requires contrast ratios of at least:
-
-* 4.5:1 for normal text
-* 3:1 for large text
-
-To preview the Default Ocean Blue A11y swatch, visit the [Telerik UI for Blazor live demos](https://demos.telerik.com/blazor-ui/grid/overview). Select the swatch from the **Change Theme** dropdown above any of the examples.
-
-The Default Ocean Blue A11y swatch is built on top of the Default Ocean Blue swatch. The main difference is that the Ocean Blue A11y swatch has high-contrast focus indicators to comply with WCAG requirements.
-
-### Using the Ocean Blue Accessibility Swatch
+WCAG sections <a href="https://www.w3.org/TR/WCAG22/#contrast-minimum" target="_blank">1.4.3 Contrast (Minimum)</a> and <a href="https://www.w3.org/TR/WCAG22/#contrast-enhanced" target="_blank">1.4.6 Contrast (Enhanced)</a> define contrast ratios for accessibility compliance. The built-in [*Default Ocean Blue A11y* theme swatch](https://www.telerik.com/design-system/docs/themes/kendo-themes/default/swatches/#ocean-blue-accessibility-swatch) in Telerik UI for Blazor conforms to WCAG Level AA, except success criterion <a href="https://www.w3.org/TR/WCAG22/#non-text-contrast" target="_blank">1.4.11 Non-text Contrast</a> in the ColorPalette component.
 
 You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-overview%}#swatch) starting from the following component and theme versions:
 
 * [Telerik UI for Blazor version 4.0.1](https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-4-0-1)
-* [Themes version 6.0.3](https://github.com/telerik/kendo-themes/releases/tag/v6.0.3). Check section [Theme Version Compatibility]({%slug themes-overview%}#compatibility-and-maintenance) for more information about how to align Telerik UI for Blazor versions with theme versions.
+* [Themes version 6.0.3](https://github.com/telerik/kendo-themes/releases/tag/v6.0.3). Check section [Theme Version Compatibility]({%slug themes-overview%}#compatibility-and-maintenance) on how to align Telerik UI for Blazor versions with theme versions.
+
+## Next Steps
 
-> An existing limitation is that the ColorPalette component fails WCAG success criterion 1.4.11. "Non-text contrast for the focus indicator on its items".
+* [Review Telerik UI for Blazor Accessibility Compliance Table]({%slug accessibility-compliance%})
+* [Download Telerik UI for Blazor Accessibility Conformance Report (ACR)]({%slug accessibility-compliance%}#accessibility-conformance-report)
 
 ## See Also
 
-* [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%})
 * [Default Ocean Blue Accessibility Swatch]({%slug accessibility-overview%}#color-contrast)

accessibility/wcag-section-508-wai-aria.md

@@ -4,7 +4,7 @@ page_title: WCAG, Section 508, WAI-ARIA
 description: Accessibility standards - WCAG, Section 508, WAI-ARIA.
 slug: accessibility-standards
 tags: telerik,blazor,accessibility,standards
-published: True
+published: False
 position: 1
 ---