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 of the Rehabilitation Act. 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 browser, voice browser, mobile phone, automobile-based personal computer, and so on.
The following table shows the Section 508 and WCAG 2.1 Compliance level of support for the Kendo UI widgets. The report is based on results from tests performed on our Basic Usage demos.
Table 1: 508 and WCAG 2.1 compliance with Kendo UI widgets
| Component | 508 | WCAG 2.1 | Demo |
|---|---|---|---|
| AutoComplete | Yes | AA | Browse |
| BarCode | Yes | AAA | Browse |
| Button | Yes | AA | Browse |
| ButtonGroup | Yes | AA | Browse |
| Calendar | Yes | AAA | Browse |
| Charts | Yes | AAA | Browse |
| Chat | Yes | AAA | Browse |
| ComboBox | Yes | AA | Browse |
| ColorPicker | Yes | AA | Browse |
| DateInput | Yes | AAA | Browse |
| DatePicker | Yes | AAA | Browse |
| DateTimePicker | Yes | AAA | Browse |
| Diagram | Yes | AAA | Browse |
| Dialog | Yes | AA | Browse |
| DropDownList | Yes | AA | Browse |
| DropDownTree | Yes | AA | Browse |
| Editor | Yes | AA | Browse |
| Gantt | Yes | AA | Browse |
| Grid | Yes | AAA | Browse |
| LinearGauge | Yes | AAA | Browse |
| ListBox | Yes | AAA | Browse |
| ListView | Yes | AAA | Browse |
| Map | Yes | AAA | Browse |
| MaskedTextbox | Yes | AAA | Browse |
| Menu | Yes | AAA | Browse |
| MediaPlayer | Yes | AAA | Browse |
| MultiSelect | Yes | AAA | Browse |
| Notification | Yes | AA | Browse |
| NumericTextbox | Yes | AAA | Browse |
| PanelBar | Yes | AAA | Browse |
| PivotGrid | Yes | AAA | Browse |
| QRCode | Yes | AAA | Browse |
| RadialGauge | Yes | AAA | Browse |
| RadioButton | Yes | AA | Browse |
| Responsive Panel | Yes | AA | Browse |
| ScrollView | Yes | AAA | Browse |
| Scheduler | Yes | AAA | Browse |
| Slider | Yes | AAA | Browse |
| Sortable | Yes | AAA | Browse |
| Splitter | Yes | AAA | Browse |
| Spreadsheet | No | - | |
| Switch | Yes | AA | Browse |
| TabStrip | Yes | AAA | Browse |
| TimePicker | Yes | AAA | Browse |
| ToolBar | Yes | AA | Browse |
| Tooltip | Yes | AA | Browse |
| TreeList | Yes | AAA | Browse |
| TreeView | Yes | AA | Browse |
| Upload | Yes | AA | Browse |
| Window | Yes | AAA | Browse |
Special Considerations
Several Kendo UI widgets feature complex rendering which affects their accessibility standards support provisioned by Section 508.
Label Element Support
Widgets, such as the ComboBox, MultiSelect, and NumericTextBox, hide their initial input or select element which breaks the label.for focus functionality on click. In general, the browser cannot focus hidden elements. This results in the inability of the label element to focus the corresponding widget.
Solution
Place the widget inside the label element which in turn focuses the first visible element. Avoid using the for attribute because when it is applied to the label element, the respective widget does not focus. Instead, use the aria-labelledby attribute on the input to point to its wrapping label element:
Example
<label id="label">
Amount:
<input id="numerictextbox" aria-labelledby="label"/>
</label>
<script>
$(function() {
$("#numerictextbox").kendoNumericTextBox();
});
</script>
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 should 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.
Example
<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.
Example
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
"weekNumber": true,
"messages": {
"weekColumnHeader": "W"
}
})
</script>