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

DropDownList 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 DropDownList acts as a button(s) with a popup. As such it has the role "button" applied along with additional ARIA attributes to describe the behavior of the component.

The following ARIA attributes are used in the DropDownList:

  • aria-disabled - indicates that interaction with the DropDownList is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the DropDownList and will not be mapped to the accessibility API. For example, the arrow icon inside the drop down button doesn't provide information for the assistive technology so it should be ignored.
  • aria-haspopup - indicates that the DropDownList has a popup that can be opened at any time.
  • aria-activedescendant - identifies the currently active list item from the popup.
  • aria-selected - used by the ListBox that is used inside the popup of the DropDownList. Indicates the item from the popup that is currently selected.
  • aria-orientation - applied to the ScrollBar and Listbox elements inside the template of the DropDownList, 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 DropDownList. Used to indicate the maximum scroll value.
  • aria-valuemin - applied to the ScrollBar elements inside the popup of the DropDownList. Indicates minimum scorll value of the element.
  • aria-valuenow - applied to the ScrollBar elements inside the popup of the DropDownList. Used to indicate the current scroll value of the element.
  • aria-owns - used to indicate that the DropDownList is the actual parent of the popup. DOM hierarchy cannot be used to represent the relationship between the popup and the DropDownList so the property is used to indicate their visual, functional and contextual parent/child relationship.
  • aria-describedby - indicates that there's an element that describes the value of the DropDownList component.
  • aria-label - defines a string value that labels the elements that provide information or user interaction. In practise, this attribute labels the input, the popup, the container that contains the label for the DropDownList and other elements from it's template.
  • aria-labelledby - identifies the element that labels the DropDownList.
  • aria-expanded - indicates that the popup of the DropDownList is expanded.

Keyboard Interaction

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

Key Action
Enter/Space Selects the currently focused item from the popup or opens the popup if closed.
End Selects the Last item from the popup, if opened.
Home Selects the First item from the popup, if opened.
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 to the item.
Arrow Down/Up Focuses/Selects the next/previous item from the popup list, if opened.
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.