Use case

The TabBar, Tab, and TabBarVIew widgets require roles, ARIA properties, and expected keyboard support to meet accessibility compliance requirements outlined in the Web Content Accessibility Guidelines (WCAG).

Proposal

WAI-ARIA Roles, States, and Properties

TabBar Widget

• Use role="tablist" on the container element
• Provide a label for the tab group by using aria-label OR aria-labelledby="[IDREF]" on the container element, with [IDREF] referencing the unique ID of the element that describes the purpose of the tab group
• If the tablist element is vertically oriented, it has the property aria-orientation="vertical". The default value of aria-orientation for a tablist element is horizontal

Tab Widget

• Use role="tab" on each tab
• Use aria-controls="[IDREF]" on the tab element, with [IDREF] referencing the unique ID of the tabpanel element associated with the tab
• When a tab is active (i.e. its corresponding panel is currently displayed): Use aria-selected="true" on the tab element
• When a tab is inactive (i.e. its corresponding panel is NOT currently displayed): Use aria-selected="false" on the tab element
• If a tab element has a popup menu, it has the property aria-haspopup set to either menu or true

TabBarView Widget

• Use role="tabpanel" on the element that serves as a container for tab panel content
• Provide an accessible name for the tab panel by using aria-label OR aria-labelledby="[IDREF]" on the container for the tab panel content, with [IDREF] referencing the unique ID of the tab element that controls the panel

Keyboard Interaction

Tab Key

• When focus moves into the tab list, places focus on the active tab element
• When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable

When focus is on a tab element in a horizontal tab list:

• Left Arrow: Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab
• Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab

When focus is on a tab in a tablist with either horizontal or vertical orientation:

• Space or Enter: Activates the tab if it was not activated automatically on focus
• Home : Moves focus to the first tab. Optionally, activates the newly focused tab
• End: Moves focus to the last tab. Optionally, activates the newly focused tab
• Shift + F10: If the tab has an associated popup menu, opens the menu