@progress/wct-a11y-spec

[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI ColumnMenu provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The ColumnMenu is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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](#managing-the-focus) and is tested against the most popular [screen readers](#screen-readers)." }, { "h3": "WAI-ARIA" }, { "p": "This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any." }, { "h4": "The ColumnMenu Button/Header" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grid-column-menu`", "Attribute": "`role=button`", "Usage": "Specifies that column menu element has role button." }, { "Selector": "", "Attribute": "`aria-haspopup=dialog`", "Usage": "Specifies that the button opens a dialog." }, { "Selector": "", "Attribute": "`aria-expanded=true/false`", "Usage": "Announces the current state of the popup." }, { "Selector": "", "Attribute": "`aria-controls=.k-popup.k-grid-columnmenu-popup id`", "Usage": "Points to the popup that the button toggles." }, { "Selector": "`.k-header:has(.k-grid-column-menu)`", "Attribute": "`aria-haspopup=dialog`", "Usage": "Specifies that the header cell opens a dialog." }, { "Selector": "", "Attribute": "`aria-expanded=true/false`", "Usage": "Announces the current state of the popup." }, { "Selector": "", "Attribute": "`aria-controls=.k-popup.k-grid-columnmenu-popup id`", "Usage": "Points to the popup that the button toggles." }, { "Selector": "", "Attribute": "`aria-keyshortcuts=Alt + ArrowDown`", "Usage": "Announces the available column-menu shortcut." } ] } }, { "h4": "The ColumnMenu Popup" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-popup.k-grid-columnmenu-popup`", "Attribute": "`id`", "Usage": "Unique and deterministic id linked to the button or header cell aria-controls attribute." }, { "Selector": "", "Attribute": "`role=dialog`", "Usage": "Sets the dialog role of the popup." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "Contains descriptive information about the column menu purpose - e.g. 'Column Title Column Menu'" } ] } }, { "h4": "ColumnMenu Popup ExpandableContent" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-columnmenu-item`", "Attribute": "`role=button`", "Usage": "Sets column menu item role to button" }, { "Selector": "", "Attribute": "`tabindex=0`", "Usage": "Sets column menu item tabindex" }, { "Selector": "`.k-expander .k-columnmenu-item`", "Attribute": "`aria-expanded=true/false`", "Usage": "Sets the expanded state of an expandable item" }, { "Selector": "", "Attribute": "`aria-controls`", "Usage": "Points to id attribute of the content whose visibility the expandable item controls." }, { "Selector": "`.k-expander .k-columnmenu-item-content`", "Attribute": "`id`", "Usage": "Unique and deterministic id linked to the aria-controls attribute of the corresponding expandable item." }, { "Selector": "`.k-column-list`", "Attribute": "`role=listbox`", "Usage": "Sets the listbox role of the list of columns wrapper." }, { "Selector": "", "Attribute": "`aria-multiselectable=true`", "Usage": "Specifies that the list is multiselectable." }, { "Selector": "`.k-column-list .k-column-list-item`", "Attribute": "`role=option`", "Usage": "Sets the option role of the list item." }, { "Selector": "", "Attribute": "`aria-checked=true/false`", "Usage": "Sets the checked state of list item." }, { "Selector": "", "Attribute": "`tabindex=0/-1`", "Usage": "Sets the tabindex depending on the item's focused state." }, { "Selector": "`.k-column-list-item .k-checkbox`", "Attribute": "`tabindex=-1`", "Usage": "Removes the default focus behavior of the checkbox." }, { "Selector": "", "Attribute": "`aria-hidden=true`", "Usage": "Hides the checkbox from the assistive technologies, as its accessibility is implemented by the item wrapper." } ] } }, { "h4": "Other ColumnMenu Popup Content" }, { "p": "All internal elements and components follow their respective specification rules, and additionally have suitable aria-label attributes, describing what menu they are part of." }, { "h3": "Keyboard Shortcuts" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Alt` + `Down Arrow`", "Behavior": "Opens the ColumnMenu Popup when focus is on the Grid header cell or on the main column menu button (depending on whether the Grid is navigable or not). Focus is trapped and wrapped within the Popup." }, { "Shortcut": "`Tab`", "Behavior": "Navigates to the next focusable element in the Popup. If current focus is on the last element, moves focus to the first focusable item in the Popup." }, { "Shortcut": "`Shift` + `Tab`", "Behavior": "Navigates to the previous focusable element in the Popup. If current focus is on the first element, moves focus to the last focusable item in the Popup." }, { "Shortcut": "`Enter`", "Behavior": "For column menu items, executes the currently focused item action. If item is expandable, expands or collapses the item." }, { "Shortcut": "`Escape`", "Behavior": "Closes the ColumnMenu Popup and returns focus to the header cell or the main button." }, { "Shortcut": "`Down Arrow` & `Up Arrow`", "Behavior": "Moves the focus to the next/previous item when focus is in the ColumnChooser list of options." }, { "Shortcut": "`Space`", "Behavior": "Toggles the checked state of the focused ColumnChooser option." } ] } }, { "blockquote": "All internal components follow their own keyboard navigation when focused." }, { "h3": "Testing" }, { "p": "The ColumnMenu has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers." }, { "h3": "Screen Readers" }, { "p": "The ColumnMenu has been tested with the following screen readers and browsers combinations:" }, { "table": { "headers": [ "Environment", "Tool" ], "rows": [ [ "Firefox", "NVDA" ], [ "Chrome", "JAWS" ], [ "Microsoft Edge", "JAWS" ] ] } }, { "h3": "Resources" }, { "ul": [ { "link": { "source": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role", "title": "MDN reference for the dialog role" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/", "title": "ARIA Authoring Practices: Listbox Pattern" } } ] } ]