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

Tabs provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-orientation, aria-controls and others. The role of the component is tablist. Tablists are tab elements that are references to elements with role tabpanel. Such elements are the items inside the Tabs component.

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 Tab component contains multiple controls like buttons, popups, tabs and each of the have a different roles:

  • tabpanel - the tab items inside the Tabs component are the action content containers. They contain the resources associated with a tab.
  • button - the buttons that allow to scroll through the tabs and the close buttons inside the tab elements.
  • tab - the grouping labels that provide a mechanism for selecting the tab content that is to be rendered to the user.
  • menu - the popups that are triggered by the tab elements. They contain other tabs that are part of a group.

The following ARIA attributes are in use by the component:

  • aria-disabled - indicates that the interaction with the Tabs component is disabled.
  • aria-hidden - indicates that an element does not provide feedback to the user and as such it does not take part in the accessibility support. The arrow icons inside the scroll and popup buttons located in the tab elements in the header have the attribute applied since they do not provide any accessibility information.
  • aria-controls - indicates that a tab controls the visibility of a tabpanel. The tab labels reference the tab items by their id using this attribute to indicate their relation.
  • aria-expanded - applied to tab groups to indicate whether the popup is expanded or not.
  • aria-haspopup - applied to tab groups to indicate whether the tab has a popup.
  • aria-owns - applied to a tab group to indicate that it is the actual parent of a popup that can be triggered. This attribute is used because the DOM hierarchy does not show the parent-children relationship between the tab group and the popup.
  • aria-label - applied to the tab elements in the header to label them by providing a textual definition. This attribute is also applied to the close and scroll buttons since they contain only an icon and have to provide a label for the assistive technology.
  • aria-orientation - applied to the Tabs component and the tab element popups to indicate their orientation. The orientation can be vertical or horizontal.
  • aria-selected - applied to the tab items to indicate whether they are selected or not.

Keyboard Interaction

The following keyboard shortcuts are available for interaction with the Tabs component:

Key Action
Arrow Left/Right/Up/Down Selects/Focuses the next/previous tab item.
Control + Arrow Left/Right/Down/Up Collapses/Expands the Tabs component, depending on the orientation.
End Focuses/Select the last tab item.
Enter/Space If allowToggle property is set, allows to select a tab item inside the header. If the item is a gorup, the popup will be triggered.
Escape Closes an an opened popup.
Home Focses/Selects the first tab item.

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