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.
| Selector | Attribute | Usage |
|---|---|---|
.k-upload | role=application | Indicates that the role of the upload is application. The component implements single tab stop navigation strategy. Thus, the role is required to support arrow navigation. |
.k-upload .k-upload-button | tabindex=0 | Assures that the button element inside the upload is the focusable element. |
aria-disabled=true/false | Announces the disabled state of the upload button. | |
.k-upload input | tabindex=-1 | Assures that the input element inside the upload is not focusable element. |
aria-hidden=true | The input needs to be hidden from the readers. | |
.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. | |
.k-upload .k-actions .k-button | role=button or nodeName=button | Announces the purpose of the action button. |
tabindex=0 | The action buttons are focusable through arrow navigation and tabbing through them. |
Managing the Focus
The Upload component contains a single or multiple tab stops depending on its configuration. When the autoUpload option is set to true, the Select Files button is the only tabstop and starting point for the navigation. Setting the autoUpload to false, the Clear and Upload buttons are included in the tab sequence.
- When files are deleted, the focus is returned to the
Select Filesbutton. - When the component looses focus, the focus goes back to the
Select Filesbutton.
Keyboard Shortcuts
| Shortcut | Behavior |
|---|---|
Tab | Focuses the Select File Button, or 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, or the Clear button if the end of the list is reached. |
UpArrow | Highlights the previous file in the file list, or the Select files button if the top of the list is reached. |
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 |
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 |
