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

ComboBox provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-expanded, aria-hidden 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 ComboBox element has a default role "combobox" applied. This type of elements are standartized and follow the specific ARIA combobox design pattern using a lisbox popup. The Listbox contains information specific to it's role and behavior.

The following ARIA attributes are used in the ComboBox:

  • aria-disabled - indicates that interaction with the ComboBox is disabled.
  • aria-hidden - applied to elements from the internal structure of the ComboBox that do not take part in the interaction with the component and should not be mapped to the accessibility API. For example, the arrow icon inside the drop down button that doesn't affect the behavior of the element thus doesn't provide information for the assistive technology.
  • aria-haspopup - indicates that the ComboBox has a popup that can be triggered. In practice, it is applied to the element itself to indicate that the popup with the list items can be opened.
  • aria-autocomplete - indicates whether inputting text could trigger display of one or many predictions of the user's intended value for an input. There are several values for the autocomplete behavior depending on the ComboBox's autocomplete mode:
    • none - when a user is providing input, an automatic suggestion that attempts to predict how the user intends to complete the input is not displayed. Default option.
    • list - when a user is providing input, the popup containing the collection of values that could complete the provided input may be displayed.
    • both - when a user is providing input, the popup containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.
  • aria-activedescendant - identifies the currently active list item from the popup.
  • aria-selected - applied to the List items that are used inside the popup of the ComboBox to indicate those that are currently selected.
  • aria-orientation - applied to the ScrollBar and Listbox elements inside the template of the ComboBox, this attribute indicates their orientation. For example, there is a horizontal and a vertical scrollbar inside the popup.
  • aria-valuemax - applied to the ScrollBar elements inside the popup of the ComboBox. Used to indicate the maximum scroll value.
  • aria-valuemin - applied to the ScrollBar elements inside the popup of the ComboBox. Indicates minimum scorll value of the element.
  • aria-valuenow - applied to the ScrollBar elements inside the popup of the ComboBox. Used to indicate the current scroll value of the element.
  • aria-owns - used to indicate that the ComboBox is the parent owner of the popup. Since the DOM hierarchy cannot be used to represent the relationship between the popup and the ComboBox, the property is used to indicate their visual, functional and contextual parent/child relationship.
  • aria-describedby - indicates that there's a specific hint container that describes the ComboBox's value.
  • aria-label - labels the input, the popup, the container that contains the label for the ComboBox and other elements from it's template.
  • aria-labelledby - identifies the element that labels the ComboBox.
  • aria-expanded - indicates that the popup of the ComboBox is expanded.

Keyboard Interaction

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

Key Action
Enter Selects an item from the popup or opens the popup if the drop down button is focused.
End Selects the Last item from the popup.
Home Selects the First item from the popup.
Escape Closes the popup.
Page Down/Up Selects the last/first item from the next/previous page from the popup list by scrolling the list if necessary.
Arrow Down/Up Focuses/Selects the next/previous item from the popup list.
Shift + Arrow Down/Up/Mouse click Selects multiple items in the according direction from the popup 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.