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.

Voluntary Product Accessibility Template (VPAT)

A Voluntary Product Accessibility Template (VPAT®) is a document that explains how information and communication technology (ICT) products such as software, hardware, electronic content, and support documentation meet (conform to) the Revised 508 Standards for IT accessibility.

You can review and download the latest version of the KendoReact VPAT document here.

Accessibility Support per Component

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

The described level of compliance in the table below is achievable with the Ocean Blue A11Y Sass Swatch.

Component508WCAG 2.2Accessibility ExampleAccessibility Documentation
ActionSheetYesAADemoDocumentation
AppbarYesAAn/aDocumentation
ArcGaugeNon/an/an/a
AutoCompleteYesAADemoDocumentation
AvatarYesAAn/aDocumentation
BadgeNon/an/an/a
BarcodeNon/an/an/a
BottomNavigationYesAAn/aDocumentation
BreadcrumbYesAAn/aDocumentation
ButtonYesAAn/aDocumentation
ButtonGroupYesAAn/aDocumentation
CalendarYesAADemoDocumentation
CardNon/an/an/a
ChartNon/an/an/a
CheckBoxYesAADemoDocumentation
ChipYesAAn/aDocumentation
ChiplistYesAADemoDocumentation
ChunkProgressBarYesAAn/aDocumentation
CircularGaugeNon/an/an/a
ColorGradientYesAAn/aDocumentation
ColorPaletteYesAADemoDocumentation
ColorPickerYesAADemoDocumentation
ComboBoxYesAADemoDocumentation
Conversational UIYesAADemoDocumentation
DateInputYesAADemoDocumentation
DatePickerYesAADemoDocumentation
DateRangePickerYesAADemoDocumentation
DateTimePickerYesAADemoDocumentation
DialogYesAADemoDocumentation
DrawerYesAAn/aDocumentation
DropDownButtonYesAADemoDocumentation
DropDownListYesAADemoDocumentation
DropDownTreeYesAADemoDocumentation
EditorYesAAn/aDocumentation
ExpansionPanelYesAADemoDocumentation
FilterYesAAn/aDocumentation
FlatColorPickerYesAAn/aDocumentation
FloatingActionButton YesAADemoDocumentation
FloatingLabelNon/an/an/a
FormNon/an/an/a
GanttYesAADemoDocumentation
GridYesAADemoDocumentation
GridLayoutNon/an/an/a
InputNon/an/an/a
LabelNon/an/an/a
LinearGaugeNon/an/an/a
ListBoxYesAAn/aDocumentation
ListviewYesAAAn/aDocumentation
LoaderNon/an/an/a
MapNon/an/an/a
MaskedTextBoxYesAAn/aDocumentation
MenuYesAADemoDocumentation
MultiColumnComboBoxYesAADemoDocumentation
MultiSelectYesAADemoDocumentation
MultiSelectTreeYesAADemoDocumentation
MultiViewCalendarYesAADemoDocumentation
NotificationYesAAn/aDocumentation
NumericTextBoxYesAADemoDocumentation
Pager YesAAn/aDocumentation
PanelBarYesAADemoDocumentation
PDFViewerYesAAn/aDocumentation
PivotGridYesAAn/aDocumentation
PopoverYesAAn/aDocumentation
PopupYesAAn/an/a
ProgressBarYesAAn/aDocumentation
QR CodeNon/an/an/a
RadialGaugeNon/an/an/a
RadioButtonYesAAn/an/a
RadioGroupYesAADemoDocumentation
RangeSliderYesAADemoDocumentation
RatingYesAADemoDocumentation
SchedulerYesAADemoDocumentation
ScrollViewNon/an/an/a
SignatureYesAAn/aDocumentation
SkeletonYesAAAn/aDocumentation
SliderYesAADemoDocumentation
SortableYesAADemoDocumentation
SplitButtonYesAADemoDocumentation
SplitterYesAADemoDocumentation
StackLayoutNon/an/an/a
StepperYesAADemoDocumentation
StockchartNon/an/an/a
SwitchYesAADemoDocumentation
TabstripYesAADemoDocumentation
TaskBoardYesAAn/an/a
TextAreaYesAAAn/aDocumentation
TextBoxYesAAn/aDocumentation
TileLayoutYesAAAn/aDocumentation
TimePickerYesAADemoDocumentation
ToolbarYesAAn/aDocumentation
TooltipYesAAn/aDocumentation
TreelistNon/an/an/a
TreeViewYesAADemoDocumentation
UploadYesAAADemoDocumentation
WindowYesAADemoDocumentation

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 13 March, 2023, related to v5.11.0 of the components, and using React v18.0.0.