Altwise

Product pages shoppers can trust: size charts, options, quantity and photo zoom

How to make a small online store's product pages accessible: size charts and measurements as real tables, size and style pickers, quantity buttons, photo alt text and zoom, details and returns info, platform notes and a 5-minute check.

The product page is where a shopper decides. This season, viral "ad versus reality" posts (a fitted T-shirt that arrived baggy, a "bookcase" that turned out to be a dollhouse miniature) have shoppers telling each other the same thing: read the product details, check the measurements against clothes you own, and look at the real photos before you buy. That only works if those details are readable by everyone. On small online stores the size chart is often a picture inside a pop-up, the quantity box is two unlabelled "+" and "−" icons, photo zoom only works when you hover a mouse, and the details hide in tabs the keyboard can't open. Here's how to fix each one.

1. Size charts and measurements as a real table, not a picture

A size chart saved as an image can't be read by a screen reader, goes blurry when zoomed and can't be translated or searched (1.4.5 Images of Text, 1.1.1 Non-text Content). Put it in an HTML table with a caption and header cells, so each number is read with its size and measurement (1.3.1 Info and Relationships). Give units in words or clear abbreviations, and wrap the table so it scrolls sideways inside its box on a phone instead of making the whole page scroll (1.4.10 Reflow).

<div class="table-wrap" role="region" aria-labelledby="size-cap" tabindex="0">
  <table>
    <caption id="size-cap">T-shirt sizes, body measurements in inches</caption>
    <thead>
      <tr><th scope="col">Size</th><th scope="col">Chest</th><th scope="col">Length</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Small</th><td>34 to 36</td><td>28</td></tr>
      <tr><th scope="row">Medium</th><td>38 to 40</td><td>29</td></tr>
      <tr><th scope="row">Large</th><td>42 to 44</td><td>30</td></tr>
    </tbody>
  </table>
</div>
<p>Fit: relaxed. Model is 6 ft and wears Medium.</p>

<style>
  .table-wrap { overflow-x: auto; }
  .table-wrap:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
</style>
<!-- example sizes and measurements; use your real ones -->

The sizes, measurements and model details above are example data. The tabindex="0" on the wrapper lets keyboard users scroll a wide table. Write the size and fit details in the product description as text too ("Runs small; size up if between sizes"), and state dimensions for furniture, decor and gifts in plain words ("Miniature, 1:12 scale, about 6 inches tall"). If the chart opens in a pop-up, use a native <dialog> that closes with Escape, or simply link to a size guide page. See our guides to accessible tables and images of text.

2. Size, style and other option pickers

Option buttons need a group name that is read out ("Size"), a clear selected state that isn't only colour, and a way to say an option is sold out in words. A native <select> or a set of radio buttons does this for free (4.1.2 Name, Role, Value, 3.3.2 Labels or Instructions). If changing the option changes the price, photo or stock, announce the new price without moving focus (4.1.3 Status Messages), and don't send people to a different page just because they picked a size (3.2.2 On Input).

<fieldset class="size-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="size" value="S">
  <label for="size-s">Small</label>
  <input type="radio" id="size-m" name="size" value="M" checked>
  <label for="size-m">Medium</label>
  <input type="radio" id="size-l" name="size" value="L" disabled>
  <label for="size-l">Large <span>(sold out)</span></label>
</fieldset>
<p id="price-status" role="status">$28.00. In stock.</p>
<!-- when the size changes, your script updates price-status text,
     for example "Large: $30.00. Only 2 left." (real stock only) -->

<style>
  .size-picker input:checked + label { border: 3px solid #1a1a1a; font-weight: 700; }
  .size-picker input:focus-visible + label { outline: 3px solid #1a1a1a; outline-offset: 2px; }
</style>
<!-- example sizes, prices and stock -->

The sizes, prices and stock above are example data. You can hide the round radio circles visually and style the labels as buttons, as long as the inputs stay in the code. For colour swatches, see colour-only meaning, swatches and stock status.

3. The quantity box

A quantity control with "−" and "+" icons and no names is announced as "button, button". Keep a real number field with a visible label, give the step buttons names, and make each at least 24 by 24 CSS pixels (2.5.8 Target Size (Minimum)); 44 is kinder on phones.

<div class="qty">
  <label for="qty">Quantity</label>
  <button type="button" aria-label="Decrease quantity" data-step="-1">&minus;</button>
  <input id="qty" name="quantity" type="number" inputmode="numeric" min="1" max="10" value="1">
  <button type="button" aria-label="Increase quantity" data-step="1">+</button>
</div>

<script>
  document.querySelectorAll('.qty button').forEach(function (b) {
    b.addEventListener('click', function () {
      var f = document.getElementById('qty');
      var v = Math.min(Number(f.max), Math.max(Number(f.min), Number(f.value) + Number(b.dataset.step)));
      f.value = v;
    });
  });
</script>
<!-- example limits; use your store's real maximum -->

The minimum and maximum above are example values. Because the number field stays typeable, keyboard and voice users can enter "3" directly instead of pressing a button three times. If there's a per-order limit, say it in text next to the field ("Limit 10 per order").

4. Product photos and zoom

Each product photo needs alt text that adds what the name doesn't: the colour, the angle, the scale or what's in the box ("Back view, showing the zip pocket"; "Shown next to a coffee mug for size"). Hover-only zoom shuts out keyboard and touch users, and zoom panes that pop up over the page must be dismissible and stay open while the pointer moves onto them (1.4.13 Content on Hover or Focus). The simplest fix is a link or button that opens the full-size photo, which works with every input (2.1.1 Keyboard). Thumbnail strips should be buttons with names ("Show photo 2 of 5: back view"), and real customer photos in reviews need alt text too. See our alt text examples, image sliders and reviews and star ratings.

5. Details, materials, shipping and returns

Put the facts shoppers check (materials, dimensions, care, what's included, shipping cut-offs and the returns policy) in real text with headings, not inside the photos. If you use tabs or show/hide sections, they must open with the keyboard and say whether they are open; a list of headings with <details> and <summary> elements is the simplest option that works everywhere. See our guide to accordions and show/hide sections.

Platform notes

Settings and app names change often, so check your platform's or app's own help pages for the current option.

Common mistakes

A 5-minute check you can do today

  1. Open your best-selling product page. Is the size chart or dimension list text you can select and copy? If it's a picture, that's the first fix.
  2. Zoom the browser to 200% on your phone or laptop. Can you still read the size chart without the whole page scrolling sideways?
  3. Press Tab from the top. Can you pick a size, change the quantity and reach "Add to cart", and can you always see where you are? See our keyboard test.
  4. Pick a sold-out size. Does the page say so in words?
  5. Try to open a full-size photo without a mouse.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. On a product page it can flag images with no alt attribute, unnamed icon buttons such as quantity controls, form fields with no label, some table and ARIA mistakes and low contrast. It can't tell whether a size chart image holds text, whether alt text describes the right detail, or whether the option picker and zoom work with a keyboard, which is why the 5-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: product grids and quick view, online store checkout, swatches and stock status, mobile zoom and tap targets, WCAG 2.2 explained.

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

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.

Answering "Will it arrive in time?" and "Can I send it back?" See shipping, returns and order tracking pages.

Selling products with accessibility features? See accessibility feature tags and filters.

Putting together a holiday gift guide? See holiday gift guide pages, gift boxes and bundles.

Adding heart icons or a wishlist? See wishlist, favorite and save-for-later buttons.

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.