Accessibility in EJ2 TypeScript File Manager component

24 Jan 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 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
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - 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 details 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.

See also