@progress/wct-a11y-spec/dist/design-system/ChartWizard.json

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

[
    {
        "h2": "Accessibility Support"
    },
    {
        "p": "Out of the box, the Telerik and Kendo UI ChartWizard provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
    },
    {
        "p": "The ChartWizard 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 ChartWizard is presented as a dialog to guide users through the Chart creation process."
    },
    {
        "p": "The ChartWizard element follows the **Window** specification."
    },
    {
        "link": {
            "title": "Window accessibility specification",
            "source": "{{window_a11y_link}}"
        }
    },
    {
        "h4": "ChartWizard Chart"
    },
    {
        "p": "The Chart in the ChartWizard component should implement the specification for the **Chart** component."
    },
    {
        "link": {
            "title": "Chart accessibility specification",
            "source": "{{chart_a11y_link}}"
        }
    },
    {
        "h4": "ChartWizard Splitter"
    },
    {
        "p": "The Splitter in the ChartWizard component should implement the specification for the **Splitter** component."
    },
    {
        "link": {
            "title": "Splitter accessibility specification",
            "source": "{{splitter_a11y_link}}"
        }
    },
    {
        "h4": "ChartWizard TabStrip"
    },
    {
        "p": "The TabStrip in the ChartWizard component should implement the specification for the **TabStrip** component."
    },
    {
        "link": {
            "title": "TabStrip accessibility specification",
            "source": "{{tabstrip_a11y_link}}"
        }
    },
    {
        "h4": "ChartWizard PanelBar"
    },
    {
        "p": "The PanelBar components in the ChartWizard component should implement the specification for the **PanelBar**. The elements within the **PanelBar** panes should adhere to the specifications defined for form field input elements."
    },
    {
        "link": {
            "title": "PanelBar accessibility specification",
            "source": "{{panelbar_a11y_link}}"
        }
    },
    {
        "h3": "Managing the Focus"
    },
    {
        "p": "The ChartWizard is a composite component. Its content features multiple tab stops."
    },
    {
        "h3": "Keyboard Shortcuts"
    },
    {
        "p": "Each separate component in the ChartWizard follows its own keyboard navigation."
    },
    {
        "table": {
            "headers": [
                "Shortcut",
                "Behavior"
            ],
            "rows": [
                {
                    "Shortcut": "`Tab`",
                    "Behavior": "Navigates the content in the ChartWizard - the Window, Export button, Chart, Splitter, TabStrip tabs and content, each ExpansionPanel, each Chart type button."
                },
                {
                    "Shortcut": "`Enter`",
                    "Behavior": "Triggers click event on the focused button."
                }
            ]
        }
    },
    {
        "h3": "Testing"
    },
    {
        "p": "The ChartWizard 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 ChartWizard has been tested with the following screen readers and browsers combinations:"
    },
    {
        "table": {
            "headers": [
                "Environment",
                "Tool"
            ],
            "rows": [
                [
                    "Firefox",
                    "NVDA"
                ],
                [
                    "Chrome",
                    "JAWS"
                ],
                [
                    "Microsoft Edge",
                    "JAWS"
                ]
            ]
        }
    }
]