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

MultiSplitButton provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-haspopup, aria-expanded, aria-owns 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 MultiSplitButton represents a group of buttons that fire an event when clicked. There's also a drop down button that triggers a popup.

MultiSplitButton has the role group applied while the buttons that are part of the component have role button.

The following ARIA attributes are used in the MultiSplitButton:

  • aria-disabled - indicates that the interaction with the MultiSplitButton is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the MultiSplitButton 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 MultiSplitButton has a listbox popup that can be triggered by the element.
  • aria-owns - used to indicate that the MultiSplitButton is the actual parent of the popup. DOM hierarchy does not indicate the relationship between the popup and the MultiSplitButton so the property is used to indicate their visual, functional and contextual parent/child relationship.
  • aria-describedby - identifies the element that describes the MultiSplitButton component. A separate element is used to hold the description for the MultiSplitButton. It appears below the element when focused.
  • aria-label - used to label the elements that allow user interaction but do not contain text. Such elements are the resize bar inside the popup which is used to resize it and the drop down button that triggers the popup.
  • aria-labelledby - identifies the element that labels the MultiSplitButton. A separate element that contains the label is displayed above the MultiSplitButton when the label property is applied.
  • aria-expanded - indicates whether that the popup of the MultiSplitButton is expanded(visible) or not.
  • aria-selected - used by the ListBox inside the popup of the MultiSplitButton. Indicates the list item that is currently selected.

Keyboard Interaction

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

Home Scrolls to the top of the popup container and selects/focuses the first item from the list, if opened.
Key Action
Enter Open/Close the popup.
End Scrolls to the bottom of the popup container and selects/focuses the last item from the list, if opened.
Escape Closes the popup.
Page Down/Up Scrolls the popup container to the next/previous page and selects/focuses the first/last item, if opened.
Space Selects an item from the popup list.
Shift + Arrow Down/Up/Mouse click Allows to select multiple items in the according direction from the popup list or by clicking with the mouse on the items. Applicable only for oneOrManyExtended selectionMode.
Control + Mouse Click Allows to select multiple items from the list by clicking with the mouse on them. Applicable only to oneOrManyExtended selectionMode.

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