@progress/wct-a11y-spec

[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI InfiniteCalendar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The InfiniteCalendar 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": "Calendar Table element" }, { "p": "The wrapper of the infinite calender should follow the requirements for the `grid` role (https://www.w3.org/TR/wai-aria-1.2/#grid)." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-calendar-infinite`", "Attribute": "`role=grid`", "Usage": "Specifies the role of the Calendar wrapper element." }, { "Selector": "", "Attribute": "`aria-label` or `aria-labelledby`", "Usage": "Pointing to the current view `k-calendar-title` element (e.g. `March 2022` or `2020-2029`)." }, { "Selector": "", "Attribute": "`aria-activedescendant=.k-calendar-td.k-focus id`", "Usage": "Pointing to the currently active (focused) date/month/year/decade cell in the tables." }, { "Selector": "", "Attribute": "`tabindex=0`", "Usage": "Makes the grid focusable." }, { "Selector": "`.k-calendar-infinite .k-calendar-table`", "Attribute": "`role=none`", "Usage": "All `k-calendar-table` elements must have their role set to `none`. That is because their content must be made belonging to a single `grid` component." }, { "Selector": "`.k-calendar-infinite .k-calendar-thead`", "Attribute": "`role=rowgroup`", "Usage": "The `k-calendar-thead` must explicitly have its role set to `rowgroup` as its semantics have been removed while setting its `<table>` role to `none`." }, { "Selector": "`.k-calendar-infinite .k-calendar-tbody`", "Attribute": "`role=rowgroup`", "Usage": "The `k-calendar-tbody` elements must explicitly have their roles set to `rowgroup` as their semantics have been removed while setting their `<table>` elements role to `none`." }, { "Selector": "`.k-calendar-infinite .k-calendar-tr`", "Attribute": "`role=row`", "Usage": "The `k-calendar-tr` elements must explicitly have their roles set to `row` as their semantics have been removed while setting their `<table>` elements role to `none`." }, { "Selector": "`.k-calendar-infinite .k-calendar-th`", "Attribute": "`role=columnheader`", "Usage": "The `k-calendar-th` elements must explicitly have their roles set to `columnheader` as their semantics have been removed while setting their `<table>` elements role to `none`." }, { "Selector": "", "Attribute": "`scope=col`", "Usage": "Specifies that the header is applied to a column." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "Specifies the full name of the day of the week (the column header)." }, { "Selector": "`.k-calendar-caption`", "Attribute": "`role=columnheader`", "Usage": "The `k-calendar-caption` elements must explicitly have their roles set to `columnheader` as their semantics have been removed while setting their `<table>` elements role to `none`." }, { "Selector": "", "Attribute": "`scope=col`", "Usage": "Specifies that the header is applied to a column." }, { "Selector": "`.k-calendar-infinite .k-calendar-td`", "Attribute": "`role=gridcell`", "Usage": "The cells must explicitly have their roles set to `gridcell` as their semantics have been removed while setting their `<table>` elements role to `none`." }, { "Selector": "", "Attribute": "`aria-label ` or `title`", "Usage": "Applicable in year view - for better context contains the full name of the month. May also be applied in month view to specify the full text for a date." }, { "Selector": "`.k-calendar-td.k-selected`", "Attribute": "`aria-selected`", "Usage": "Specifies whether the date is selected or not." }, { "Selector": "`.k-calendar-td.k-disabled`", "Attribute": "`aria-disabled`", "Usage": "When a date is not available for selection, its gridcell element must have the attribute set to `true`." } ] } }, { "h4": "Button and Link elements" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-prev-view,.k-next-view`", "Attribute": "`tabindex=-1`", "Usage": "The buttons must not be focusable." }, { "Selector": "`.k-calendar-title`", "Attribute": "`tabindex=-1`", "Usage": "The button must not be focusable." }, { "Selector": "`.k-nav-today`", "Attribute": "`tabindex=-1`", "Usage": "The link must not be focusable." } ] } }, { "h3": "Managing the Focus" }, { "p": "The component is a single tab stop with focusable wrapper (the element with `role=\"grid\"`). It uses `aria-activedescendant` to keep the info for the currently focused date cell." }, { "h3": "Keyboard Shortcuts" }, { "h4": "Single and multiple selection mode" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Down Arrow`", "Behavior": "Moves focus to down cell, or navigates the view if currently focused date is in the last row of the current view period." }, { "Shortcut": "`Up Arrow`", "Behavior": "Moves focus to upper cell, or navigates the view if currently focused date is at the top row of the current view period." }, { "Shortcut": "`Left Arrow`", "Behavior": "Moves focus to previous date/month/year/decade." }, { "Shortcut": "`Right Arrow`", "Behavior": "Moves focus to next date/month/year/decade." }, { "Shortcut": "`Enter`", "Behavior": "Selects the focused date." }, { "Shortcut": "`Ctrl/Cmd(Mac) + Up Arrow`", "Behavior": "Navigates to the upper view (e.g., from current month days, to the year)." }, { "Shortcut": "`Ctrl/Cmd(Mac) + Down Arrow`", "Behavior": "Navigates to the lower view (e.g., from the months in the year to the days of the month)." }, { "Shortcut": "`Home`", "Behavior": "Focuses the first day of the month." }, { "Shortcut": "`End`", "Behavior": "Focuses the last day of the month." }, { "Shortcut": "`PageUp`", "Behavior": "Focuses the same date in the previous month." }, { "Shortcut": "`PageDown`", "Behavior": "Focuses the same date in the next month." }, { "Shortcut": "`t`", "Behavior": "Navigates to today's month view and focuses the current date." } ] } }, { "h4": "Multiple Selection mode only" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Ctrl/Cmd(Mac)` + `Enter`", "Behavior": "Adds the highlighted day to the current selection. If that day was already selected it is removed from the selection." }, { "Shortcut": "`Shift` + `Left Arrow`", "Behavior": "Adds the previous date to the selected items." }, { "Shortcut": "`Shift` + `Right Arrow`", "Behavior": "Adds the next date to the selected items." }, { "Shortcut": "`Shift` + `Up Arrow`", "Behavior": "Extends selection up one row in month view." }, { "Shortcut": "`Shift` + `Down Arrow`", "Behavior": "Extends selection down one row in month view." }, { "Shortcut": "`Shift` + `Enter`", "Behavior": "Performs range selection, selects all dates between the last selected one (with Enter or mouse click) and the one being currently focused." } ] } }, { "h3": "Testing" }, { "p": "The InfiniteCalendar 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 InfiniteCalendar 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/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" } } ] } ]