EspañolAccessible tabs generator
Write the title and content of each tab, choose the style and copy. The preview can be tested with the mouse and the arrow keys.
How to useTabs that work with the keyboard
Available in: 
Accessible tabs generator: what it is for
Tabs organize content such as a product's description, sizes and shipping in a small space. Built carelessly, they become impossible to use with a keyboard or screen reader.
The generator follows the WAI-ARIA Authoring Practices Tabs pattern: tablist, tab with aria-selected and tabpanel linked by aria-controls and aria-labelledby, only the active tab in the Tab order and navigation with the arrow keys, Home and End. Panels are only hidden once the script loads. You choose the underlined or pill style and the color.
How to use
- Write the title and content of each tab.
- Choose the style and color.
- Test it in the preview and copy the code.
When to use it
- Product details in an online store.
- Plans or services side by side.
- Event information.
Frequently asked questions
What makes tabs accessible?
Following the WAI-ARIA Tabs pattern: the list has role=tablist, each tab is a button with role=tab and aria-selected, and each panel has role=tabpanel linked to its tab by aria-controls and aria-labelledby. Only the active tab is in the Tab order; between tabs people move with the arrow keys.
What if JavaScript does not load?
The code only hides the panels after the script runs. Without JavaScript, all the content appears one below the other, and nothing becomes inaccessible.
Tabs or accordion?
Tabs work well with a few short titles on desktop. With many items or long texts, especially on phones, an accordion (questions that open and close) is usually better.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.