Accessible Components

Tabs

Tabs image

Definition

Tabs or Tabbed Interfaces are groupings of content that display one specific piece of content at a time, called a Tab panel. A user interacts with a list of Tab elements—also known as a Tab list—which can be displayed on any side of the Tab panel. For better user interactions, Tab lists are typically located on the top Tab panel.

Here are a few Tab terms to remember:

  • Tab List
    • An element that wraps a list of Tab elements
  • Tab
    • Elements that are contained within the Tab list itself. These are the descriptive element a user will interact with 
    • When a specific Tab element is activated, the corresponding Tab panel content will be displayed
    • The focus area will default to the first Tab element in the Tab list order
  • Tab Panel
    • An element that displays the primary content for the activated Tab element
  • Activated Tab
    • An element has unique style indicators to notify the user which Tab and corresponding Tab panel content is currently being viewed and is active

Usage Guidelines

Tabs are elements typically used when large bodies of content have some underlying connection and are easily separated in nature. Tabs are great ways to approach accessible content without sacrificing space on a page.

Let’s quickly talk about aria-roles and tabindex usage. The first rule of Aria is “don't use Aria.” The overuse of aria-roles can be just as gross of an experience as content that doesn't have any. So use them only when it is needed and follows best practices.

Also, be wary of changing elements' default tabindex values. Changing these can result in loss of access to content and creating content flows that are difficult to navigate with assistive technologies. Ensure that when these changes occur, you’re vigilant when user testing.

Finally, remember that in most cases—but not all—a Tab list will be aligned at the top of the Tab panel. Especially with mobile and tablet screen sizes. 

Best Practices for Horizontal Tab List elements (default orientation value for Tab lists)

  • Left Arrow: moves focus to the previous Tab element 
    • If the currently activated Tab element is the first in the Tab list the focus should shift to the last Tab element
  • Right Arrow: moves focus to the next Tab element 
    • If the currently activated Tab element is the last in the Tab list the focus should shift to the first Tab element

Best Practices for Vertical Tab List elements

  • Down Arrow: moves focus to the previous Tab element 
    • If the currently activated Tab element is the first in the Tab list the focus should shift to the last Tab element
  • Up Arrow: moves focus to the next Tab element 
    • If the currently activated Tab element is the last in the Tab list the focus should shift to the first Tab element
  • Note: If the Tab List is vertical in orientation to the Tab panel, the Tab list must also have a role aria-orientation set to vertical
Sparkbox logo

Focus Expectations

  • Tabbable Elements have visible focus states
  • Standard practice dictates that when the focus state leaves the currently activated Tab element it should not move directly to the next Tab element in the Tab List order, but it should move to its corresponding Tab panel 
  • Tab panels allow for proper progression of focus states depending on the nested content 
    • When the current focus state is on a Tab panel and there is no focusable content within that element and the focus state should move to the next focusable element on the page

Semantic Elements

  • Tab List 

    • <ul> or  <ol>
    • <nav>
    • <menu>
    • <div> (should be used only when no other semantic element is available)

  • Tab Element

    • if Tab List is <ul> or <ol> the Tab element must be <li>
    • If Tab List is <nav> the Tab element must be <a>, <div>
    • If Tab List is <menu> the Tab elements could be <li>, <script>, or <template>
    • If the Tab list is a <div>, the Tab element is most flexible and ensures that the Tab elements nested within the <div> are semantic and have the appropriate roles and Aria attributes-attributes

  • Tab Panel

    • <article>
    • <section>
    • <div> (should be used only when no other semantic element is available)

ARIA Roles and Attributes

  • Tab List

    • The role tablist is applied to the element containing the Tab elements
    • When providing a role of tablist to the element, there MUST be a direct child/children with the role ‘tab`
    • If the Tab list element has a visual <label> or <heading> element, aria-labeledby must also be applied to the Tab list element with a value that accurately represents the <label>  or <heading> element

  • Tab Element

    • The role tab is applied to Tab elements which will be a direct child/children of the element containing the role tablist
    • Tab elements have the role of aria-controls with a value that is pointed at the id of its corresponding Tab panel (check additional resources –aria-controls)
    • Tab elements have an aria-selected role, and the currently activated Tab element should have the value of true otherwise a value of false

  • If a popup menu is associated with a Tab element, ensure it has the property aria-haspopup set to either menu or true (check additional resources –aria-haspopup)

  • Tab Panel 

    • The Tab panel element should have an aria-labeledby role with the value of the Tab element id associated with it
    • The Tab panel should have a default value of tabindex="0" to include it in the tab sequence of the page unless there are other focusable elements nested in the content or the first element with content is focusable

Keyboard Interactions

  • Tab: moves focus to the next focusable element
  • Shift + Tab: moves focus to the previous focusable element
  • Enter or Space: activates the first tab in Tab list if it was not activated automatically on focus
  • Shift + F10: opens any associated popup menus 
  • Home (optional): moves focus to the first Tab element
  • End (optional): moves focus to the last Tab element
  • Delete (optional): if the Delete option is available to users 
    • When pressed, the current activated Tab element and its associated Tab panel will close setting the focus on the next Tab element
    • If Delete is pressed on the last Tab element in the Tab list order, the focus state should revert to the previous (second to last) Tab element unless otherwise specified (below) by default
    • If otherwise specified, the users expect that the focus state will move to the next reasonable and focusable element on the page
      As an alternative to Delete, or in addition to supporting Delete, the delete function should be available in a context menu

Additional Resources

Related Components

AccordionDisclosure (Show/Hide)