Accessibility in Vue File Manager component
26 Mar 202410 minutes to read
The File Manager component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the File Manager component is outlined 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 component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the File Manager component:
| 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 component followed the keyboard interaction guidelines, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the File Manager component.
| 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
The File Manager component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the File Manager component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the File Manager component with accessibility tools.