Skip to content

Commit e26020f

Browse files
dimodidimodi
committed
Accessibility revamp RC2
1 parent b8c7947 commit e26020f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+275
-125
lines changed

‎accessibility/compliance.md‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,13 @@ The [Accessibility Conformance Report (ACR)](https://www.section508.gov/sell/acr
2121
2222
## Compliance Table
2323

24-
The table below specifies the level of WCAG 2.2 compliance of each Telerik component for Blazor. The table also provides links to information about keyboard shortcuts, WAI-ARIA attributes, and additional component-specific accessibility documentation.
24+
The table below specifies the level of WCAG 2.2 compliance of each Telerik component for Blazor.
2525

26-
The information is subject to the following considerations:
26+
* 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.
27+
* The *Accessibility Documentation* column links to component-specific details and information about WAI-ARIA attributes.
28+
* For information about **Section 508** of the US Rehabilitation Act, the **European Accessibility Act** in the EU, or any other national accessibility legislation, see section [Legal and Technical Compliance]({%slug accessibility-overview%}#legal-and-technical-compliance).
2729

28-
* 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`.
29-
* The compliance levels are achievable with the [*Default Ocean Blue A11y* theme swatch]({%slug accessibility-overview%}#color-contrast).
30-
* The accessibility and compliance of some components may depend on the enabled features. In such cases, the compliance level below is based on the default component configuration.
31-
* Component templates introduce custom markup that may not be accessible. Test any modifications to ensure the web content still meets the desired level of accessibility compliance. Be mindful of components that work with user input such as images, text, or HTML content.
32-
* 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.
33-
34-
For information about **Section 508** of the US Rehabilitation Act, the **European Accessibility Act** in the EU, or any other national accessibility legislation, see section [Legal and Technical Compliance]({%slug accessibility-overview%}#legal-and-technical-compliance).
35-
36-
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.
30+
Also check the [notes below the table](#accessibility-compliance-notes).
3731

3832
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
3933

@@ -138,6 +132,16 @@ The *Keyboard Navigation* column links to component-specific online demos or key
138132
| Window | AA | [Enhanced](https://demos.telerik.com/blazor-ui/window/keyboard-navigation) | [Documentation]({%slug window-wai-aria-support%}) |
139133
| Wizard | AA | [Enhanced](https://demos.telerik.com/blazor-ui/wizard/keyboard-navigation) | [Documentation]({%slug wizard-wai-aria-support%}) |
140134

135+
## Accessibility Compliance Notes
136+
137+
The information in the compliance table above is subject to the following considerations:
138+
139+
* 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`.
140+
* The compliance levels are achievable with the [*Default Ocean Blue A11y* theme swatch]({%slug accessibility-overview%}#color-contrast) or any other [custom theme swatch]({%slug themes-customize%}) that provides the minimum required color contrast.
141+
* The accessibility and compliance of some components may depend on the enabled features. In such cases, the compliance table information is based on the default component configuration.
142+
* Component templates introduce custom markup that may not be accessible. Test any modifications to ensure the web content still meets the desired level of accessibility compliance. Be mindful of components that work with user input such as images, text, or HTML content.
143+
* 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.
144+
141145
## See Also
142146

143147
* [Accessibility Overview]({%slug accessibility-overview%})

‎accessibility/overview.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ Web applications are accessible when they provide control over their features to
2121
2222
## Legal and Technical Compliance
2323

24-
Accessibility compliance can be considered from a legal and technical perspective, but these ultimately merge. <a href="https://www.w3.org/WAI/policies/" target="_blank">Different countries have different regulations about web content accessibility compliance</a>, for example, Section 508 of the US Rehabilitation Act or the EU European Accessibility Act.
24+
Accessibility compliance can be considered from a legal and technical perspective, but these ultimately merge. <a href="https://www.w3.org/WAI/policies/" target="_blank">Different countries have different regulations about web content accessibility compliance</a>, for example:
25+
26+
* Section 508 of the US Rehabilitation Act
27+
* The EU European Accessibility Act
2528

2629
The national regulations normally share the following characteristics:
2730

@@ -36,6 +39,7 @@ From technical point of view, Telerik UI for Blazor achieves accessibility throu
3639
* [WAI-ARIA attributes](#wai-aria)
3740
* [Keyboard navigation](#keyboard-navigation)
3841
* [Color contrast](#color-contrast)
42+
* [Best practices in component development and testing](#development-practices)
3943

4044
## Web Context Accessibility Guidelines
4145

@@ -78,7 +82,16 @@ You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-overvi
7882
* [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)
7983
* [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.
8084

81-
## Screen Readers
85+
## Development Practices
86+
87+
When implementing a Telerik Blazor component, the team:
88+
89+
* Follows the WCAG standard and WAI-ARIA specification to lay the right foundation for the component accessibility.
90+
* Implements automated unit tests guarantee accessible and semantically correct rendering.
91+
* Localizes messages for labels, titles, and other elements.
92+
* Manually tests the component to with regard to its keyboard navigation and usage with screen readers.
93+
94+
### Screen Readers
8295

8396
There are a lot of existing screen readers, for example:
8497

‎src-a11y/configs/autocomplete.aria.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ dest: ../components/autocomplete/accessibility/wai-aria-support.md
55
slug: autocomplete-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the AutoComplete keyboard navigation works, refer to the [Blazor AutoComplete Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation).
11+
812
## See Also
913
10-
* [Blazor AutoComplete Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation)
1114
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

‎src-a11y/configs/breadcrumb.aria.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ dest: ../components/breadcrumb/accessibility/wai-aria-support.md
55
slug: breadcrumb-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the Breadcrumb keyboard navigation works, refer to the [Blazor Breadcrumb Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/breadcrumb/keyboard-navigation).
11+
812
## See Also
913
10-
* [Blazor Breadcrumb Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/breadcrumb/keyboard-navigation)
1114
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

‎src-a11y/configs/button.aria.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ dest: ../components/button/accessibility/wai-aria-support.md
55
slug: button-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the Button keyboard navigation works, refer to the [Blazor Button Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/button/keyboard-navigation).
11+
812
## See Also
913
10-
* [Blazor Button Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/button/keyboard-navigation)
1114
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

‎src-a11y/configs/buttongroup.aria.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ dest: ../components/buttongroup/accessibility/wai-aria-support.md
55
slug: buttongroup-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the ButtonGroup keyboard navigation works, refer to the [Blazor ButtonGroup Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation).
11+
812
## See Also
913
10-
* [Blazor ButtonGroup Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation)
1114
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

‎src-a11y/configs/calendar.aria.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ dest: ../components/calendar/accessibility/wai-aria-support.md
55
slug: calendar-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the Calendar keyboard navigation works, refer to the [Blazor Calendar Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation).
11+
812
## See Also
913
10-
* [Blazor Calendar Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation)
1114
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

‎src-a11y/configs/carousel.aria.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ dest: ../components/carousel/accessibility/wai-aria-support.md
55
slug: carousel-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the Carousel keyboard navigation works, refer to the [Blazor Carousel Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation).
11+
812
## See Also
913
10-
* [Blazor Carousel Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation)
1114
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

‎src-a11y/configs/chart.aria.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ dest: ../components/chart/accessibility/wai-aria-support.md
55
slug: chart-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the Chart keyboard navigation works, refer to the [Blazor Chart Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/chart/keyboard-navigation).
11+
812
## See Also
913
10-
* [Blazor Chart Overview (Demo)](https://demos.telerik.com/blazor-ui/chart/overview)
1114
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

‎src-a11y/configs/checkbox.aria.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@ dest: ../components/checkbox/accessibility/wai-aria-support.md
55
slug: checkbox-wai-aria-support
66
position: 50
77
after: |
8+
## Keyboard Navigation
9+
10+
For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article.
11+
812
## See Also
913
10-
* [Blazor CheckBox Overview (Demo)](https://demos.telerik.com/blazor-ui/checkbox/overview)
14+
* [Blazor CheckBox Demos](https://demos.telerik.com/blazor-ui/checkbox/overview)
1115
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})
12-
* [Accessibility Theme]({%slug accessibility-overview%}#color-contrast)

0 commit comments

Comments
 (0)