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

ListBox provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-controls, 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 ListBox component allows the user to select one or more items from a list of choices. The items inside the list are static and may contain images or other custom content. They have a role "option" applied to them and can be focused via the keyboard.

The following ARIA attributes are used in the ListBox:

  • aria-disabled - indicates that interaction with the ListBox is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the ListBox and will not be mapped to the accessibility API. For example, the placeholder is hidden when there are items inside the list and doesn't provide any feedback to the user.
  • aria-selected - indicates whether a list item inside the ListBox is currently selected item.
  • aria-orientation - applied to the ListBox element to indicate that the list is vertically oriented.
  • aria-label - defines a string value that labels the elements that provide information or user interaction. In practise, this attribute labels the filter input, the loader that is displayed when dynamically loading items.
  • aria-labelledby - applied on the list items to indicate that they have a dedicated element that labels them.
  • aria-multiselectable - indicates whether the ListBox allows multiple selection or not.
  • aria-setsize - applied to each list item when virtualization is enabled to indicate the total number of items in the list.
  • aria-posinset - applied to each list item when virtualization is enabled to indicate the index of the item according to their position in the list.

Keyboard Interaction

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

Key Action
Enter/Space Selects the currently focused item from the list when the selectionMode allows multiple or no selection.
End Selects the Last item from the list.
Home Selects the First item from the list.
Escape Cancels an ongoing item editing operation.
Page Down/Up Focuses/Selects the last/first item from the next/previous page from the list by scrolling to the item.
Arrow Down/Up Focuses/Selects the next/previous item from list.
Shift + Arrow Down/Up/Mouse click Selects multiple items in the according direction from the list or by clicking with the mouse on the items. Applicable only to oneOrManyExtended selectionMode.
Control + Mouse Click Allows to select multiple items from the list by clicking with the mouse on the items. Applicable only to oneOrManyExtended selectionMode.

Additional information on WAI-ARIA for the SMART Framework can be found here.