@progress/wct-a11y-spec
Version:
Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.
201 lines • 7.89 kB
JSON
[
{
"h2": "Accessibility Support"
},
{
"p": "Out of the box, the Telerik and Kendo UI TabStrip provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
},
{
"p": "The TabStrip 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-tabstrip-items`",
"Attribute": "`role=tablist`",
"Usage": "Indicates the tablist role for the ul element of the TabStrip."
},
{
"Selector": "`.k-tabstrip.k-tabstrip-left .k-tabstrip-items,.k-tabstrip.k-tabstrip-right .k-tabstrip-items`",
"Attribute": "`aria-orientation=vertical`",
"Usage": "Indicates the orientation of the tablist container element. The attribute is rendered only when the orientation of the component is vertical as the `tablist` role comes with default horizontal orientation."
},
{
"Selector": "`.k-tabstrip-item`",
"Attribute": "`role=tab`",
"Usage": "The tab `li` element."
},
{
"Selector": "`.k-tabstrip .k-tabstrip-item.k-active`",
"Attribute": "`aria-selected=true`",
"Usage": "Announces the selected state of the tab."
},
{
"Selector": "",
"Attribute": "`aria-controls=.k-tabstrip-content id`",
"Usage": "Announces the relation between the panel and active tab."
},
{
"Selector": "`.k-tabstrip-content`",
"Attribute": "`role=tabpanel`",
"Usage": "The content `div` of the tab."
},
{
"Selector": "",
"Attribute": "`aria-hidden=true`",
"Usage": "Only if the component implements a feature to control whether the content should be persisted."
},
{
"Selector": "",
"Attribute": "`aria-labelledby=.k-tabstrip-item id`",
"Usage": "Refers to the tab element that controls the panel."
},
{
"Selector": "`.k-tabstrip .k-button`",
"Attribute": "`aria-hidden=true`",
"Usage": "Introduce \"aria-hidden\" attribute for the scrollable buttons. The buttons are not included in the tabsequence. Navigating through arrow keys would "
}
]
}
},
{
"h3": "Managing the Focus"
},
{
"p": "Focusable elements in the TabStrip components are:"
},
{
"ul": [
"Selected Tab",
"Tab Content/Panel"
]
},
{
"p": "The tab items focusing mechanism is roving tabindex. Only the active tab should have `tabindex=\"0\"`, the remaining tabs should have `tabindex=\"-1\"`."
},
{
"h3": "Keyboard Shortcuts"
},
{
"p": "When end is reached, the first tab is focused. When start is reached, the last tab is focused."
},
{
"table": {
"headers": [
"Shortcut",
"Behavior"
],
"rows": [
{
"Shortcut": "`Up Arrow` & `Down Arrow`",
"Behavior": "Vertical Orientation shortcuts. Activates the previous/next tab, or current tab if there is no active tab."
},
{
"Shortcut": "`Left Arrow` & `Right Arrow`",
"Behavior": "Horizontal Orientation shortcuts. Activates the previous/next tab, or current tab if there is no active tab."
},
{
"Shortcut": "`Tab`",
"Behavior": "Focuses the content for the active navigation item."
},
{
"Shortcut": "`Shift` + `Tab`",
"Behavior": "Navigates to the previous focusable element on the navigation."
},
{
"Shortcut": "`Enter`",
"Behavior": "Activates the tab item if automatic selection is not enabled."
},
{
"Shortcut": "`Home`",
"Behavior": "Focuses the first item and activates it, if automatic selection is enabled."
},
{
"Shortcut": "`End`",
"Behavior": "Focuses the last item and activates it, if automatic selection is enabled."
},
{
"Shortcut": "`Delete` or `Backspace`",
"Behavior": "Removes the focused tab from the tab list."
}
]
}
},
{
"h3": "Testing"
},
{
"p": "The TabStrip 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 TabStrip 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/wai-aria-1.2/#tablist",
"title": "WAI-ARIA specification for tablist"
}
},
{
"link": {
"source": "https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic.html",
"title": "WAI-ARIA practices: TabList example"
}
},
{
"link": {
"source": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/",
"title": "ARIA Authoring Practices: Tabs with Automatic Activation"
}
},
{
"link": {
"source": "https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#decidingwhentomakeselectionautomaticallyfollowfocus",
"title": "ARIA Authoring Practices: Selection Follows Focus"
}
}
]
}
]