UNPKG

@progress/wct-a11y-spec

Version:

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

164 lines 6.04 kB
[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI ContextMenu provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The ContextMenu 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." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-context-menu`", "Attribute": "`role=menu`", "Usage": "The context menu implements the `menu` role." } ] } }, { "p": "Apart from the above, the ContextMenu element should implement the specification for a vertical **Menu** component." }, { "link": { "title": "Menu accessibility specification", "source": "{{menu_a11y_link}}" } }, { "h3": "Managing the Focus" }, { "p": "When the context menu is opened, the focus will go to the first item of the context menu. Only one node will have tabindex in the menu.Interaction on a `menuitem` should focus it." }, { "h3": "Keyboard Shortcuts" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Shift`+`F10`", "Behavior": "When applied to a target, the command opens the ContextMenu." }, { "Shortcut": "`Up Arrow`", "Behavior": "Focuses the previous item." }, { "Shortcut": "`Down Arrow`", "Behavior": "Focuses the next item." }, { "Shortcut": "`Left Arrow`", "Behavior": "<ul><li>(For root items) opens the item and focuses the last child.</li> <li>(For child items) closes and focuses the parent.</li></ul>" }, { "Shortcut": "`Right Arrow`", "Behavior": "If the item has children, opens the item and focuses the first child. For child items without children, focuses and opens the next root item." }, { "Shortcut": "`Escape`", "Behavior": "Closes the ContextMenu and returns the focus to the target." }, { "Shortcut": "`Home`", "Behavior": "Focuses the first item." }, { "Shortcut": "`End`", "Behavior": "Focuses the last item." }, { "Shortcut": "`Enter`", "Behavior": "Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL." }, { "Shortcut": "`Space`", "Behavior": "Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL." }, { "Shortcut": "`Alphanumeric character`", "Behavior": "Focuses the next item with text starting with the character." } ] } }, { "h3": "Testing" }, { "p": "The ContextMenu 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 ContextMenu 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://www.w3.org/WAI/ARIA/apg/patterns/menu/", "title": "ARIA patterns Menu" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/", "title": "ARIA Authoring Practices: Menu Pattern" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/", "title": "ARIA Authoring Practices: Developing a Keyboard Interface" } } ] } ]