@progress/wct-a11y-spec
Version:
Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.
67 lines (38 loc) • 3.43 kB
Markdown
Out of the box, the Kendo UI for jQuery ColumnChooser provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The ColumnChooser 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.
## WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
### The ColumnChooser Button
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-grid-column-chooser .k-button` | `has-popup=dialog` | Specifies that the button opens a dialog. |
| | `aria-expanded=true/false` | Announces the current open state of the popup. |
| | `aria-controls=.k-animation-container id` | Points to the popup that the button toggles. |
### The ColumnChooser Columns List
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-column-list` | `role=listbox` | Sets the listbox role of the list of columns wrapper. |
| | `aria-multiselectable=true` | Specifies that the list is multiselectable. |
| `.k-column-list .k-column-list-item` | `role=option` | Sets the option role of the list item. |
| | `aria-checked=true/false` | Sets the checked state of list item. |
| | `tabindex=0/-1` | Sets the tabindex depending on the item's focused state. |
| `.k-column-list-item .k-checkbox` | `tabindex=-1` | Removes the default focus behavior of the checkbox. |
| | `aria-hidden=true` | Hides the checkbox from the assistive technologies, as its accessibility is implemented by the item wrapper. |
Disregard the AXE nested interactive rule as it lacks precise definition and does not account for specific use-cases individually. The current ColumnChooser specification does not violate any explicit WCAG success criteria, allowing us to safely ignore the newly introduced AXE interpretation.
## Resources
[WAI-ARIA specification for listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)
[MDN reference for the dialog role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)
[AXE Nested Interactive Rule](https://dequeuniversity.com/rules/axe/4.7/nested-interactive?application=AxeChrome)
[Deque Github Issue Discussion for the Nested Interactive AXE Rule](https://github.com/dequelabs/axe-core/issues/2906)
## Section 508
The ColumnChooser is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
## Testing
The ColumnChooser has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
### Screen Readers
The ColumnChooser has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
| ----------- | ---- |
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |