Edit this page

Section 508 and WCAG 2.0 Compliance

The Kendo UI widgets follow the W3C Web Content Accessibility Guidelines 2.0.

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.0 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.0 compliance with Kendo UI widgets

Component 508 WCAG 2.0 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
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
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>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy