New to KendoReact? Start a free 30-day trial

Accessibility Compliance

The accessibility support available for the KendoReact components is based on a set of approaches for adhering to and implementing the established standards and technical specifications ensuring the seamless experience of users with disabilities.

Accessibility Approaches in KendoReact

The following list summarizes how the KendoReact team approaches accessibility when developing the component library:

When implementing a KendoReact component, the team follows the WAI-ARIA specification to ensure that the right foundation for the accessibility of the component is laid.
From there, to guarantee accessible and semantically correct rendering, the team employs both multiple automated tests and unit tests across the KendoReact library.
The team also ensures the proper usage of WAI-ARIA attributes and localized messages for labels, titles, and other elements.
Additionally, each component also goes through manual testing, which covers its usage with various screen readers and other accessibility aspects such as keyboard navigation.

The team sometimes runs into scenarios not covered by the WAI-ARIA specifications. In those cases, the team taps into the web development accessibility know-how of the rest of the Progress organization. This includes feedback from accessibility-minded users and the team's expertise based on 10+ years of creating web component libraries. The knowledge-sharing across internal teams and clients helps ensure that KendoReact can reach a certain level of accessibility compliance even with its most advanced components.

Due to the rich feature set of the library and complexity of some components, the specific combination of configuration options may lead to inaccessible component rendering. Perform thorough testing on any modifications applied to the KendoReact components to ensure that they continue to comply with the desired level of accessibility standards.

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.

Component	508	WCAG 2.2	Accessibility Example	Accessibility Documentation
`ActionSheet`	`Yes`	`AA`	Demo	Documentation
`Appbar`	`Yes`	`AA`	`n/a`	Documentation
`ArcGauge`	`No`	`n/a`	`n/a`	`n/a`
`AutoComplete`	`Yes`	`AA`	Demo	Documentation
`Avatar`	`Yes`	`AA`	`n/a`	Documentation
`Badge`	`No`	`n/a`	`n/a`	`n/a`
`Barcode`	`No`	`n/a`	`n/a`	`n/a`
`BottomNavigation`	`Yes`	`AA`	`n/a`	Documentation
`Breadcrumb`	`Yes`	`AA`	`n/a`	Documentation
`Button`	`Yes`	`AA`	`n/a`	Documentation
`ButtonGroup`	`Yes`	`AA`	`n/a`	Documentation
`Calendar`	`Yes`	`AA`	Demo	Documentation
`Card`	`No`	`n/a`	`n/a`	`n/a`
`Chart`	`No`	`n/a`	Demo	Documentation
`CheckBox`	`Yes`	`AA`	Demo	Documentation
`Chip`	`Yes`	`AA`	`n/a`	Documentation
`Chiplist`	`Yes`	`AA`	Demo	Documentation
`ChunkProgressBar`	`Yes`	`AA`	`n/a`	Documentation
`CircularGauge`	`No`	`n/a`	`n/a`	`n/a`
`ColorGradient`	`Yes`	`AA`	`n/a`	Documentation
`ColorPalette`	`Yes`	`AA`	Demo	Documentation
`ColorPicker`	`Yes`	`AA`	Demo	Documentation
`ComboBox`	`Yes`	`AA`	Demo	Documentation
`Conversational UI`	`Yes`	`AA`	Demo	Documentation
`DateInput`	`Yes`	`AA`	Demo	Documentation
`DatePicker`	`Yes`	`AA`	Demo	Documentation
`DateRangePicker`	`Yes`	`AA`	Demo	Documentation
`DateTimePicker`	`Yes`	`AA`	Demo	Documentation
`Dialog`	`Yes`	`AA`	Demo	Documentation
`Drawer`	`Yes`	`AA`	`n/a`	Documentation
`DropDownButton`	`Yes`	`AA`	Demo	Documentation
`DropDownList`	`Yes`	`AA`	Demo	Documentation
`DropDownTree`	`Yes`	`AA`	Demo	Documentation
`Editor`	`Yes`	`AA`	`n/a`	Documentation
`ExpansionPanel`	`Yes`	`AA`	Demo	Documentation
`Filter`	`Yes`	`AA`	`n/a`	Documentation
`FlatColorPicker`	`Yes`	`AA`	`n/a`	Documentation
`FloatingActionButton`	`Yes`	`AA`	Demo	Documentation
`FloatingLabel`	`No`	`n/a`	`n/a`	`n/a`
`Form`	`No`	`n/a`	`n/a`	`n/a`
`Gantt`	`Yes`	`AA`	Demo	Documentation
`Grid`	`Yes`	`AA`	Demo	Documentation
`GridLayout`	`No`	`n/a`	`n/a`	`n/a`
`Input`	`No`	`n/a`	`n/a`	`n/a`
`Label`	`No`	`n/a`	`n/a`	`n/a`
`LinearGauge`	`No`	`n/a`	`n/a`	`n/a`
`ListBox`	`Yes`	`AA`	`n/a`	Documentation
`Listview`	`Yes`	`AAA`	`n/a`	Documentation
`Loader`	`No`	`n/a`	`n/a`	`n/a`
`Map`	`No`	`n/a`	`n/a`	`n/a`
`MaskedTextBox`	`Yes`	`AA`	`n/a`	Documentation
`Menu`	`Yes`	`AA`	Demo	Documentation
`MultiColumnComboBox`	`Yes`	`AA`	Demo	Documentation
`MultiSelect`	`Yes`	`AA`	Demo	Documentation
`MultiSelectTree`	`Yes`	`AA`	Demo	Documentation
`MultiViewCalendar`	`Yes`	`AA`	Demo	Documentation
`Notification`	`Yes`	`AA`	`n/a`	Documentation
`NumericTextBox`	`Yes`	`AA`	Demo	Documentation
`Pager`	`Yes`	`AA`	`n/a`	Documentation
`PanelBar`	`Yes`	`AA`	Demo	Documentation
`PDFViewer`	`Yes`	`AA`	`n/a`	Documentation
`PivotGrid`	`Yes`	`AA`	`n/a`	Documentation
`Popover`	`Yes`	`AA`	`n/a`	Documentation
`Popup`	`Yes`	`AA`	`n/a`	`n/a`
`ProgressBar`	`Yes`	`AA`	`n/a`	Documentation
`QR Code`	`No`	`n/a`	`n/a`	`n/a`
`RadialGauge`	`No`	`n/a`	`n/a`	`n/a`
`RadioButton`	`Yes`	`AA`	`n/a`	`n/a`
`RadioGroup`	`Yes`	`AA`	Demo	Documentation
`RangeSlider`	`Yes`	`AA`	Demo	Documentation
`Rating`	`Yes`	`AA`	Demo	Documentation
`Scheduler`	`Yes`	`AA`	Demo	Documentation
`ScrollView`	`No`	`n/a`	`n/a`	`n/a`
`Signature`	`Yes`	`AA`	`n/a`	Documentation
`Skeleton`	`Yes`	`AAA`	`n/a`	Documentation
`Slider`	`Yes`	`AA`	Demo	Documentation
`Sortable`	`Yes`	`AA`	Demo	Documentation
`SplitButton`	`Yes`	`AA`	Demo	Documentation
`Splitter`	`Yes`	`AA`	Demo	Documentation
`StackLayout`	`No`	`n/a`	`n/a`	`n/a`
`Stepper`	`Yes`	`AA`	Demo	Documentation
`Stockchart`	`No`	`n/a`	Demo	Documentation
`Sankey`	`Yes`	`AA`	`n/a`	Documentation
`Switch`	`Yes`	`AA`	Demo	Documentation
`Tabstrip`	`Yes`	`AA`	Demo	Documentation
`TaskBoard`	`Yes`	`AA`	`n/a`	`n/a`
`TextArea`	`Yes`	`AAA`	`n/a`	Documentation
`TextBox`	`Yes`	`AA`	`n/a`	Documentation
`TileLayout`	`Yes`	`AAA`	`n/a`	Documentation
`TimePicker`	`Yes`	`AA`	Demo	Documentation
`Toolbar`	`Yes`	`AA`	`n/a`	Documentation
`Tooltip`	`Yes`	`AA`	`n/a`	Documentation
`Treelist`	`No`	`n/a`	`n/a`	`n/a`
`TreeView`	`Yes`	`AA`	Demo	Documentation
`Upload`	`Yes`	`AAA`	Demo	Documentation
`Window`	`Yes`	`AA`	Demo	Documentation

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 21 May, 2024, related to v8.0.0 of the components, and using React v18.0.0.

Accessibility Compliance

Accessibility Approaches in KendoReact

Voluntary Product Accessibility Template (VPAT)

Accessibility Support per Component

Suggested Links