[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI ColorGradient provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The ColorGradient 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." }, { "h4": "ColorGradient Wrapping Element" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-colorgradient`", "Attribute": "`role=textbox`", "Usage": "The focusable wrapper of the component should be considered a `textbox`. That signifies it has a value that could be submitted." }, { "Selector": "", "Attribute": "`aria-label` or `aria-labelledby`", "Usage": "The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component." }, { "Selector": "", "Attribute": "`aria-invalid=true`", "Usage": "Attribute is rendered only when the selected value in the component is not valid against the current validation rules." }, { "Selector": "", "Attribute": "`tabindex=0`", "Usage": "The element must be focusable." }, { "Selector": "`.k-colorgradient.k-disabled`", "Attribute": "`aria-disabled=true`", "Usage": "Attribute is rendered only when the ColorPalette is disabled." } ] } }, { "h4": "Drag handles" }, { "p": "All the `k-draghandle` elements implement the **Slider** specification." }, { "link": { "title": "Slider accessibility specification", "source": "{{slider_a11y_link}}" } }, { "p": "Apart from that the HSV draghandle must also cover the following additional requirements:" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-hsv-draghandle`", "Attribute": "`aria-orientation=undefined`", "Usage": "The implicit orientation for the `role=\"slider\"` must be removed." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "Must provide information about the purpose of the `slider` (for example: \"Color well with two-dimensional slider for selecting saturation and lightness\") and the currently selected color (for example: \"X: 142, Y: 93\")." }, { "Selector": "", "Attribute": "`aria-valuetext`", "Usage": "Must specify the values on both X and Y axis." } ] } }, { "h4": "NumericTextBoxes" }, { "p": "The Numeric inputs must implement the **NumericTextBox** specification." }, { "link": { "title": "NumericTextBox accessibility specification", "source": "{{numerictextbox_a11y_link}}" } }, { "p": "Here is one additional requirement for those numerics as their visible labels have only a single letter as text:" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-numerictextbox>.k-input-inner`", "Attribute": "`aria-label`", "Usage": "Must provide information about the numeric input purpose - the name of the chanel it is aimed at (`red chanel`, `green chanel`, `blue chanel`, or `alpha chanel`)." } ] } }, { "h3": "Managing the Focus" }, { "p": "The ColorGradient is a single-tab-stop component. Its inner navigation is activated by pressing the `Enter` key. In that case the focus remains trapped within the component elements. The user returns to page navigation by pressing `Esc`." }, { "h3": "Keyboard Shortcuts" }, { "h4": "When wrapper is focused" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Enter`", "Behavior": "Activates inner ColorGradient navigation." }, { "Shortcut": "`Tab`", "Behavior": "Navigates to the next focusable element on the page." }, { "Shortcut": "`Shift` + `Tab`", "Behavior": "Navigates to the previous focusable element on the page." } ] } }, { "h4": "When inner navigation is activated" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Esc`", "Behavior": "Moves focus back to wrapper element. Deactivates inner ColorGradient navigation." }, { "Shortcut": "`Tab`", "Behavior": "Navigates to the next focusable element in the ColorGradient. If current focus is on the last element, moves focus to the first focusable item in the component." }, { "Shortcut": "`Shift` + `Tab`", "Behavior": "Navigates to the previous focusable element in the ColorGradient. If current focus is on the first element, moves focus to the last focusable item in the component." }, { "Shortcut": "`Enter`", "Behavior": "For button items, ColorGradient executes the currently focused button action." } ] } }, { "h4": "Inner elements shortcuts" }, { "p": "The inner elements implement the shortcuts for their component type. There are `k-draghandle` (**Slider**) elements and `k-numerictextbox` (**NumericTextBox**) elements." }, { "h4": "k-hsv-draghandle" }, { "p": "Apart from the default implementation, there is a two-dimensional **Slider** element (`k-hsv-draghandle`) implementing the following arrow keys shortcuts:" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Arrow Up`", "Behavior": "Moves slider up by large step." }, { "Shortcut": "`Arrow Down`", "Behavior": "Moves slider down by large step." }, { "Shortcut": "`Arrow Left`", "Behavior": "Moves slider left by large step." }, { "Shortcut": "`Arrow Right`", "Behavior": "Moves slider right by large step." }, { "Shortcut": "`Shift` + `Arrow Up`", "Behavior": "Moves slider up by small step." }, { "Shortcut": "`Shift` + `Arrow Down`", "Behavior": "Moves slider down by small step." }, { "Shortcut": "`Shift` + `Arrow Left`", "Behavior": "Moves slider left by small step." }, { "Shortcut": "`Shift` + `Arrow Right`", "Behavior": "Moves slider right by small step." } ] } }, { "h3": "Testing" }, { "p": "The ColorGradient 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 ColorGradient has been tested with the following screen readers and browsers combinations:" }, { "table": { "headers": [ "Environment", "Tool" ], "rows": [ [ "Firefox", "NVDA" ], [ "Chrome", "JAWS" ], [ "Microsoft Edge", "JAWS" ] ] } } ]