OneTaskBy Tim King · Updated
Tabs Builder
Accessible Tabs in HTML, CSS and Vanilla JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Tabs Builder works
A tabs builder makes the row of buttons that switches between panels of content in the same spot. Enter your tab titles and text, choose underline, pill or boxed styling, and copy HTML, CSS and a short script that follows the accessible tabs pattern.
Tabs save space when content splits into a few parallel sections, such as product details, specifications and reviews, and visitors only need one at a time. They work best with two to six short labels; beyond that, an accordion or separate pages usually read better.
What the tabs builder makes accessible
The generated markup follows the WAI-ARIA tabs pattern. The row has role="tablist", each button
has role="tab" with aria-selected and aria-controls, and each panel has role="tabpanel"
linked back to its tab. Only the selected tab is in the Tab key order; the left and right arrow
keys move between tabs and Home and End jump to the first and last, which is how screen reader
users expect tabs to behave.
Styles
Underline tabs sit on a thin rule with a coloured bar under the selected tab, the common choice for page sections. Pills suit filters and compact cards. Boxed tabs look like folder tabs joined to the panel below. On narrow screens the tab row scrolls sideways instead of wrapping.
FAQ
Can I link directly to a tab?
Not with this script alone. Add a line that reads location.hash on load, finds the tab whose
aria-controls matches, and calls the select function on it. Then a link to #panel-3 opens the
third tab.
Should tabs switch on focus or on Enter?
The script switches as soon as an arrow key moves focus, called automatic activation, which suits panels that are already in the page. If each panel loads data from a server, change it to switch only on Enter or Space so arrowing past a tab does not start a request.
Is the hidden content indexed by search engines?
Yes. Panels are hidden with the hidden attribute but still in the HTML, so crawlers read them.
Put the most important content in the first tab anyway, because it is the one visitors and
previews see first.
How many tabs can I have?
The builder has no limit, but more than six labels usually overflow on phones and are hard to scan. The tab row scrolls sideways when it runs out of space, so nothing breaks, but an accordion is often the better pattern for long lists.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Vertical Tabs Builder
Build accessible side tabs that turn into a row on phones.
Accordion Builder
Build a smooth, accessible accordion from native details elements.
Card Builder
Design a card component and copy its HTML and CSS.
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.