Build your web apps using Smart UI
Smart.ListMenu - Accessibility
ListMenu provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-haspopup, aria-orientation and others. They are applied to the corresponding elements inside the template of the components.
The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.
The ListMenu component is a type of control that offers a list of choices to the user. It has the role "menu" which is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application.
The following ARIA attributes are used in the ListMenu:
- aria-disabled - indicates that interaction with the ListMenu is disabled.
- aria-hidden - indicates that the element does not take part in the interaction with the ListMenu and will not be mapped to the accessibility API. For example, the container with the arrow icons of the scroll and navigation buttons.
- aria-level - indicates the nesting level of the header inside the ListMenu.
- aria-orientation - applied to the ListMenu to indicate that the menu is vertically oriented.
- aria-label - defines a string value that labels the elements that provide information or user interaction. Such elements that have a label are the navigation arrows located in the header or the scroll buttons of the ListMenu.
- aria-labelledby - applied to the menu, indicates that the component has a specific element, called "title" that labels it. The attribute points to the id of the "title" element.
- aria-haspopup - indicates that a menu items group has a popup that can be triggered.
- aria-expanded - indicates whether a menu items group is expanded or not.
- aria-describedby - indicates that a menu item is described by another element known as a "shortcut". This attribute references the ID of the element that describes the MenuItem.
- aria-owns - indicates that one element is the owner of another that is not part of it's hierarchical tree. For example, when the ListMenu is collapsed, a "hamburger" icon button is displayed that opens that actual menu when clicked. The "hamburger" button is the actual parent of the ListMenu.
The following keyboard shortcuts are available to interact with the ListMenu:
|Enter||Selects the currently focused item from the list menu or opens the list menu if minimzed and the "hamburger" button is focused.|
|Space||Toggles a checkbox item from the list menu that is currently focused.|
|End||Focuses the last item from the list menu.|
|Home||Focuses the first item from the list menu.|
|Escape||Closes the list menu if it's minimized and opened or navigates back to the previous list menu group.|
|Page Down/Up||Focuses the last/first item from the next/previous page from the menu by scrolling to the item.|
|Arrow Down/Up||Focuses the next/previous item from list menu.|
|Arrow Left/Right||Navigates to the previous/next possible list group. For example, if the currently hovered list item is a group the user can navigate to it and view it's items or navigate out of it and view the previous list group.|
Additional information on WAI-ARIA for the SMART Framework can be found here.