Accessibility Compliance

How the KendoReact Team Approaches Accessibility

When implementing any KendoReact component, the KendoReact team follows the WAI-ARIA specification to ensure that the right foundation for the accessibility of each component is laid. From there, the team employs automated testing across the KendoReact library through the Compliance Sheriff tool, which the team has found to be the tool that works best for automated accessibility testing of the product. Each component also goes through manual testing, which includes testing the components with various screen readers and testing out other aspects of accessibility such as keyboard navigation.

Due to the complexity of some of the components in the KendoReact UI library, the team sometimes runs into scenarios not covered by the WAI-ARIA specification. In those cases, they tap into the web development accessibility know-how of the rest of the Progress organization, including feedback from accessibility-minded users, for expertise and feedback based on 10 years of creating web component libraries. This knowledge-sharing across internal teams and clients helps the team ensure that KendoReact can reach a certain level of accessibility compliance even with its most advanced components.

The following table lists the accessibility compliance levels and keyboard navigation support provided by the KendoReact UI components.

ComponentSection 508WCAG 2.0Keyboard Navigation
AutoCompleteYesAAAYes
ButtonYes1AAAYes1
ButtonGroupYesAAAYes1
CalendarYesAAAYes
Chat (Conversational UI)YesAAAYes
ColorPaletteNoNoYes
ColorPickerNoNoYes
ComboBoxYesAAYes
DateInputYesAAAYes
DatePickerYesAAAYes
DateRangePickerYesAAAYes
DateTimePickerYesAAAYes
DialogYes1AAAYes
DraggableYes1AAANo
DropDownButtonYesAAAYes
DropDownListYesAAYes
EditorYes2AAAYes2
GridYes2AAAYes2
InputYes1AAAYes1
MaskedTextBoxYesAAAYes1
MenuYesAAAYes
MultiSelectYesAAAYes
MultiViewCalendarYesAAAYes
NotificationYes1AANo
NumericTextBoxYesAAAYes
PanelBarYesAAAYes
PopupYes1AAANo
SliderYesAAAYes
SortableYes1AAAYes
SplitButtonYesAAAYes
SplitterYesAAAYes
SwitchYesAAAYes
TabStripYesAAAYes
TimePickerYesAAAYes
ToolbarYesAAAYes
TooltipYes1AAAYes1
TreeListYes2AAAYes2
TreeViewYesAAAYes
UploadYes1AAAYes
WindowYes1AAAYes

1 - The component extends a native HTML element and does not require additional accessibility functionality to provide this level of compliance.
2 - The component is built by using other components that are fully accessible. Combining their accessibility with the built-in browser keyboard navigation support allows the component to achieve this level of accessibility.

The KendoReact components are highly extensible and customizable. This means that, depending on the level of customization applied, you may be introducing rendering that is not accessible. Therefore, it is recommended that you test any modifications you make to the KendoReact components to ensure the components still meet the desired level of accessibility standards. Additionally, be mindful of components working with custom input (images, text, HTML content, and so on) and make sure your content is accessible, too.

Last updated on 12 September, 2019, related to v3.4.0 of the components, and using React v16.9.0.

In this article
 /