ListMenu 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.

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.

Keyboard Interaction

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

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