Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Tabs
Tabs are used to quickly navigate between views within the same context or page. Each tab's content is independently categorized and mutually exclusive of the content of other tabs.
Example
LettersNumbersPunctuationsABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()

See live code examples in Storybook
Usage

Use tabs to provide a way to switch between various related content that are grouped by logical connection in a single space. Tabs on narrow screens become a horizontally-scrollable area.

Best practices
Dos
  • Use tabs for sets of information that are related
  • Use short and concise text to label a tab
  • Use the Tab and Tab Panel component inside the Pharos Tabs component
  • Set the slot attribute on Tab Panel components to "panel"
Don'ts
  • Don't use tabs for sets of information that need to be accessed simultaneously
  • Don't have only a single tab
Content guidelines Panel
  • The content shown in the panels should have a logical connection to each other.
Tab
  • The text used for a tab should aim to be a single categorical word that explains the section of the overall content being viewed when selected.
States Tab Selected
  • The content shown in the panels should have a logical connection to each other.
Accessibility Relevant WCAG guidelines
  • 1.3.1 Info and Relationships A
  • 2.1.1 Keyboard
Importance

Tabs allow users to navigate through multiple sections of content easily

Code expectations

Via W3:

  • Element that is the container for the tab set has role="tablist"

    • The container element should also have an aria-label that describes the title or purpose of the grouping

  • Each individual element has role="tab"

    • Should be located within the container

  • The content section that populates when the tab is selected has role="tabpanel"

  • Each element with role="tabpanel" has the property aria-labelledby referring to its associated tab element

  • If tab list has visible label

    • The element with role="tablist" has aria-labelledby be the same as the value that refers to the labelling element

  • If tab list has no visible label

    • Tablist element has label provided by an aria-label

  • Each element with role="tab" has the property aria-controls referring to its associated "tabpanel" element

  • The tab in focus has aria-selected="true" and the others are labeled "false"

Expected actions
Screen reader

  • On first element it will read: "Name of tab, selected, tab, 1 of <total tabs>, <Title of grouping>, tab group" where the title of the grouping is provided by the aria-label attribute on the tab container element

  • On second element (and any tabs after) it will read: "Name of tab, selected, 2 of <total tabs>"

Keyboard
  • Tab: Moves from tab to correlating panel
  • Shift+Tab: Moves from panel to correlating tab
  • → ↓: Cycles forwards through tabs horizontally and vertically, respectively.
  • ← ↑: Cycles backwards through tabs horizontally and vertically, respectively.
  • Space Enter: activates the tab (if not automatically activated)