Accessibility in Blazor FileManager Component

10 Jun 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 Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Partial - Some features of the component do not meet the requirement.
No - 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.

See also