Accessibility Support
Out of the box, the Telerik and Kendo UI TaskBoard provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The TaskBoard is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, provides options for managing its focus and is tested against the most popular screen readers.
WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
The TaskBoard component is a composite component that contains:
ToolBar- on top of the componentColumns- it represents a list of tasks
Each Column contains:
Buttons- action buttons present on the top of each columnTasks- a collection of tasks (cards/list items)
| Selector | Attribute | Usage |
|---|---|---|
.k-taskboard | role=application | The TaskBoard has role=application as its inner navigation requires the use of arrows. |
.k-taskboard-column | role=list | The TaskBoard Column is a collection of list items. |
tabindex=0 | The TaskBoard Column must be focusable. | |
aria-labelledby=.k-taskboard-column-header id | The TaskBoard Column must be labelled by its header. | |
.k-taskboard-column-action-button | role=button or nodeName=button | The TaskBoard Column actions are buttons. |
aria-label or title | Each action must have an accessible name as they are represented by icons and no text is available in their contents. | |
.k-taskboard-card | role=listitem | The TaskBoard Tasks (cards) are list items. |
tabindex=0 | The TaskBoard Card must be focusable. | |
.k-taskboard-card-menu-button | role=button or nodeName=button | The TaskBoard card menu element must be a button. |
aria-label or title | The menu button must have an accessible name as it is represented by an icon and no text is available in its contents. | |
.k-taskboard-pane-header-actions>.k-button | role=button or nodeName=button | The TaskBoard edit form close element must be a button. |
aria-label or title | The edit form close button must have an accessible name as it is represented by an icon and no text is available in its contents. | |
.k-taskboard-edit-pane .k-form | role=form | The edit Form needs the appropriate role to be assigned to it. |
aria-labelledby=.k-taskboard-pane-header-text id | The TaskBoard edit form must be labeled by the header text of the pane it is located at. |
Managing the Focus
The TaskBoard is a composite component. Its content features multiple tab stops. For faster interaction, its elements could also be navigated using the arrow keys.
Keyboard Shortcuts
| Shortcut | Behavior |
|---|---|
Tab | Navigates the items in the TaskBoard - the ToolBar, each Column, each Button and each Card are dedicated tab stops. |
Left Arrow | Focuses the previous column or a card in the previous column. |
Right Arrow | Focuses the next column or a card in the next column. |
Up Arrow | Focuses the previous card. |
Down Arrow | Focuses the next card. |
Enter | Selects the focused card. |
Delete | Deletes the focused card. |
Ctrl + E | Puts the focused card or column in edit mode. |
Ctrl + A | Creates a new card or column. |
Testing
The TaskBoard has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The TaskBoard has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
