Pricing pages are where accessibility shortcuts cost money. If a screen-reader user cannot tell which price belongs to which plan, they leave. Here is what the most common patterns sound like, and how to fix each.
Cards: the most common pattern#
Three cards side by side look clear. Read aloud, a typical implementation announces “29, per month, Start free, 79, per month, Start free” — numbers without context. The fix is a heading in each card that names the plan, placed before the price.
| Pattern | What a screen reader says | Fix |
|---|---|---|
| Cards without headings | “29, per month, button Start free” | Add an h3 with the plan name first |
| Ticks as icons only | “image, image, image” | Add visually hidden text: “Included” |
| Toggle without a state | “button Annual” | Use aria-pressed or a radio group |
The comparison table#
Below the cards, most pages compare features. That is tabular data, and a table with th scope="col" for plans and th scope="row" for features lets a screen reader announce “Pro, Custom domains, Included” for every cell.
<table>
<thead><tr><th></th><th scope="col">Free</th><th scope="col">Pro</th></tr></thead>
<tbody>
<tr><th scope="row">Custom domains</th><td>—</td><td>Included</td></tr>
</tbody>
</table>The monthly/annual toggle#
A toggle that changes every price on the page needs to say which state it is in. Two radio buttons labelled Monthly and Annual are the simplest accessible version, and they are what our pricing sections ship with.
None of these fixes change how the page looks. They change what it says to the people who cannot see it — which, on a pricing page, is the difference between a customer and a bounce.