Menu Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

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.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the Menu:

Key Action
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.