New to Kendo UI for Vue? Start a free 30-day trial

Accessibility Support

How the Kendo UI for Vue Team Approaches Accessibility

When implementing any Kendo UI for Vue component, the Kendo UI for Vue 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 Kendo UI for Vue 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 Kendo UI for Vue 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 Kendo UI for Vue 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 Kendo UI for Vue VPAT document here.

Accessibility Support per Component

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

Component	Section 508	WCAG 2.1	Accessibility Example	Accessibility 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`
`BottomNavigation`	`Yes`	`AA`	`n/a`	Documentation
`Breadcrumb`	`Yes`	`AAA`	`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`	`n/a`	`n/a`
`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
`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
`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`
`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`
`MaskedTextBox`	`Yes`	`AA`	`n/a`	Documentation
`Menu`	`Yes`	`AA`	Demo	Documentation
`MultiSelect`	`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
`Popup`	`Yes`	`AA`	`n/a`	`n/a`
`ProgressBar`	`Yes`	`AA`	`n/a`	Documentation
`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
`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
`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`	`n/a`	`n/a`
`Switch`	`Yes`	`AA`	Demo	Documentation
`Tabstrip`	`Yes`	`AA`	Demo	Documentation
`TextArea`	`Yes`	`AAA`	`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 UI for Vue Native 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 Kendo UI for Vue 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 14 March, 2023. Related to v3.8.5 of the Native Vue components. Using Vue v3.2.47.

Accessibility Support

Voluntary Product Accessibility Template (VPAT)

Accessibility Support per Component

Suggested Links