Skip to content

Commit 785673c

Browse files
kendo-botkendo-bot
committed
docs: update accessibility and keyboard-nav specs
1 parent 7469f5e commit 785673c

File tree

12 files changed

+1134
-0
lines changed

12 files changed

+1134
-0
lines changed

‎components/aiprompt/accessibility/wai-aria-support.md

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Wai-Aria Support
3+
page_title: Telerik UI for Blazor AIPrompt Documentation | AIPrompt Accessibility
4+
description: "Get started with the Telerik UI for Blazor AIPrompt and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
tags: telerik,blazor,accessibility,wai-aria,wcag
6+
slug: aiprompt-wai-aria-support
7+
position: 50
8+
---
9+
10+
# Blazor AIPrompt Accessibility
11+
12+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
13+
14+
15+
16+
Out of the box, the Telerik UI for Blazor AI Prompt provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
17+
18+
19+
The AI Prompt is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
20+
21+
## WAI-ARIA
22+
23+
24+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
25+
26+
### AI Prompt
27+
28+
29+
The AI Prompt component is a composite one and integrates the accessibility of the Toolbar, TextArea, Card List container
30+
31+
### TextArea Component
32+
33+
[TextArea accessibility specification]({{textarea_a11y_link}})
34+
35+
### Prompt Suggestion Component
36+
37+
38+
The Prompt suggestion list implements roving tabindex navigation. Meaning that only one suggestion has tabindex=0. The display of the suggestion list is controlled by the expand button.
39+
40+
| Selector | Attribute | Usage |
41+
| -------- | --------- | ----- |
42+
| `.k-prompt-expander .k-button` | `aria-controls=.k-prompt-expander-content id` | Points to the controlled element based on the given `id`. |
43+
| | `aria-expanded=true/false` | Indicates the expanded state of the prompt expander content. |
44+
| `.k-prompt-expander .k-prompt-expander-content` | `role=list` | Indicates that the suggestion container element is a list. |
45+
| `.k-prompt-expander .k-prompt-suggestion` | `role=listitem` | Indicates that the suggestion element is a listitem. |
46+
| | `tabindex=0/-1` | The element should be focusable. |
47+
48+
### Toolbar Component
49+
50+
[ToolBar accessibility specification]({{toolbar_a11y_link}})
51+
52+
### Card List Container
53+
54+
[CardList accessibility specification]({{cardlist_a11y_link}})
55+
56+
### Card Component
57+
58+
[Card accessibility specification]({{card_a11y_link}})
59+
60+
### More Actions View - PanelBar Component
61+
62+
[PanelBar accessibility specification]({{panelbar_a11y_link}})
63+
64+
## Section 508
65+
66+
67+
The AI Prompt is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
68+
69+
## Testing
70+
71+
72+
The AI Prompt has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
73+
74+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
75+
76+
### Screen Readers
77+
78+
79+
The AI Prompt has been tested with the following screen readers and browsers combinations:
80+
81+
| Environment | Tool |
82+
| ----------- | ---- |
83+
| Firefox | NVDA |
84+
| Chrome | JAWS |
85+
| Microsoft Edge | JAWS |
86+
87+
88+
89+
## Keyboard Navigation
90+
91+
For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article.
92+
93+
## See Also
94+
95+
* [Blazor AIPrompt Demos](https://demos.telerik.com/blazor-ui/aiprompt/overview)
96+
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})

‎components/chip/accessibility/wai-aria-support.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Wai-Aria Support
3+
page_title: Telerik UI for Blazor Chip Documentation | Chip Accessibility
4+
description: "Get started with the Telerik UI for Blazor Chip and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
tags: telerik,blazor,accessibility,wai-aria,wcag
6+
slug: chip-wai-aria-support
7+
position: 50
8+
---
9+
10+
# Blazor Chip Accessibility
11+
12+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
13+
14+
15+
16+
Out of the box, the Telerik UI for Blazor Chip provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
17+
18+
19+
The Chip is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
20+
21+
## WAI-ARIA
22+
23+
24+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
25+
26+
| Selector | Attribute | Usage |
27+
| -------- | --------- | ----- |
28+
| `*:not(.k-chip-list) > .k-chip` | `role=button` | Announces that a chip is an optional inner component within the Chip list. |
29+
| `*:not(.k-chip-list) > .k-chip.k-selected` | `aria-pressed=true` | Announces that the Chip has been selected. |
30+
| `*:not(.k-chip-list) > .k-chip:not(.k-selected)` | `aria-pressed=false` | Announces that the Chip has not benn selected. |
31+
32+
## Resources
33+
34+
[WAI-ARIA Authoring Practices: Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
35+
36+
## Section 508
37+
38+
39+
The Chip is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
40+
41+
## Testing
42+
43+
44+
The Chip has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
45+
46+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
47+
48+
### Screen Readers
49+
50+
51+
The Chip has been tested with the following screen readers and browsers combinations:
52+
53+
| Environment | Tool |
54+
| ----------- | ---- |
55+
| Firefox | NVDA |
56+
| Chrome | JAWS |
57+
| Microsoft Edge | JAWS |
58+
59+
60+
61+
## Keyboard Navigation
62+
63+
For details on how the Chip keyboard navigation works, refer to the [Blazor Chip Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/chip/keyboard-navigation).
64+
65+
## See Also
66+
67+
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})

‎components/chiplist/accessibility/wai-aria-support.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Wai-Aria Support
3+
page_title: Telerik UI for Blazor ChipList Documentation | ChipList Accessibility
4+
description: "Get started with the Telerik UI for Blazor ChipList and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
tags: telerik,blazor,accessibility,wai-aria,wcag
6+
slug: chiplist-wai-aria-support
7+
position: 50
8+
---
9+
10+
# Blazor ChipList Accessibility
11+
12+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
13+
14+
15+
16+
Out of the box, the Telerik UI for Blazor ChipList provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
17+
18+
19+
The ChipList is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
20+
21+
## WAI-ARIA
22+
23+
24+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
25+
26+
| Selector | Attribute | Usage |
27+
| -------- | --------- | ----- |
28+
| `.k-chip-list` | `role=listbox` | Announces the list role of the chip list. |
29+
| | `aria-label` or `aria-labelledby` | Adds label to the ChipList element. ListBox element requires an accessible name attached to it. |
30+
| | `aria-orientation=horizontal` | Specifies the horizontal orientation of the chiplist that gives context about the navigation shortcuts. |
31+
| | `aria-multiselectable=true` | Announces the multiple selection ability of the chiplist. Only when the selection mode is set to multiple. |
32+
| `.k-chip` | `role=option` | Announces the chip is an option inner component of the chip list. |
33+
| `.k-chip.k-selected` | `aria-selected=true` | Announces the chip is selected. |
34+
| `.k-chip:not(.k-selected)` | `aria-selected=false` | Announces the chip is not selected. |
35+
| `.k-chip:has(.k-i-x-circle),.k-chip:has(.k-svg-i-x-circle)` | `aria-keyshortcuts=Enter Delete` | Announces the Delete action along with the default Enter key used for selection/click action. |
36+
37+
38+
When selection is disabled in the ChipList, it should not have its role set to `listbox`. Instead, the attribute should either be omitted, or its value should be set to `none`. In that case the `role` of the Chip elements should remain `button` as per the Chip component specification.
39+
40+
## Resources
41+
42+
[ARIA practices list pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)
43+
44+
## Section 508
45+
46+
47+
The ChipList is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
48+
49+
## Testing
50+
51+
52+
The ChipList has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
53+
54+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
55+
56+
### Screen Readers
57+
58+
59+
The ChipList has been tested with the following screen readers and browsers combinations:
60+
61+
| Environment | Tool |
62+
| ----------- | ---- |
63+
| Firefox | NVDA |
64+
| Chrome | JAWS |
65+
| Microsoft Edge | JAWS |
66+
67+
68+
69+
## Keyboard Navigation
70+
71+
For details on how the ChipList keyboard navigation works, refer to the [Blazor ChipList Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/chiplist/keyboard-navigation).
72+
73+
## See Also
74+
75+
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})

‎components/dropdownbutton/accessibility/wai-aria-support.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Wai-Aria Support
3+
page_title: Telerik UI for Blazor DropDownButton Documentation | DropDownButton Accessibility
4+
description: "Get started with the Telerik UI for Blazor DropDownButton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
tags: telerik,blazor,accessibility,wai-aria,wcag
6+
slug: dropdownbutton-wai-aria-support
7+
position: 50
8+
---
9+
10+
# Blazor DropDownButton Accessibility
11+
12+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
13+
14+
15+
16+
Out of the box, the Telerik UI for Blazor DropDownButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
17+
18+
19+
The DropDownButton is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
20+
21+
## WAI-ARIA
22+
23+
24+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
25+
26+
### Main Button Element
27+
28+
29+
The following table summarizes the selectors and attributes supported by the main `button` element of the DropDownButton:
30+
31+
| Selector | Attribute | Usage |
32+
| -------- | --------- | ----- |
33+
| `.k-menu-button` | `role=button` or `nodeName=button` | Omitted if the `<button>` DOM element is used. |
34+
| | `aria-label` | The attribute must be present when no text is initially visible in the button. |
35+
| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
36+
| | `aria-controls=.k-menu-group id` | Points to the popup element. Builds a relationship between the button and the popup. |
37+
| `.k-menu-button.k-disabled` | `aria-disabled=true` | Rendered only when the button is disabled and the `disabled` attribute cannot be used. Applicable to the `<button>` or `<input type="button">` elements. |
38+
39+
### Popup Menu Element
40+
41+
42+
The following table summarizes the selectors and attributes supported by the popup `menu` element of the DropDownButton:
43+
44+
| Selector | Attribute | Usage |
45+
| -------- | --------- | ----- |
46+
| `.k-menu-group` | `role=list` | Announces the `list` role of the popup. |
47+
| `.k-menu-item` | `role=listitem` | Announces the `listitem` role of the popup items. |
48+
49+
## Resources
50+
51+
[WAI-ARIA Authoring Practices: Disclosure Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)
52+
53+
## Section 508
54+
55+
56+
The DropDownButton is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
57+
58+
## Testing
59+
60+
61+
The DropDownButton has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
62+
63+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
64+
65+
### Screen Readers
66+
67+
68+
The DropDownButton has been tested with the following screen readers and browsers combinations:
69+
70+
| Environment | Tool |
71+
| ----------- | ---- |
72+
| Firefox | NVDA |
73+
| Chrome | JAWS |
74+
| Microsoft Edge | JAWS |
75+
76+
77+
78+
## Keyboard Navigation
79+
80+
For details on how the DropDownButton keyboard navigation works, refer to the [Blazor DropDownButton Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/dropdownbutton/keyboard-navigation).
81+
82+
## See Also
83+
84+
* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})

0 commit comments

Comments
 (0)