StepFree Commerce

All articles

How-to

Five accessibility checks you can run on your online shop in 15 minutes

No tools to install. A keyboard, the screen reader already on your computer and 15 minutes show you the barriers that stop customers from buying.

StepFree Commerce3 min read

The same product page shown twice with the keyboard focus on the Add to cart button. On the left the theme has removed the focus outline, so nothing shows which button has focus. On the right a thick outline marks Add to cart.
Check 2: when a theme removes the focus outline, a keyboard user cannot tell which button they are on.

You do not need an audit to find out whether some customers cannot buy from your shop. Five checks, about 15 minutes, your keyboard and the screen reader that is already on your computer will show you the most common barriers. Each check names the WCAG 2.2 success criterion it relates to, so you can tell your developer exactly what to look at.

Run the checks on your home page, one product page, the cart and any form you have (newsletter, contact, search).

1. Get to checkout with the keyboard only

Put your mouse aside. Click once in the browser’s address bar, then use only Tab (forward), Shift+Tab (back), Enter, Space, the arrow keys and Esc.

Try to:

  • open the main menu and reach a collection;
  • open a product, choose a size or colour, and add it to the cart;
  • close any pop-up (newsletter, cookie notice, chat) with Esc or a button you can reach;
  • open the cart and get to the checkout button.

If you get stuck anywhere, or focus disappears into a widget and never comes back, keyboard users and many screen-reader users are stuck there too. Related criteria: 2.1.1 Keyboard and 2.1.2 No Keyboard Trap.

2. Check that you can always see where you are

During check 1, watch the screen. Every link, button and field you reach should show a clear outline or highlight. It should also never be hidden behind a sticky header, a cookie bar or a chat button.

Many themes remove the browser’s default focus outline because it “looks untidy”. Without it, a keyboard user is guessing. Related criteria: 2.4.7 Focus Visible and 2.4.11 Focus Not Obscured (Minimum), which is new in WCAG 2.2.

3. Listen to your product page

Turn on the screen reader that came with your computer:

  • Mac: VoiceOver, with Cmd+F5. Turn it off the same way.
  • Windows: NVDA, which is free from nvaccess.org.

On a product page, move through the content with Tab and listen:

  • Product images should be described (“Blue linen shirt, front view”), not read out as a file name or skipped when they carry information.
  • Icon buttons should say what they do: “Cart, 2 items”, “Search”, “Close”. If you only hear “button”, a screen-reader user cannot tell them apart.
  • The size or colour picker should announce the option and whether it is selected.

Related criteria: 1.1.1 Non-text Content and 4.1.2 Name, Role, Value.

4. Submit your forms empty

Take your newsletter signup, your contact form and the search box.

  • Every field needs a visible label. A placeholder alone (“Your email”) disappears as soon as someone starts typing.
  • Submit the form empty or with a wrong email address. The error should appear as text next to the field, say what is wrong and how to fix it, and not rely on a red border alone.

Related criteria: 3.3.2 Labels or Instructions and 3.3.1 Error Identification.

5. Zoom to 400%

Make your browser window about 1280 pixels wide, then press Cmd/Ctrl and + until the zoom reaches 400%. This is how many people with low vision browse.

  • Text should wrap, so you only scroll up and down, not sideways.
  • Nothing should be cut off or overlap, including prices and the add-to-cart button.
  • Sticky headers and bars should not cover half the screen.

Related criteria: 1.4.10 Reflow and 1.4.4 Resize Text.

What these checks do not cover

These five checks find a lot, but not everything. They do not test colour contrast, video captions, the order a screen reader reads your page in, or the parts of your shop that only appear in certain situations, like out-of-stock messages or discount codes. Automated scanners also find only part of the problems.

If you want a second pair of eyes, our free quick check looks at your home page, a collection and a product page and sends you the three most important findings within 2 business days. Our audit covers up to 8 templates, on desktop and mobile, with a keyboard and a screen reader, against WCAG 2.2 AA.

This article is general information, not legal advice.

Topics