Build your web apps using Smart UI
Smart.Menu - Accessibility
Menu 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.
With a role "menu" applied to the component, this indicates that the control offers a list of choices to the user and the items are presented in a manner similar to a desktop application menu. The menu contains items with the role "menuitem" applied to them.
The following ARIA attributes are used in the Menu:
- aria-checked - applied to a checkable menu item to indicate that it is marked as checked.
- aria-disabled - indicates that interaction with the Menu is disabled.
- aria-hidden - indicates that the element does not take part in the interaction with the Menu 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 menu items groups.
- aria-orientation - applied to the Menu to indicate it's orientation. The menu can be vertically or horizontally oriented depending on the mode property.
- 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 button arrows located in the header or the scroll buttons of the Menu.
- 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 an element is the owner of another that is not part of it's hierarchical tree. For example, when the Menu is collapsed, a "hamburger" icon button is displayed that opens that actual menu when clicked. The "hamburger" button is the actual parent of the Menu.
The following keyboard shortcuts are available to interact with the Menu:
|Enter||Selects the currently focused item from the menu or opens a popup if minimzed and the "hamburger" button is focused.|
|Space||Toggles the state of a menu item from the is currently focused if the checkMode of it's group is checkBox or radioButton.|
|End||Focuses the last item from the menu.|
|Home||Focuses the first item from the menu.|
|Escape||Closes the currently opened menu item popup.|
|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 the menu when mode is vertical, or opens the corresponding menu item popup that is currently focused.|
|Arrow Left/Right||Navigates to the previous/next possible item group. For example, if the currently hovered menu item is a group the user can navigate to it and view it's items or navigate out of it and view the previous/next group.|
Additional information on WAI-ARIA for the SMART Framework can be found here.