New to Kendo UI for Angular? Start a free 30-day trial

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, we employ both multiple automated tests and unit tests across the Kendo UI for Angular library in order to guarantee accessible and semantically correct rendering. We also ensure proper usage of aria attributes and localized messages (for labels, titles etc.). Additionally, each component also goes through thorough 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, we tap 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. This 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.

ComponentSection 508WCAG 2.1Keyboard Navigation
AppBarYes2AAAYes2
ArcGaugeYes3Yes3No3
AutoCompleteYesAAYes
AvatarYes1Yes4No4
BadgeYes4Yes4No4
BreadcrumbYesAAYes2
ButtonYes1AAAYes1
ButtonGroupYesAAYes
CalendarYesAAAYes
CardYes2AAAYes2
ChartYes3Yes3No3
CheckboxYes1AAAYes1
ChipNoAANo
ChipListNoAANo
ChunkProgressBarYes2AAANo
ColorGradientYesAAYes
ColorPaletteYesAAYes
ColorPickerYesAAYes
ComboBoxYesAAAYes
ContextMenuYesAAAYes
Conversational UIYesAAAYes
DateInputYesAAAYes
DatePickerYesAAAYes
DateRangeYes2AAAYes2
DateTimePickerYesAAAYes
DialogYesAAAYes
DrawerYesAAAYes
DropDownButtonYesAAYes
DropDownListYesAAYes
DropDownTreeYesAAYes
EditorYes2AAAYes
ExpansionPanelYesAAAYes
FileSelectYesAAYes
FloatingLabelYes1AAANo
FloatingActionButtonYesAAAYes
GridYesAAAYes
IconYes4Yes4No4
LabelYes1AAANo
LinearGaugeYes3Yes3No3
ListViewYesAAYes
LoaderYes4Yes4No4
MaskedTextBoxYesAAAYes1
MenuYesAAAYes
MultiColumnComboBoxYesAAAYes
MultiSelectYesAAYes
MultiViewCalendarYesAAAYes
NotificationYes1AANo
NumericTextBoxYesAAAYes
PagerYes2AAYes2
PanelBarYesAAAYes
ProgressBarYes4AAANo4
RadialGaugeYes3Yes3No3
RadioButtonYes1AAAYes1
RangeSliderYesAAAYes
RippleYes4AAANo4
SchedulerYesAAAYes
ScrollViewYesAAAYes
SliderYesAAAYes
SortableYes1AAAYes
SparklineYes3Yes3No
SplitButtonYesAAYes
SplitterYesAAAYes
StepperYesAAAYes
StockChartYes3Yes3No
SVGIconYes4Yes4No4
SwitchYesAAYes
TabStripYesAAAYes
TextAreaYesAAAYes1
TextBoxYesAAAYes1
TileLayoutNoNoNo
TimePickerYesAAAYes
ToolBarYesAAYes
TooltipYes1AAAYes1
TreeListYesAAYes
TreeViewYesAAYes
UploadYesAAYes
WindowYesAAAYes

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 etc. А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. In order 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 level of customization applied, 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 the 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.

In this article

Not finding the help you need?