Accessibility in Blazor FileManager Component
29 Nov 20247 minutes to read
The Blazor FileManager component has been designed with keeping the WAI-ARIA specifications in mind, and applied the WAI-ARIA roles, states, and properties along with keyboard support. This component is characterized by complete keyboard interaction support and ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT) or for users who completely rely on keyboard navigation.
The Blazor FileManager 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 Blazor FileManager 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 | |
| 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 Blazor FileManager component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the FileManager component:
| Attributes | Purpose |
|---|---|
| aria-disabled | Indicates whether the File Manager component is in disabled state. |
| aria-haspopup | Indicates whether the Toolbar element has a suggestion list. |
| 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 | Defines a string that labels the current element. |
| aria-checked | Indicates whether the checkbox is in checked state. |
| aria-labelledby | Labels the dialog. Often, the value of the aria-labelledby attribute will be the id of the element, which is used to title the dialog |
| aria-describedby | Describes the contents of the dialog. |
| aria-modal | Indicates whether an element is a modal when displayed. |
| aria-colcount | Specifies the number of columns in full table. |
| aria-colindexnt | Defines the number of columns within a grid. |
| aria-rowspan | Defines the number of rows a cell spanned within a grid. |
| aria-colspan | Defines the number of columns a cell spanned within a grid. |
| aria-sort | Indicates whether items in the grid or table are sorted in ascending or descending order. |
| aria-grabbed | This attribute is set to true, and it has been selected for dragging. If this element is set to false, the element can be grabbed for a drag-and-drop operation, but will not currently be selected. |
| aria-busy | This attribute is set to false when grid content is loaded. |
| aria-multiselectable | Defines more than one item has been selected. |
Keyboard interaction
You can use the following key shortcuts to access the File Manager without interruptions.
| Keyboard shortcuts | Actions |
|---|---|
| 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. |
| Ctrl+Shift+1 | Changes the file manager layout to Grid view. |
| Ctrl+Shift+2 | Changes the file manager layout to Details view. |
Ensuring accessibility
The Blazor FileManager component’s accessibility levels are ensured through an axe-core software tool during automated testing.
The accessibility compliance of the FileManager component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the FileManager component with accessibility tools.