Section 508 and WCAG 2.1 Compliance
The Kendo UI widgets follow the W3C Web Content Accessibility Guidelines 2.1.
They set the standards for applications for providing accessible content. Depending on the number of guidelines that is followed when building an application, W3C defines three levels of accessibility conformance—A, AA, and AAA levels.
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 2.1 compliance levels of support for the Kendo UI widgets.
The described level of compliance in the table below is achievable with the Ocean Blue Sass Swatch.
Table 1: 508 and WCAG 2.1 compliance with Kendo UI widgets
| Component | 508 | WCAG 2.1 | Accessibility Example |
|---|---|---|---|
| ActionSheet | Yes | AA | Demo |
| AppBar | Yes | AA | Demo |
| AutoComplete | Yes | AA | Demo |
| Avatar | Yes | AA | Demo |
| BarCode | Yes | AA | Demo |
| BottomNavigation | Yes | AA | Demo |
| Breadcrumb | Yes | AA | Demo |
| Button | Yes | AA | Demo |
| ButtonGroup | Yes | AA | Demo |
| Calendar | Yes | AA | Demo |
| Captcha | Yes | AA | Demo |
| Charts | Yes | AA | Demo |
| Chat | Yes | AA | Demo |
| CheckBox | Yes | AA | Demo |
| CheckBoxGroup | Yes | AA | Demo |
| ContextMenu | Yes | AA | Demo |
| ComboBox | Yes | AA | Demo |
| ColorGradient | Yes | AA | Demo |
| ColorPalette | Yes | AA | Demo |
| ColorPicker | Yes | AA | Demo |
| DateInput | Yes | AA | Demo |
| DatePicker | Yes | AA | Demo |
| DateTimePicker | Yes | AA | Demo |
| Diagram | Yes | AA | Demo |
| Dialog | Yes | AA | Demo |
| Drawer | Yes | AA | Demo |
| DropDownButton | Yes | AA | Demo |
| DropDownList | Yes | AA | Demo |
| DropDownTree* | Yes | AA | Demo |
| Editor | Yes | AA | Demo |
| ExpansionPanel | Yes | AA | Demo |
| FileManager | Yes | AA | Demo |
| Filter | Yes | AA | Demo |
| FlatColorPicker | Yes | AA | Demo |
| FloatingActionButton | Yes | AA | Demo |
| Form | Yes | AA | Demo |
| Gantt | Yes | AA | Demo |
| Grid | Yes | AA | Demo |
| ImageEditor | Yes | AA | Demo |
| Loader | Yes | AА | Demo |
| LinearGauge | Yes | AA | Demo |
| ListBox | Yes | AA | Demo |
| ListView | Yes | AA | Demo |
| Map | Yes | AA | Demo |
| MaskedTextbox | Yes | AA | Demo |
| Menu | Yes | AA | Demo |
| MultiColumnComboBox | Yes | AA | Demo |
| MultiSelect | Yes | AA | Demo |
| Notification | Yes | AA | Demo |
| NumericTextbox | Yes | AA | Demo |
| OrgChart | Yes | AA | Demo |
| Pager | Yes | AA | Demo |
| PanelBar | Yes | AA | Demo |
| PopOver | Yes | AA | Demo |
| QRCode | Yes | AA | Demo |
| RadialGauge | Yes | AA | Demo |
| RadioButton | Yes | AA | Demo |
| RadioGroup | Yes | AA | Demo |
| Responsive Panel | Yes | AA | n/a |
| ScrollView | Yes | AA | Demo |
| Scheduler | Yes | AA | Demo |
| Slider | Yes | AA | Demo |
| Sortable | Yes | AA | Demo |
| SplitButton | Yes | AA | Demo |
| Splitter | Yes | AA | Demo |
| Spreadsheet | Yes | AA | Demo |
| Stepper | Yes | AA | Demo |
| Switch | Yes | AA | Demo |
| TabStrip | Yes | AA | Demo |
| TaskBoard | Yes | AA | Demo |
| TextArea | Yes | AA | Demo |
| TextBox | Yes | AA | Demo |
| TileLayout | Yes | AA | Demo |
| TimeLine | Yes | AA | Demo |
| TimePicker | Yes | AA | Demo |
| ToolBar | Yes | AA | Demo |
| Tooltip | Yes | AA | Demo |
| TreeList | Yes | AA | Demo |
| TreeView | Yes | AA | Demo |
| Upload | Yes | AA | Demo |
| Window | Yes | AA | Demo |
| Wizard | Yes | AA | Demo |
The DropDownTree widget will be identified as not compliant to the WAI-ARIA spec when tested with static HTML analyzer if there is no selection in the widget and the
placeholderconfiguration is not used. That is because the DropDownTree wrapper element, which hasrole="listbox"will not contain anyoptionelements. That should be considered a known limitation in the widget. Detailed information on the scenario could be found in this GitHub issue.
Special Considerations
Several Kendo UI widgets feature complex rendering which affects their accessibility standards support provisioned by Section 508.
Messages Support
Widgets, such as the Grid and Calendar, require additional configuration to enable them to successfully pass the Section 508 validation. Due to the fact that they render their content in tables, each table header element has to contain text. To achieve this behavior, use the messages.expandCollapseColumnHeader and messages.weekColumnHeader configuration options.
The following example demonstrates how to specify a text for the expand (collapse) column.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ name: "Jane Doe", age: 30, city: "London" },
{ name: "John Doe", age: 33, city: "Berlin" }
]
},
detailInit: function (e) {
e.detailCell.text("City: " + e.data.city);
},
height: 200,
messages: {
expandCollapseColumnHeader: "E/C"
}
});
</script>
The following example demonstrates how to specify a text for the week column header.
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
"weekNumber": true,
"messages": {
"weekColumnHeader": "W"
}
})
</script>
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