Altwise

Tabs and toggle switches accessibility: service tabs, menu tabs and monthly/yearly pricing switches

How to make tabs and toggle switches usable for keyboard, screen reader and phone visitors: named tabs with a selected state, keyboard support, real monthly/yearly controls, prices that say what changed, and when headings are better.

Small business sites use tabs and toggle switches all the time: "Residential | Commercial" tabs on a services page, "Lunch | Dinner | Drinks" tabs on a restaurant menu, a "Monthly / Yearly" switch on a pricing page, or "Show prices with tax" toggles. They look simple, but a tab row built from plain boxes, or a switch that only changes colour, often can't be used by keyboard or screen reader visitors. This guide covers what to check, whichever website builder or theme you use.

1. Tabs should say what they are and which one is open

A screen reader user needs to hear that this is a set of tabs, which tab is selected, and how many there are, for example "Commercial, tab, 2 of 3, selected" (WCAG 4.1.2, 1.3.1). The selected tab should also look different in more than colour alone, such as an underline or bold text (WCAG 1.4.1).

<div role="tablist" aria-label="Our services">
  <button role="tab" id="t-res" aria-selected="true" aria-controls="p-res">Residential</button>
  <button role="tab" id="t-com" aria-selected="false" aria-controls="p-com" tabindex="-1">Commercial</button>
</div>
<div role="tabpanel" id="p-res" aria-labelledby="t-res" tabindex="0">...</div>
<div role="tabpanel" id="p-com" aria-labelledby="t-com" hidden>...</div>

If you add tab roles, you also need the matching keyboard behaviour below. Half-done tab code can be worse than none.

2. Tabs must work with a keyboard

People should be able to reach the tab row with Tab, move between tabs, open one, and then Tab into its content (WCAG 2.1.1). The common pattern is arrow keys to move between tabs, as described in the W3C tabs pattern. Whichever way it works, focus must be visible at every step (WCAG 2.4.7).

3. When in doubt, use headings instead

Tabs hide content. If the sections are short, or people usually want to compare them, plain headings on one page are easier for everyone and better for search, because nothing is hidden. On phones, many sites switch tabs to stacked sections or an accordion; see FAQ accordions and show/hide sections.

4. Monthly / yearly and other toggle switches

A pricing switch should be a real control with a name and a state, such as a pair of radio buttons ("Billed monthly", "Billed yearly") or a button with aria-pressed, or a switch with role="switch" and aria-checked (WCAG 4.1.2). The labels must be visible text, not only "On" and "Off" or a sliding dot. Don't make dragging the knob the only way to change it (WCAG 2.5.7).

<fieldset>
  <legend>Billing</legend>
  <label><input type="radio" name="billing" value="monthly" checked> Billed monthly</label>
  <label><input type="radio" name="billing" value="yearly"> Billed yearly</label>
</fieldset>

5. Say what changed

When a toggle changes every price on the page, sighted visitors see the numbers change, but screen reader users may not. Make each price readable in full, such as "$29 per month, billed yearly", and consider a short status message like "Showing yearly prices" (WCAG 4.1.3). Don't move focus or reload the page just because a tab or switch changed, unless people know it will happen (WCAG 3.2.2). See pricing tables, hours and menus.

6. Phones, zoom and tap size

Tab rows often run off the edge of a phone screen, hiding the last tab. Check at 200% zoom and on a narrow screen that every tab can be seen and reached, and that wrapped tabs still make sense (WCAG 1.4.10). Make tabs and switches big enough to tap (WCAG 2.5.8), and keep the text and focus outline readable against the background (WCAG 1.4.3, 1.4.11).

7. Links straight to a tab

If you send customers to "our commercial services", a link that always opens the first tab makes them hunt. Where your builder allows it, give each tab its own address, or use separate pages for big sections.

Common mistakes

A 5-minute check you can do today

  1. Press Tab to your tab row or switch. Can you see where you are, change tabs or billing, and reach the content after it?
  2. Turn on VoiceOver or TalkBack: does it say the tab name, that it's selected, and the switch's state? See the 10-minute screen reader test.
  3. Flip the pricing switch. Does each price say per month or per year in words?
  4. Look at the tabs in black and white (or squint): can you still tell which is selected?
  5. Open the page on a phone and zoom to 200%: are all tabs visible?

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag tab and switch controls with no accessible name, some invalid ARIA (like a tab outside a tablist), and many contrast problems. It can't press arrow keys, check that a price change is announced, or judge whether hiding content in tabs makes sense, and it can't tell whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your services and pricing pages, and gives copy-paste fixes for your platform.

Building tabbed service pages or pricing tables for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any website builder or theme.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.