Main content

tab

Characteristics

Superclass Role:

  • sectionhead
  • widget

Required Context Role:

  • tablist

Supported States and Properties:

  • aria-selected (state)

Inherited States and Properties:

  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-describedby
  • aria-disabled (state)
  • aria-dropeffect
  • aria-expanded (state)
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant

Name From:

  • contents
  • author

A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.

A tab (role) is used to represent the tab item in a tab panel. Screen readers are expected to jump to a more comfortable mode than virtual mode to access the tab panels, for informing the screen reader user about this change, role application is used. The active tab is notified to the user using aria-selected="true". The element that has tab role is owned by tablist role and the same is notified using aria-owns attribute.

Authors should ensure the tabpanel associated with the currently active tab is perceivable to the user. The association can be made available to the user with aria-labelledby property or aria-controls property.

If a tabpanel or item in a tabpanel has focus, the associated tab is the currently active tab in the tablist. tablist elements, which contain a set of associated tab elements, are typically placed near a series of tabpanel elements, usually preceding it. 

Authors must ensure elements with role tab are contained in, or owned by, an element with the role tablist.

Authors should ensure the tabpanel associated with the currently active tab is perceivable to the user.

For a single-selectable tablist, authors should hide other tabpanel elements from the user until the user selects the tab associated with that tabpanel. For a multi-selectable tablist, authors should ensure each visible tabpanel has its aria-expanded attribute set to true, and that the remaining hidden tabpanel elements have their aria-expanded attributes set to false.

In either case, authors should ensure that a selected tab has its aria-selected attribute set to true, that inactive tab elements have their aria-selected attribute set to false, and that the currently selected tab provides a visual indication that it is selected. In the absence of an aria-selected attribute on the current tab, user agents should indicate to assistive technologies through the platform accessibility API that the currently focused tab is selected.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_PAGETAB

UI Automation ControlType Property: 

  • TabItem

UI Automation AriaRole Property: 

  • tab
More in this category: « tablist structure »