New to Kendo UI for jQuery? Download free 30-day trial

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 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
ActionSheet Yes AAA Browse
AppBar Yes AAA Browse
AutoComplete Yes AA Browse
BarCode Yes AAA Browse
BottomNavigation Yes AAA Browse
Breadcrumb Yes AA Browse
Button Yes AA Browse
ButtonGroup Yes AA Browse
Calendar Yes AAA Browse
Captcha Yes AAA Browse
Charts Yes AAA Browse
Chat Yes AAA Browse
CheckBoxGroup Yes AAA Browse
ContextMenu 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
Drawer Yes AAA Browse
DropDownList Yes AA Browse
DropDownTree No -
Editor Yes AA Browse
ExpansionPanel Yes AAA Browse
FileManager Yes AAA Browse
FloatingActionButton Yes AAA Browse
Form Yes AAA Browse
Gantt Yes AA Browse
Grid Yes AAA Browse
ImageEditor Yes AA Browse
Loader Yes AАA 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
MultiColumnComboBox Yes AA Browse
MultiSelect Yes AAA Browse
Notification Yes AA Browse
NumericTextbox Yes AAA Browse
OrgChart Yes AAA Browse
Pager Yes AAA Browse
PanelBar Yes AAA Browse
PivotGrid Yes AAA Browse
PopOver Yes AAA Browse
QRCode Yes AAA Browse
RadialGauge Yes AAA Browse
RadioButton Yes AA Browse
RadioGroup Yes AAA 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 -
Stepper Yes AA Browse
Switch Yes AA Browse
TabStrip Yes AAA Browse
TaskBoard Yes AAA Browse
TextArea Yes AAA Browse
TextBox Yes AAA Browse
TileLayout Yes AA Browse
TimeLine Yes A 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
Wizard 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:

  <label id="label">
    <input id="numerictextbox" aria-labelledby="label"/>
    $(function() {

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>
      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: " +;
      height: 200,
      messages: {
        expandCollapseColumnHeader: "E/C"

The following example demonstrates how to specify a text for the week column header.

    <div id="calendar"></div>
        "weekNumber": true,
        "messages": {
            "weekColumnHeader": "W"

See Also

In this article
Not finding the help you need? Improve this article