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

DropDownButton provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-haspopup, aria-expanded 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 DropDownButton represents a button(s) that opens a popup when clicked. As such it has the role "button" applied along with additional ARIA attributes to describe the different components of the element and it's behavior.

The following ARIA attributes are used in the DropDownButton:

  • aria-disabled - indicates that the interaction with the DropDownButton is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the DropDownButton 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 DropDownButton has a popup that can be opened at any time.
  • aria-orientation - applied to the ScrollBar elements inside the popup of the DropDownButton, 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 DropDownButton. Used to indicate the maximum scroll value.
  • aria-valuemin - applied to the ScrollBar elements inside the popup of the DropDownButton. Indicates minimum scorll value of the element.
  • aria-valuenow - applied to the ScrollBar elements inside the popup of the DropDownButton. Used to indicate the current scroll value of the element.
  • aria-owns - used to indicate that the DropDownButton is the actual parent of the popup. DOM hierarchy cannot be used to represent the relationship between the popup and the DropDownButton so the property is used to indicate their visual, functional and contextual parent/child relationship.
  • aria-describedby - identifies the element that describes the DropDownButton component.
  • aria-labelledby - identifies the element that labels the DropDownButton.
  • aria-expanded - indicates that the popup of the DropDownButton is expanded.

Keyboard Interaction

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

Key Action
Enter Open/Close the popup.
End Scrolls to the bottom of the popup container, if opened.
Home Scrolls to the top of the popup container, if opened.
Page Down/Up Scrolls the popup container to the next/previous page, if opened.
Space Opens the popup.
Escape Closes the popup.

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