Accessibility Support
Out of the box, the Telerik and Kendo UI ImageEditor provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The ImageEditor is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, provides options for managing its focus and is tested against the most popular screen readers.
WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
The ImageEditor is a composite component containing:
ToolBar (
role=toolbar);Image canvas (
role=img);Edit action pane (
role=form);
The ToolBar follows the spec for the ToolBar component:
The image canvas must have an appropriate role and accessible name assigned:
| Selector | Attribute | Usage |
|---|---|---|
.k-imageeditor-canvas>canvas | role=img | Indicates the canvas' role as an image. |
aria-label or aria-labelledby | Provides an accessible name for the canvas by describing the image content. |
The Edit pane (present on performing crop and resize of image) follows the spec for the Form component:
Managing the Focus
The ImageEditor component is a container that consists of 3 logically separated structural elements:
ToolBar (
role="toolbar");Image canvas (
role="img");Edit pane (
role="form");
The ToolBar and the inputs and buttons of the Edit pane are part of the page tab sequence. The Toolbar implements the keyboard navigation specification for a ToolBar component, while the Edit pane implements the spec for the Form component. The image canvas is not focusable (it is not part of the page tab sequence), as it could not be interacted using the keyboard.
Keyboard Shortcuts
Apart from the shortcuts specific to the ToolBar and the Form used in the ImageEditor, the component offers the following shortcuts:
| Shortcut | Behavior |
|---|---|
Tab | Focuses next focusable element (the ToolBar or an input/button on the Edit pane). |
Shift + Tab | Focuses previous focusable element. |
Ctrl + Z | Undo the last modification performed on the image. |
Ctrl + Y | Redo a modification performed on the image. |
Testing
The ImageEditor has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The ImageEditor has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
