[
    {
        "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"
                }
            }
        ]
    }
]