FileUpload Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

FileUpload provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-owns, aria-label and others. They are applied to the corresponding elements inside the template of the components.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.

The FileUpload component represents a dialog that allows to select files/folder for uploading. As such it has the role "dialog" applied to it. However there are additial controls inside the element for file selection, uloading and others that have different roles.

  • list - the container that lists the selected items/folders for uploading.
  • listItem - the selected items for uploading.
  • button - the buttons for uplloading, upload pausing and upload canceling.

The following ARIA attributes are used in the FileUpload:

  • aria-disabled - indicates that interaction with the FileUpload is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the FileUpload and will not be mapped to the accessibility API. In practise it hides containers that do not have any usefull information for the assistive technologies.
  • aria-owns - identifies the functional relationship between the list of uploaded items and drop zone, and the file uploading container. Since the drop zone may or may not be a child of the file uploading container.
  • aria-label - defines a string value that labels the uploading controls - drop zone, selected files list, uploading buttons, progress bar indicator.
  • aria-labelledby - identifies the element that labels the list item that indicates the add file for uploading.

Keyboard Interaction

The FileUpload component contains focusable buttons for pausing, canceling and uploading. The users can navigate between them using the TAB key on the keyboard and click on them via Enter.

Additional information on WAI-ARIA for the SMART Framework can be found here.