Accessibility Compliance
How does the Kendo UI for Angular Team Approach Accessibility?
- When implementing any Kendo UI for Angular component, the team follows the WAI-ARIA specification to ensure that the right foundation for the accessibility of the component is laid.
- From there, to guarantee accessible and semantically correct rendering, the team employs both multiple automated tests and unit tests across the Kendo UI for Angular library.
- The team also ensures the proper usage of ARIA attributes and localized messages (for labels, titles, and so on).
- Additionally, each component also goes through manual testing, which covers usage with various screen readers and other accessibility aspects such as keyboard navigation.
Due to the complexity of some components in the Kendo UI for Angular library, the team sometimes runs into scenarios not covered by the WAI-ARIA specification. In those cases, the team taps into the web development accessibility know-how of the rest of the Progress organization. This includes feedback from accessibility-minded users and our expertise based on more than 10 years of creating web component libraries. The knowledge-sharing across internal teams and clients helps us to ensure that Kendo UI for Angular can reach a certain level of accessibility compliance even with its most advanced components.
The following table lists the accessibility compliance levels and keyboard navigation support provided by the Kendo UI for Angular components.
| Component | Section 508 | WCAG 2.1 | Keyboard Navigation |
|---|---|---|---|
| AppBar | Yes2 | AAA | Yes2 |
| ArcGauge | Yes3 | Yes3 | No3 |
| AutoComplete | Yes | AA | Yes |
| Avatar | Yes1 | Yes4 | No4 |
| Badge | Yes4 | Yes4 | No4 |
| Breadcrumb | Yes | AA | Yes2 |
| Button | Yes1 | AAA | Yes1 |
| ButtonGroup | Yes | AA | Yes |
| Calendar | Yes | AAA | Yes |
| Card | Yes2 | AAA | Yes2 |
| Chart | Yes3 | Yes3 | No3 |
| Checkbox | Yes1 | AAA | Yes1 |
| Chip | No | AA | No |
| ChipList | No | AA | No |
| ChunkProgressBar | Yes2 | AAA | No |
| ColorGradient | Yes | AA | Yes |
| ColorPalette | Yes | AA | Yes |
| ColorPicker | Yes | AA | Yes |
| ComboBox | Yes | AAA | Yes |
| ContextMenu | Yes | AAA | Yes |
| Conversational UI | Yes | AAA | Yes |
| DateInput | Yes | AAA | Yes |
| DatePicker | Yes | AAA | Yes |
| DateRange | Yes2 | AAA | Yes2 |
| DateTimePicker | Yes | AAA | Yes |
| Dialog | Yes | AAA | Yes |
| Drawer | Yes | AAA | Yes |
| DropDownButton | Yes | AA | Yes |
| DropDownList | Yes | AA | Yes |
| DropDownTree | Yes | AA | Yes |
| Editor | Yes2 | AAA | Yes |
| ExpansionPanel | Yes | AAA | Yes |
| FileSelect | Yes | AA | Yes |
| FloatingLabel | Yes1 | AAA | No |
| FloatingActionButton | Yes | AAA | Yes |
| Grid | Yes | AAA | Yes |
| Icon | Yes4 | Yes4 | No4 |
| Label | Yes1 | AAA | No |
| LinearGauge | Yes3 | Yes3 | No3 |
| ListView | Yes | AA | Yes |
| Loader | Yes4 | Yes4 | No4 |
| MaskedTextBox | Yes | AAA | Yes1 |
| Menu | Yes | AAA | Yes |
| MultiColumnComboBox | Yes | AAA | Yes |
| MultiSelect | Yes | AA | Yes |
| MultiViewCalendar | Yes | AAA | Yes |
| Notification | Yes1 | AA | No |
| NumericTextBox | Yes | AAA | Yes |
| Pager | Yes2 | AA | Yes2 |
| PanelBar | Yes | AAA | Yes |
| ProgressBar | Yes4 | AAA | No4 |
| RadialGauge | Yes3 | Yes3 | No3 |
| RadioButton | Yes1 | AAA | Yes1 |
| RangeSlider | Yes | AAA | Yes |
| Ripple | Yes4 | AAA | No4 |
| Scheduler | Yes | AAA | Yes |
| ScrollView | Yes | AAA | Yes |
| Slider | Yes | AAA | Yes |
| Sortable | Yes1 | AAA | Yes |
| Sparkline | Yes3 | Yes3 | No |
| SplitButton | Yes | AA | Yes |
| Splitter | Yes | AAA | Yes |
| Stepper | Yes | AAA | Yes |
| StockChart | Yes3 | Yes3 | No |
| SVGIcon | Yes4 | Yes4 | No4 |
| Switch | Yes | AA | Yes |
| TabStrip | Yes | AAA | Yes |
| TextArea | Yes | AAA | Yes1 |
| TextBox | Yes | AAA | Yes1 |
| TileLayout | No | No | No |
| TimePicker | Yes | AAA | Yes |
| ToolBar | Yes | AA | Yes |
| Tooltip | Yes1 | AAA | Yes1 |
| TreeList | Yes | AA | Yes |
| TreeView | Yes | AA | Yes |
| Upload | Yes | AA | Yes |
| Window | Yes | AAA | Yes |
1 - The component extends a native HTML element and does not require additional accessibility functionality to provide this level of compliance.
2 - The component is built by using other components that are fully accessible. Combining their accessibility with the built-in browser keyboard navigation support allows the component to achieve this level of accessibility.
3 - The component is treated as an image by assistive technologies. To make it accessible, add a descriptive label or an alternative representation of the data. For example, a Chart may be represented by a table that duplicates the data in an accessible form.
4 - The component does not provide end-user interaction. It serves only as a visual representation of specific state, value, data, actions, and so on. Аs such, the component is neither focusable nor navigable. To make the component accessible, add a descriptive label or a corresponding ARIA attribute depending on the specific case. To make the component focusable, provide a `tabindex` attribute, which will add it to the sequential keyboard navigation of the page.
Component Customization
It is important to note that the Kendo UI for Angular components are highly extensible and customizable. This means that, depending on the applied level of customization, you may be introducing rendering that is not accessible.
Therefore, it is recommended to test any modifications made to the Kendo UI for Angular components to ensure that they still meet the desired level of accessibility standards. Additionally, be mindful of components working with custom input (images, text, HTML content, and so on) and make sure that any custom content is also accessible.
Last updated on 1 April, 2021 using Angular versions 8-11.
