@progress/wct-a11y-spec
Version:
Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.
220 lines • 8.16 kB
JSON
[
{
"h2": "Accessibility Support"
},
{
"p": "Out of the box, the Telerik and Kendo UI DateRangePicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
},
{
"p": "The DateRangePicker 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": "Input elements"
},
{
"table": {
"headers": [
"Selector",
"Attribute",
"Usage"
],
"rows": [
{
"Selector": "`.k-input-inner`",
"Attribute": "`role=combobox`",
"Usage": "The input element should follow the `combobox` specification."
},
{
"Selector": "",
"Attribute": "`label for` or `aria-label` or `aria-labelledby`",
"Usage": "The input needs an accessible name to be assigned to it."
},
{
"Selector": "",
"Attribute": "`aria-required=true`",
"Usage": "The attribute is rendered only when the DateRangePicker is in a `form` HTML element and announces the required state of the component."
},
{
"Selector": "",
"Attribute": "`aria-describedby=.k-form-hint id/.k-form-error id`",
"Usage": "Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid."
},
{
"Selector": "",
"Attribute": "`aria-haspopup=grid`",
"Usage": "Indicates the component has a Calendar Popup that implements `role=\"grid\"`."
},
{
"Selector": "",
"Attribute": "`aria-expanded=true/false`",
"Usage": "Announces whether the Popup is visible or not."
},
{
"Selector": "",
"Attribute": "`aria-controls=.k-calendar-container id`",
"Usage": "Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`."
},
{
"Selector": "`.k-input-inner.k-focus`",
"Attribute": "`aria-activedescendant=.k-calendar-td.k-focus id`",
"Usage": "Points to the focused item (date/month/year) in the Calendar Popup. Should only be present when the Popup is open."
},
{
"Selector": "",
"Attribute": "`readonly=readonly` or `aria-readonly=true`",
"Usage": "Attribute is rendered only when the DateRangePicker is readonly."
},
{
"Selector": "",
"Attribute": "`tabindex=0`",
"Usage": "The element should be focusable."
},
{
"Selector": "`.k-invalid .k-input-inner,.ng-invalid .k-input-inner`",
"Attribute": "`aria-invalid=true`",
"Usage": "Attribute is rendered only when the combobox is in form and announces the valid state of the component."
},
{
"Selector": "`.k-disabled .k-input-inner`",
"Attribute": "`disabled=disabled` or `aria-disabled=true`",
"Usage": "Attribute is rendered only when the DateRangePicker is disabled."
}
]
}
},
{
"h4": "Calendars Popup"
},
{
"p": "The Calendars in the Popup element of the component should implement the specification for the **MultiViewCalendar** component."
},
{
"link": {
"title": "Calendar accessibility specification",
"source": "{{calendar_a11y_link}}"
}
},
{
"h3": "Managing the Focus"
},
{
"p": "Focus goes through the two date inputs. The popup becomes the active element when it is opened, but it is not the focused element at any point."
},
{
"h3": "Keyboard Shortcuts"
},
{
"h4": "Actions applied to the DateInput:"
},
{
"p": "The DateRangePicker implements the keyboard shortcuts for the DateInput component:"
},
{
"link": {
"title": "DateInput specification",
"source": "{{dateinput_kb_link}}"
}
},
{
"p": "Apart from that, it also features the following shortcuts related to ist Popup:"
},
{
"table": {
"headers": [
"Shortcut",
"Behavior"
],
"rows": [
{
"Shortcut": "`Esc`",
"Behavior": "Closes the popup"
},
{
"Shortcut": "`Alt/Opt(Mac) + Down`",
"Behavior": "Opens the popup"
},
{
"Shortcut": "`Alt/Opt(Mac) + Up`",
"Behavior": "Closes the popup"
}
]
}
},
{
"h4": "Actions applied to the Calendar:"
},
{
"p": "Ones the popup is open, navigation is handled through the **MultiViewCalendar** component:"
},
{
"link": {
"title": "MultiViewCalendar specification",
"source": "{{multiviewcalendar_kb_link}}"
}
},
{
"h3": "Testing"
},
{
"p": "The DateRangePicker 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 DateRangePicker 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/#combobox",
"title": "WAI ARIA specification for combobox"
}
},
{
"link": {
"source": "https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html",
"title": "ARIA practices Date Picker Dialog Example"
}
},
{
"link": {
"source": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/",
"title": "ARIA Authoring Practices: Date Picker Dialog"
}
}
]
}
]