Accessible tables for prices, opening hours and menus: a 5-minute test and fixes

Small-business sites are full of tables: price lists, opening hours, class timetables, menus, and "Basic vs Pro" comparison charts. Sighted visitors scan the rows and columns without thinking. Screen reader users can only follow a table if the code says which cells are headers, and phone users can only read it if it fits the screen or scrolls cleanly. Here's how to check yours and what to change.

The 5-minute table test

1. Is it real text? Try to select a price with your mouse. If you can't, the table is an image or a PDF and screen readers get nothing (or only the alt text). Put it on the page as text. (WCAG 1.1.1)
2. Does it have header cells? Row and column labels ("Service", "Price", "Monday") should be <th> cells, not bold <td> cells. Otherwise a screen reader reads "$45" with no idea what it belongs to. (WCAG 1.3.1)
3. Does it say what it is? A <caption> such as "Haircut prices" or "Opening hours" lets screen reader users decide whether to read it.
4. Is it only used for data? Tables used to lay out a page (a photo in one cell, text in another) can be read in a confusing order. Use your builder's columns instead. (WCAG 1.3.2)
5. Does it fit on a phone and at 400% zoom? Narrow your browser or zoom to 400%. The page itself shouldn't need sideways scrolling; a wide data table may scroll inside its own box. (WCAG 1.4.10)
6. Can you scroll it with the keyboard? If the table scrolls in its own box, press Tab until the box is focused and use the arrow keys. If you can't reach it, keyboard users can't see the hidden columns. (WCAG 2.1.1)
7. Is colour the only signal? "Green ticks mean included" or a highlighted "most popular" column needs words too, such as "Included" or "Most popular". Check text contrast as well. (WCAG 1.4.1, 1.4.3)

HTML you can copy: a price list

One row of headers across the top, and the first cell of each row marked as a row header. This follows the W3C tables with two headers tutorial:

<table>
  <caption>Haircut prices</caption>
  <thead>
    <tr><th scope="col">Service</th><th scope="col">Time</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Men's cut</th><td>30 minutes</td><td>$35</td></tr>
    <tr><th scope="row">Women's cut and blow-dry</th><td>60 minutes</td><td>$65</td></tr>
  </tbody>
</table>

HTML you can copy: a table that scrolls on phones

Wrap a wide table in a box that can scroll sideways and take keyboard focus, with a name so screen readers know what it is:

<div class="table-scroll" role="region" aria-label="Plan comparison" tabindex="0">
  <table>...</table>
</div>

.table-scroll { overflow-x: auto; }
.table-scroll:focus { outline: 2px solid #1a4fd6; }

Opening hours: a table isn't always needed

For a short set of hours, a plain list is simpler and works everywhere: "Monday to Friday: 9 am to 6 pm", "Saturday: 10 am to 2 pm", "Sunday: closed". Write "closed" in words rather than leaving a cell blank or using a dash, which screen readers may skip or read as "dash".

Common mistakes

• A menu or price list uploaded as a photo or a scanned PDF. See our menus and PDFs guide.
• Bold text in the first row instead of real header cells.
• Empty cells, or ticks with no text, in comparison charts.
• Merged cells in simple tables. Split them, or keep the table simple enough not to need them; the W3C tables tutorial covers complex cases.
• Tables used only to arrange the page layout.

On Wix, Squarespace, Shopify or WordPress

Table support varies a lot by builder, theme and plugin, so test yours with the 7 checks above. Some table blocks and plugins only style the first row as bold without marking it as a header. If your builder can't mark headers, a list with a heading per group (for example "Cuts", then each service and price on its own line) is fully accessible and reads well on phones. Our Wix, Squarespace, Shopify and WordPress guides cover each platform.

What an automated scan can and can't tell you

An automated scan, including ours, can flag some table problems, such as header cells that don't point to any data, scrollable boxes that can't take keyboard focus, and low-contrast text. It can't tell whether a table is an image of text, whether bold cells should really be headers, or whether the reading order makes sense. The 5-minute test above covers those. This page is general information, not legal advice.

Related: menus and PDFs, accessible FAQ accordions, mobile and zoom checks, colour contrast guide, restaurant website accessibility, readable text: size, spacing and contrast.

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

• Readable website text: font size, line spacing and contrast in 5 minutes
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

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.