Accessibility Compliance
The accessibility support available for the Kendo UI for Angular components is based on a set of approaches for adhering to and implementing the established standards and technical specifications ensuring the seamless experience of users with disabilities.
Accessibility Approaches in Kendo UI for Angular
The following list summarizes how the Kendo UI for Angular team approaches accessibility when developing the component library:
- When implementing a 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 WAI-ARIA attributes and localized messages for labels, titles, and other elements.
- Additionally, each component also goes through manual testing, which covers its usage with various screen readers and other accessibility aspects such as keyboard navigation.
The team sometimes runs into scenarios not covered by the WAI-ARIA specifications. 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 the team's expertise based on 10+ years of creating web component libraries. The knowledge-sharing across internal teams and clients helps ensure that Kendo UI for Angular can reach a certain level of accessibility compliance even with its most advanced components.
Due to the rich feature set of the library and complexity of some components, the specific combination of configuration options may lead to inaccessible component rendering. Perform thorough testing on any modifications applied to the Kendo UI for Angular components to ensure that they continue to comply with the desired level of accessibility standards.
Voluntary Product Accessibility Template (VPAT)
A Voluntary Product Accessibility Template (VPAT®) is a document that explains how information and communication technology (ICT) products such as software, hardware, electronic content, and support documentation meet (conform to) the Revised 508 Standards for IT accessibility.
You can review and download the latest version of the Kendo UI for Angular VPAT document here.
Accessibility Support per Component
The following table lists the accessibility compliance levels and keyboard navigation support provided by the Kendo UI for Angular components.
The described level of compliance in the table below is achievable with the Ocean Blue A11y Accessibility Swatch.
Component | Section 508 | WCAG 2.2 | Keyboard Navigation | Accessibility Documentation |
---|---|---|---|---|
ActionSheet | Yes | AA | Yes | Documentation |
AppBar | Yes | AA | Yes | n/a |
ArcGauge | Yes | Yes | n/a | n/a |
AutoComplete | Yes | AA | Yes | Documentation |
Avatar | Yes | AA | n/a | n/a |
Badge | Yes | n/a | n/a | n/a |
Barcode | Yes | n/a | n/a | n/a |
BottomNavigation | Yes | AA | Yes | Documentation |
Breadcrumb | Yes | AA | Yes | Documentation |
Button | Yes | AA | Yes | n/a |
ButtonGroup | Yes | AA | Yes | Documentation |
Calendar | Yes | AA | Yes | Documentation |
Card | Yes | AAA | Yes | n/a |
Chart | Yes | Yes | n/a | n/a |
Checkbox | Yes | AA | Yes | n/a |
Chip | Yes | AA | Yes | Documentation |
ChipList | Yes | AA | Yes | Documentation |
ChunkProgressBar | Yes | AA | n/a | Documentation |
CircularGauge | Yes | Yes | n/a | n/a |
CircularProgressBar | Yes | AA | n/a | Documentation |
ColorGradient | Yes | AA | Yes | Documentation |
ColorPalette | Yes | AA | Yes | Documentation |
ColorPicker | Yes | AA | Yes | Documentation |
ComboBox | Yes | AA | Yes | Documentation |
ContextMenu | Yes | AA | Yes | Documentation |
Conversational UI | Yes | AA | Yes | Documentation |
DateInput | Yes | AA | Yes | Documentation |
DatePicker | Yes | AA | Yes | Documentation |
DateRange | Yes | AA | Yes | Documentation |
DateTimePicker | Yes | AA | Yes | Documentation |
Dialog | Yes | AA | Yes | Documentation |
Drawer | Yes | AA | Yes | Documentation |
DropDownButton | Yes | AA | Yes | Documentation |
DropDownList | Yes | AA | Yes | Documentation |
DropDownTree | Yes | AA | Yes | Documentation |
Editor | Yes | AA | Yes | Documentation |
ExpansionPanel | Yes | AA | Yes | Documentation |
FileSelect | Yes | n/a | Yes | Documentation |
Filter | Yes | AA | Yes | Documentation |
FlatColorPicker | Yes | AA | Yes | Documentation |
FloatingActionButton | Yes | AA | Yes | Documentation |
FloatingLabel | Yes | n/a | n/a | n/a |
Gantt | Yes | AA | Yes | Documentation |
Grid | Yes | AA | Yes | Documentation |
GridLayout | Yes | n/a | n/a | n/a |
Icon | n/a | n/a | n/a | n/a |
Label | n/a | n/a | n/a | n/a |
LinearGauge | Yes | Yes | n/a | n/a |
ListBox | Yes | AA | Yes | Documentation |
ListView | Yes | AAA | Yes | Documentation |
Loader | n/a | n/a | n/a | n/a |
Map | n/a | n/a | n/a | n/a |
MaskedTextBox | Yes | AA | Yes | Documentation |
Menu | Yes | AA | Yes | Documentation |
MultiColumnComboBox | Yes | AA | Yes | Documentation |
MultiSelect | Yes | AA | Yes | Documentation |
MultiSelectTree | Yes | AA | Yes | Documentation |
MultiViewCalendar | Yes | AA | Yes | Documentation |
Notification | Yes | AA | n/a | n/a |
NumericTextBox | Yes | AA | Yes | Documentation |
Pager | Yes | AA | Yes | Documentation |
PanelBar | Yes | AA | Yes | Documentation |
PivotGrid | Yes | AA | Yes | Documentation |
Popover | Yes | AA | Yes | Documentation |
ProgressBar | Yes | AA | n/a | Documentation |
QR Code | n/a | n/a | n/a | n/a |
RadialGauge | Yes | Yes | n/a | n/a |
RadioButton | Yes | AA | Yes | n/a |
RangeSlider | Yes | AA | Yes | Documentation |
Rating | Yes | AA | Yes | Documentation |
Ripple | Yes | AAA | n/a | n/a |
SankeyChart | Yes | Yes | n/a | |
Documentation | ||||
Scheduler | Yes | AA | Yes | Documentation |
Signature | Yes | Yes | Yes | n/a |
Skeleton | n/a | n/a | n/a | n/a |
ScrollView | Yes | AA | Yes | Documentation |
Slider | Yes | AA | Yes | Documentation |
Sortable | Yes | AA | Yes | Documentation |
Sparkline | Yes | Yes | n/a | n/a |
SplitButton | Yes | AA | Yes | Documentation |
Splitter | Yes | AA | Yes | Documentation |
StackLayout | Yes | n/a | n/a | n/a |
Stepper | Yes | AA | Yes | Documentation |
StockChart | Yes | Yes | n/a | n/a |
SVGIcon | Yes | n/a | n/a | n/a |
Switch | Yes | AA | Yes | Documentation |
TabStrip | Yes | AA | Yes | Documentation |
TextArea | Yes | AAA | Yes | Documentation |
TextBox | Yes | AA | Yes | Documentation |
TileLayout | Yes | AAA | Yes | Documentation |
Timeline | Yes | AA | Yes | Documentation |
TimePicker | Yes | AA | Yes | Documentation |
ToolBar | Yes | AA | Yes | Documentation |
Tooltip | Yes | AA | Yes | Documentation |
TreeList | Yes | AA | Yes | Documentation |
TreeView | Yes | AA | Yes | Documentation |
Upload | Yes | AAA | Yes | Documentation |
Window | Yes | AA | Yes | Documentation |
Special Considerations
-
The components that represent or directly extend a native HTML element (for example Button, CheckBox) do not require additional accessibility functionality to provide their respective level of compliance.
-
Components that are built by using other components and/or native HTML elements that are fully accessible (for example Card, AppBar, Pager), achieve their respective level of compliance through their building blocks.
-
Components that do not provide end-user interaction and serve only as visual representation of a specific state, value, actions, and others (for example, Icons and ProgressBars) are neither focusable, nor navigable. Adding descriptive labels, WAI-ARIA attributes, or a
tabindex
to such components, necessitated by a specific use case, is in the hands of the developer. -
Assistive technologies treat components like the various Charts and Gauges as images. To make them 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.
Component Customization
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 templates and custom input (for example, images, text, and HTML content), make sure that any custom content is also accessible.