<tab-container> Custom Element — An Accessible Tab Container Element with Keyboard Support

Built by GitHub is <tab-container>, a Custom Element that defines an accessible tab container element with keyboard support and that also follows the ARIA best practices guide on tabs.

Upon importing the package it will register the Custom Element, so you can use it immediately:

  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab one</button>
    <button type="button" role="tab" tabindex="-1">Tab two</button>
    <button type="button" role="tab" tabindex="-1">Tab three</button>
  <div role="tabpanel">
    Panel 1
  <div role="tabpanel" hidden>
    Panel 2
  <div role="tabpanel" hidden>
    Panel 3

Installation possible per NPM:

npm install @github/tab-container-element

… or import it directly off of Skypack

import "https://cdn.skypack.dev/@github/tab-container-element";

<tab-container> Source →
<tab-container> Demo →

Avoiding tab styles for navigation

Adam Silver, who works at/with the fine folks at GOV.UK:

Tabs should only look like tabs if they behave like tabs otherwise it can be in disorienting and confusing for users.

Shown above is the old layout that featured the tabs (which are actually links, here). The new version still has the links in place at the same position, but they’ve styled them differently so that the look less like tabs.

Avoiding tab styles for navigation →

IMcD23/TabView – Easily add multiple tabs to your iOS app, styled similar to Safari for iPad.

There are two primary view controllers in this library: TabViewController and TabViewContainerViewController. A TabViewController contains an array of tabs, a visible tab, and some methods to add and remove tabs. A TabViewContainerViewController contains TabViewControllers.

IMcD23/TabView (GitHub) →

(via Louis D’hauwe)