Accessibility

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 described level of compliance in the table below is achievable with the Ocean Blue A11y 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 AAA Demo
BottomNavigation No n/a 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 n/a
CheckBoxGroup Yes AA Demo
CircularGauge Yes AA Demo
ComboBox Yes AA Demo
ColorGradient Yes AA Demo
ColorPalette No n/a 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 AA Demo
LinearGauge Yes AA Demo
ListBox Yes AA Demo
ListView Yes AAA Demo
Map Yes AA Demo
MaskedTextbox Yes AA Demo
MediaPlayer No n/a 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
PivotGrid No n/a n/a
PivotGridV2 No n/a n/a
PopOver Yes AA Demo
QRCode Yes AAA Demo
RadialGauge Yes AA Demo
RadioButton Yes AA n/a
RadioGroup Yes AA Demo
Responsive Panel Yes AA n/a
ScrollView Yes AA Demo
Scheduler Yes AA Demo
Slider 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 AAA Demo
TextBox Yes AA Demo
TileLayout Yes AAA Demo
TimeLine Yes AA Demo
TimeDurationPicker Yes AA n/a
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 placeholder configuration is not used. That is because the DropDownTree wrapper element, which has role="listbox" will not contain any option elements. That should be considered a known limitation in the widget. Detailed information on the scenario could be found in this GitHub issue.

BottomNavigation, ColorPalette and Rating fail WCAG success criteria 1.4.11 Non-text contrast for the focus indicator on its items.

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

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