@progress/wct-a11y-spec

[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI Diagram provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The Diagram 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." }, { "p": "The Diagram is an interactive Graphics Document (https://www.w3.org/TR/graphics-aria-1.0/#graphics-document). Users can navigate between shapes and connections using keyboard, and can move selected shapes with keyboard shortcuts." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-diagram`", "Attribute": "`role=graphics-document`", "Usage": "Indicates that the Diagram element is a Graphics Document." }, { "Selector": "", "Attribute": "`aria-roledescription`", "Usage": "User-set value that clarifies the type of Diagram to screen reader users." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "Announces the user-set `aria-label` of the Diagram." }, { "Selector": "", "Attribute": "`aria-activedescendant=.k-focus id`", "Usage": "Points to the currently focused shape or connection element. The focused element is the one receiving keyboard interaction." }, { "Selector": "`[aria-roledescription='Shape']`", "Attribute": "`role=graphics-symbol`", "Usage": "Specifies the role of the Diagram shape elements." }, { "Selector": "", "Attribute": "`aria-roledescription=Shape`", "Usage": "Describes the role of the Diagram shape elements." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "User-set value that describes the shape to screen reader users." }, { "Selector": "`[aria-roledescription='Connection']`", "Attribute": "`role=graphics-symbol`", "Usage": "Specifies the role of the Diagram connection elements." }, { "Selector": "", "Attribute": "`aria-roledescription=Connection`", "Usage": "Describes the role of the Diagram connection elements." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "User-set value that describes the connection to screen reader users." } ] } }, { "p": "Note: The Diagram uses the active descendant pattern for keyboard navigation. The container element maintains focus while `aria-activedescendant` points to the currently active shape or connection. The active element receives the `.k-focus` class for visual styling." }, { "h3": "Managing the Focus" }, { "p": "The Diagram comes with keyboard navigation enabled out of the box. The main interactive parts of the Diagram are reachable through the keyboard - the shapes and connections." }, { "p": "The Diagram maintains a single tab stop, meaning only the Diagram container is tabbable. Internal items (shapes and connections) are not individually tabbable. The container manages the active item via the `aria-activedescendant` attribute, ensuring a predictable and efficient keyboard experience." }, { "h3": "Focus Model" }, { "p": "The Diagram uses a roving tabindex pattern where:" }, { "ul": [ "Only the Diagram container receives `tabindex=\"0\"`", "Shapes and connections are not directly focusable", "The active element is indicated via `aria-activedescendant`" ] }, { "h3": "Traversal Order" }, { "p": "The focus order follows a deterministic pattern based on reading order and connections:" }, { "ol": [ "Build the list of visible shapes (S) and connections (E)", "Sort shapes by reading order: top-to-bottom by Y coordinate, then left-to-right by X coordinate", "For each shape in the sorted list: Add the shape to the focus order, then add all its outgoing connections (not already added), sorted by target shape order", "Append any remaining connections that haven't been added" ] }, { "h3": "Keyboard Navigation" }, { "p": "Once the Diagram element receives focus via the keyboard, the focus highlight will be displayed on the first shape in reading order. Navigation through shapes and connections is controlled using the arrow keys. Clicking on a shape or connection moves the focus to the clicked element." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Tab`", "Behavior": "Moves the focus to the next focusable element on the page." }, { "Shortcut": "`Shift + Tab`", "Behavior": "Moves the focus to the previous focusable element on the page." }, { "Shortcut": "`Right` arrow key", "Behavior": "Moves focus to the next item in the traversal order (next shape or connection)." }, { "Shortcut": "`Left` arrow key", "Behavior": "Moves focus to the previous item in the traversal order (previous shape or connection)." }, { "Shortcut": "`Home` key", "Behavior": "Moves focus to the first item in the traversal order." }, { "Shortcut": "`End` key", "Behavior": "Moves focus to the last item in the traversal order." }, { "Shortcut": "`Ctrl/Cmd + Up` arrow key", "Behavior": "Moves the selected shape upward by a small step. Only works when a shape is focused." }, { "Shortcut": "`Ctrl/Cmd + Down` arrow key", "Behavior": "Moves the selected shape downward by a small step. Only works when a shape is focused." }, { "Shortcut": "`Ctrl/Cmd + Left` arrow key", "Behavior": "Moves the selected shape to the left by a small step. Only works when a shape is focused." }, { "Shortcut": "`Ctrl/Cmd + Right` arrow key", "Behavior": "Moves the selected shape to the right by a small step. Only works when a shape is focused." }, { "Shortcut": "`Shift + Ctrl/Cmd + Up` arrow key", "Behavior": "Moves the selected shape upward by a large step. Only works when a shape is focused." }, { "Shortcut": "`Shift + Ctrl/Cmd + Down` arrow key", "Behavior": "Moves the selected shape downward by a large step. Only works when a shape is focused." }, { "Shortcut": "`Shift + Ctrl/Cmd + Left` arrow key", "Behavior": "Moves the selected shape to the left by a large step. Only works when a shape is focused." }, { "Shortcut": "`Shift + Ctrl/Cmd + Right` arrow key", "Behavior": "Moves the selected shape to the right by a large step. Only works when a shape is focused." } ] } }, { "h3": "Testing" }, { "p": "The Diagram 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 Diagram 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/TR/graphics-aria-1.0/", "title": "WAI-ARIA Graphics Module" } }, { "link": { "source": "https://a11y-style-guide.com/style-guide/section-media.html#kssref-media-svgs", "title": "Accessibility Style Guide: SVGs" } } ] } ]