New to Telerik UI for ASP.NET MVCStart a free 30-day trial

TaskBoard Accessibility

Out of the box, the Telerik UI for ASP.NET MVC 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 AA 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 component
  • Columns - it represents a list of tasks

Each Column contains:

  • Buttons - action buttons present on the top of each column
  • Tasks - a collection of tasks (cards/list items)
SelectorAttributeUsage
.k-taskboardrole=applicationThe TaskBoard has role=application as its inner navigation requires the use of arrows.
.k-taskboard-columnrole=listThe TaskBoard Column is a collection of list items.
tabindex=0The TaskBoard Column must be focusable.
aria-labelledby=.k-taskboard-column-header idThe TaskBoard Column must be labelled by its header.
.k-taskboard-column-action-buttonrole=button or nodeName=buttonThe TaskBoard Column actions are buttons.
aria-label or titleEach action must have an accessible name as they are represented by icons and no text is available in their contents.
.k-taskboard-cardrole=listitemThe TaskBoard Tasks (cards) are list items.
tabindex=0The TaskBoard Card must be focusable.
.k-taskboard-card-menu-buttonrole=button or nodeName=buttonThe TaskBoard card menu element must be a button.
aria-label or titleThe 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-buttonrole=button or nodeName=buttonThe TaskBoard edit form close element must be a button.
aria-label or titleThe 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-formrole=formThe edit Form needs the appropriate role to be assigned to it.
aria-labelledby=.k-taskboard-pane-header-text idThe TaskBoard edit form must be labeled by the header text of the pane it is located at.

Resources

WAI-ARIA spec: Role List

Section 508

The TaskBoard is fully compliant with the Section 508 requirements.

Testing

The TaskBoard has been extensively tested automatically with axe-core and manually with the most popular screen readers.

To report any accessibility issues, contact the team through the Telerik Support System.

Screen Readers

The TaskBoard has been tested with the following screen readers and browsers combinations:

EnvironmentTool
FirefoxNVDA
ChromeJAWS
Microsoft EdgeJAWS

Test Example

To test the TaskBoard component, refer to the TaskBoard Accessibility Demo.

Keyboard Navigation

For details on how the TaskBoard keyboard navigation works, refer to the TaskBoard Keyboard Navigation article.

See Also