Tabs

Owned by Derek Matthew
Last updated: Oct 28, 2022 by Joseph McLartyVersion comment
3 min read

Tabs allow users to alternate between different, but related sections of content within the same page. Tabs also allow content to be chunked into different sections, each with a label.

When To Use

Use tabs when users don't need to see content from multiple tabs at once. All the tabs should reflect similar and equal groupings of information. Tabs must be composed of more than one section. If there is only one section do not use a tab.

Design

Note: values in brackets may change as we are relying more on CSS Variables. They are correct at the time of writing

tab-title-background:  --color-background-light (#ecedee)
tab-title-selected-background:  --color-selected (#165788)
tab-title-hover: underline
tab-title-padding: --padding-default(10px)

tab-content-border: --color-border-dark (#828a90); 1px solid
tab-content-border-top: --color-primary (#165788); 2px solid
tab-content-padding: --padding-default (10px)

tab-button-controls-background: --color-secondary (#8bacc4)
tab-button-controls-border: #ffffff; 2px solid

Tab Components/Features

Navigational Arrows (small screen only)

Navigational arrows are used to switch between tabs.

Tab Label

               Tab labels should be one to two words maximum. They should be written in plain language and must be title case format.


Accessibility Criteria

Follow the Tabs with Manual Activation example from the ARIA Authoring Practices Guide (APG) Tabs design pattern.

An accessible tab component that is properly implemented per WAI-ARIA authoring practices (i.e. all the ARIA roles must be there and all the keyboard interactions must be implemented) will result in a more predictable experience for users, Provide programmatic links between the tabs and their tab panel content and provide programmatic indication of state.

Considerations

  • Screen reader users want to be informed about the tab component and be able to access its contents.:

    • Screen readers should announce the number of tabs when the user begins interacting with the component.
    • Each tab should be announced as it receives focus and have a clear focus indication state.
    • Currently the activated tab is indicated visually (active state style) and programmatically (aria-current attribute) and announced by screen reader.
    • Only the content for the currently activated tab panel can be accessed by the screen reader.
  • Keyboard users want to be able to control and access the tabs interface with logical keyboard commands:
    • Keyboard users can navigate between tabs with arrow keys.
    • Keyboard users can directly access the tab panel content for the currently active tab using the tab key.

Keyboard interaction

Keyboard interactions to follow APG Tab design pattern:

For the tab list:

  • Tab:
    • 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 (See note below).
    • 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 (See note below).
  • 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 (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
    • End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
    • Shift + F10: If the tab has an associated popup menu, opens the menu.
    • Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, e.g., the deleted tab was the right-most tab in a left-to-right horizontal tab list, sets focus on and optionally activates the tab that preceded the deleted tab. If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list, the application moves focus to another element that provides a logical work flow. As an alternative to Delete, or in addition to supporting Delete, the delete function is available in a context menu.

How To Use

The City of Toronto has an accessible component library COTUI.