The file explorer is a component available on all operating systems. When it is present in a web page, it should behave as expected by the user.
Using the mouse, each file can be opened via a double click. The ctrl and shift keys allow multiple selection.
Using the keyboard, the arrow keys the move the selection. Pressing enter allows to open a file. The control+spacebar or shift+arrow shortcuts to select multiple files.
Using a screen reader is the same as the keyboard, each file is correctly vocalized (name, size, type, ...); in addition it vocalizes the state of the file (selected/unselected).Open example
For the layout, we use
div tags. To be properly vocalized we have to add some ARIA attributes and roles.
The listbox role indicates the component is a list of items to the screen reader. The
aria-multiselectable attribute indicates that it is a multiple-selection list. Each list item must have the option role.
In order to correctly vocalize each file, we add the
aria-label attribute to each element of the list. Finally, for each file to be focusable, the
tabindex="0" attribute is added.
<div role="listbox" aria-multiselectable="true" aria-label="file list, grid view"> <div tabindex="0" role="option" aria-label="test 001.avi, video, 18.9MB"> ... </div> ... </div>
The focus position must be visible at all times. A specific style is applied to the thumbnail that has the focus. This style remains visible on selected files.
- Arrow keys to move through the list.
- Ctrl, Shift and spacebar to select several items.
- Ctrl+a to select all items
- The Enter key to open the file.