WCAG 2.2 Compliance
The Web Content Accessibility Guidelines (WCAG) which are set by the World Wide Web Consortium (W3C) define recommendations for making web content accessible to people with physical and cognitive disabilities. WCAG defines accessibility principles with their respective success criteria. Depending on the implemented success criteria by a web application, the WCAG provide the A, AA, and AAA levels of accessibility conformance.
The Kendo UI components also conform to the technical standards set out in Section 508 (Latest Amendment) of the Rehabilitation Act of 1973. They represent the law that requires all Federal Agencies to make their electronic and information technology accessible to people with disabilities. For detailed information on the accessibility features according to the Section 508 Web content standards Kendo UI delivers, refer to the article about Section 508.
Applications built with components that adhere to these guidelines will not only be accessible to people with disabilities, but also to users of all kinds of devices and interfaces such as desktop browsers, voice browsers, mobile phones, automobile-based personal computers, and so on.
The following table lists the Section 508 and WCAG compliance levels of support for the Kendo UI components.
The described level of compliance in the table below is achievable with the Ocean Blue A11y Sass Swatch.
Table 1: 508 and WCAG 2.2 compliance with Kendo UI widgets
| Component | WCAG 2.2 | Accessibility Example |
|---|---|---|
| ActionSheet | AA | Demo |
| AppBar | AA | Demo |
| AutoComplete | AA | Demo |
| Avatar | AA | Demo |
| BarCode | AAA | Demo |
| BottomNavigation | n/a | Demo |
| Breadcrumb | AA | Demo |
| Button | AA | Demo |
| ButtonGroup | AA | Demo |
| Calendar | AA | Demo |
| Captcha | AA | Demo |
| Charts | AA | Demo |
| Chat | AA | Demo |
| CheckBox | AA | n/a |
| CheckBoxGroup | AA | Demo |
| CircularGauge | AA | Demo |
| ComboBox | AA | Demo |
| ColorGradient | AA | Demo |
| ColorPalette | n/a | Demo |
| ColorPicker | AA | Demo |
| DateInput | AA | Demo |
| DatePicker | AA | Demo |
| DateTimePicker | AA | Demo |
| Diagram | AA | Demo |
| Dialog | AA | Demo |
| Drawer | AA | Demo |
| DropDownButton | AA | Demo |
| DropDownList | AA | Demo |
| DropDownTree* | AA | Demo |
| Editor | AA | Demo |
| ExpansionPanel | AA | Demo |
| FileManager | AA | Demo |
| Filter | AA | Demo |
| FlatColorPicker | AA | Demo |
| FloatingActionButton | AA | Demo |
| Form | AA | Demo |
| Gantt | AA | Demo |
| Grid | AA | Demo |
| ImageEditor | AA | Demo |
| Loader | AA | Demo |
| LinearGauge | AA | Demo |
| ListBox | AA | Demo |
| ListView | AAA | Demo |
| Map | AA | Demo |
| MaskedTextbox | AA | Demo |
| MediaPlayer | n/a | Demo |
| Menu | AA | Demo |
| MultiColumnComboBox | AA | Demo |
| MultiSelect | AA | Demo |
| Notification | AA | Demo |
| NumericTextbox | AA | Demo |
| OrgChart | AA | Demo |
| Pager | AA | Demo |
| PanelBar | AA | Demo |
| PivotGrid | n/a | n/a |
| PivotGridV2 | n/a | n/a |
| PopOver | AA | Demo |
| QRCode | AAA | Demo |
| RadialGauge | AA | Demo |
| RadioButton | AA | n/a |
| RadioGroup | AA | Demo |
| ResponsivePanel | AA | n/a |
| ScrollView | AA | Demo |
| Scheduler | AA | Demo |
| Slider | AA | Demo |
| SplitButton | AA | Demo |
| Splitter | AA | Demo |
| Spreadsheet | AA | Demo |
| Stepper | AA | Demo |
| Switch | AA | Demo |
| TabStrip | AA | Demo |
| TaskBoard | AA | Demo |
| TextArea | AAA | Demo |
| TextBox | AA | Demo |
| TileLayout | AAA | Demo |
| TimeLine | AA | Demo |
| TimeDurationPicker | AA | n/a |
| TimePicker | AA | Demo |
| ToolBar | AA | Demo |
| Tooltip | AA | Demo |
| TreeList | AA | Demo |
| TreeView | AA | Demo |
| Upload | AA | Demo |
| Window | AA | Demo |
| Wizard | AA | Demo |
The DropDownTree component will be identified as non-compliant with the WAI-ARIA spec when tested with a static HTML analyzer if no selection in the component is present and the
placeholderconfiguration is not used. That is because the DropDownTree wrapper element, which hasrole="listbox"will not contain anyoptionelements. That is a known limitation of the component. Detailed information on the scenario is available in this GitHub issue.BottomNavigation, ColorPalette, and Rating fail WCAG success criterion 1.4.11: Non-text Contrast for the focus indicator on its items.
See Also
- Kendo UI Accessibility Demos
- Overview of Accessibility Features in Kendo UI
- Section 508 Support in Kendo UI
- WAI-ARIA Support in Kendo UI
- Keyboard Support in Kendo UI
- Right-to-Left Language Support in Kendo UI
- Working with the Kendo UI High-Contrast Theme
- Five Tips for Accessible Charts with Kendo UI