Accessibility Support
Out of the box, the Telerik and Kendo UI Upload provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The Upload 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 Upload selected files list implements roving tabindex navigation. Meaning that only one file has tabindex=0.
| Selector | Attribute | Usage |
|---|---|---|
.k-upload .k-upload-button | aria-disabled=true/false | Announces the disabled state of the upload button. |
aria-expanded=true/false | Indicates whether the controlled list of files is present/visible | |
aria-controls=.k-upload-files id | Creates the relationship between the button and the list of selected files when the list is present. Remove the attribute when list is not present. | |
.k-upload input | tabindex=-1 | Assures that the input element inside the upload is not focusable. |
aria-hidden=true | The input needs to be hidden from the readers. | |
.k-upload-files | role=list | Explicitly sets the UL role to list because of https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns |
id | Unique and deterministic id linked to the button aria-controls attribute. | |
.k-upload-files .k-file | role=listitem | Explicitly sets the LI role to listitem because of https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role#best_practices (note 2). |
tabindex=0/-1 | The element should be focusable. Value should be changed dynamically based on the roving tabindex navigation. | |
.k-upload .k-file .k-file-validation-message | aria-live=polite | Announces the change in the upload status of the file. |
.k-upload .k-upload-actions .k-upload-action | aria-hidden=true | The list file action buttons must be hidden from the readers. |
tabindex=-1 | Assures that the list file action buttons are not focusable elements. |
Managing the Focus
The Upload component contains a single or multiple tab stops depending on its configuration and content. When the autoUpload option is set to true, the Select Files button is the first tabstop and starting point for the navigation. When there are selected files present, the file list is a separate tab stop, implementing roving tab index (only one item is focusable and it is changed dynamically based on navigation). Setting the autoUpload to false, the Clear and Upload buttons are included in the tab sequence.
- When a selected file is deleted, the focus is moved to the next file (if present), the previous one (if there is no next, and there is previous), or to the
Select Filesbutton if there are no files left in the list.
Keyboard Shortcuts
| Shortcut | Behavior |
|---|---|
Tab | Switches focus between the Select File Button, the list of selected files, and the action buttons (Cancel, Upload) after the file list. |
Space/Enter | Opens the Select file dialog if the Select files button is focused. |
DownArrow | Highlights the next file in the file list (if such exists) when a file list item is focused. |
UpArrow | Highlights the previous file in the file list (if such exists) when a file list item is focused. |
Enter | Retries the upload of the failed file when the focus is on a file list item or starts the file upload for a valid file. |
Escape | Cancels the upload of the highlighted file when the focus is on a file list item |
Space | When Chunk upload is enabled Start or Pause the highlighted file upload |
Delete | Removes the highlighted file when the focus is on a file list item. Focus is moved to the next file (if present), previous file (if there is no next and there is previous), or is returned to the Select Files button if the last file from the list is deleted. |
Testing
The Upload has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The Upload has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
