How can I help you?
Accessibility in Vue File Manager component
4 Feb 202610 minutes to read
The File Manager component follows accessibility guidelines and standards, including ADA, Section 508, and WCAG 2.2. It implements WAI-ARIA roles and attributes commonly used to evaluate accessibility.
The File Manager component’s accessibility compliance is summarized below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The File Manager implements WAI-ARIA patterns to improve accessibility. The table below lists ARIA attributes used by the component and their purpose:
| Attributes | Purpose |
|---|---|
role |
Used to convey a significant and contextual message to the user. |
aria-disabled |
Indicates whether the File Manager component is in disabled state. |
aria-haspopup |
Indicates whether the toolbar item has a popup list or not. |
aria-orientation |
Indicates whether the File Manager element is oriented horizontally or vertically. |
aria-expanded |
Indicates whether the Treeview node has been expanded. |
aria-owns |
Contains the ID of the suggestion list to indicate popup as a child element. |
aria-activedescendent |
Holds the ID of the active list item to focus its descendant child element. |
aria-level |
Specifies the level of the element in Treeview Structure. |
aria-selected |
Indicates whether a particular node is in selected state. |
aria-placeholder |
Represents a hint (word or phrase) to the user about what to enter in the text field. |
aria-label |
Provides an accessible name for the element. |
aria-checked |
Indicates whether the checkbox is in checked state. |
aria-labelledby |
Provides a label for the dialog. Typically, the “aria-labelledby” attribute will contain the id of the element used as the dialog’s title. |
aria-describedby |
This attribute points to the Dialog element describing the one it’s set on. |
aria-modal |
Indicates whether an element is a modal when display. |
aria-colcount |
Specifies the number of columns in full table. |
aria-colindexnt |
Defines the number of columns within a table in details view. |
aria-rowspan |
Defines the number of rows a cell spanned within a table in details view. |
aria-colspan |
Defines the number of columns a cell spanned within a table in details view. |
aria-sort |
Indicates whether items in the table are sorted in ascending or descending order. |
aria-grabbed |
When the folder/file item is chosen for dragging, the aria-grabbed attribute is set to “true.” If it’s set to “false,” the element can be grabbed for drag-and-drop, but it won’t be actively held. |
aria-busy |
This attribute is set to false when table content is loaded. |
aria-multiselectable |
Defines more than one item has been selected. |
Keyboard interaction
The File Manager supports keyboard interaction to help users who rely on the keyboard or assistive technologies. The following shortcuts are supported:
| Press | To do this |
|---|---|
| Page Down | Scrolls down to the next folder or file and selects the first item when files are loaded. |
| Page Up | Scrolls up to previous folder and select the first item when files are loaded. |
| Enter | Selects the focused item and navigate through the child elements. |
| Tab | Focuses on the first element of toolbar and navigates through the next tab indexed element. |
| Esc(Escape) | Closes the image when it is in open state. |
| Alt+N | Creates a new folder dialog. |
| F5 | Refresh the File Manager element. |
| Home | Navigate through the first element of details view or large icons view. |
| End | Navigate through the last element of details view or large icons view. |
| Move Left | Scrolls left to the previous folder and select the first item when files are loaded |
| Move Right | Scrolls right to the previous folder and select the first item when files are loaded |
| Alt+Enter | Shows the get details info for selected folder. |
| Shift+Right | Allows multiselection. Select the file or folder at the right of the previously selected folder. |
| Shift+Left | Allows multiselection. Select the file or folder at the left of the previously selected folder. |
| Shift+Down | Allows multiselection. Select the file or folder till the focused index. |
| Shift+Delete | Permanently deletes the selected file or folder in the File Manager element. |
| Delete | Deletes the selected file or folder in the File Manager element. |
| Shift+Up | Allows multiselection. Select the file or folder till the focused index. |
| Ctrl+C | Copies the selected file or folder in the File Manager element. |
| Ctrl+V | Pastes the copied/cut file or folder in the File Manager element. |
| Ctrl+X | Cuts the selected file or folder in the File Manager element. |
| Ctrl+A | Select all the files or folders in the details view or large icons view. |
| F2 | Creates a rename dialog for a selected file or folder in the File Manager element. |
| Shift+F10 | Opens the context menu for the selected file or folder in the File Manager element. |
| Ctrl+D | Downloads the list of selected files or folders in the File Manager element. |
| Ctrl+Shift+1 | Changes the File Manager layout to details view. |
| Ctrl+Shift+2 | Changes the File Manager layout to large icons view. |
Ensuring accessibility
Accessibility compliance is validated using automated tools such as accessibility-checker and axe-core during testing.
Open the accessibility evaluation sample in a new window to review accessibility behavior: