Scan report: Example Store B.V.

Summary

We found 33 issues in 5 types. 10 of them can stop some customers from buying. Most are in the theme code, so they repeat on every page that uses the same section. All 33 can be fixed in the theme.

Pages we checked

1. Home page /
2. Collection: Bags /collections/bags
3. Product: Linen tote bag /products/linen-tote-bag
4. Cart /cart
5. Contact (chosen by the store) /pages/contact

Issues

1. Menu not usable by keyboard

   Severity: High Found: 3

   The dropdown menus only open when you hover with a mouse. With the Tab key you skip past them, so keyboard users can’t reach any collection page from the menu.

   Where

   Header on every page: the “Shop”, “Collections” and “About” dropdowns.

   Who it affects

   People who can’t use a mouse, including many screen-reader users.

   How to fix it

   Make each menu item a button that opens its dropdown with Enter or Space, and closes with Escape.

   WCAG criterion

   2.1.1 Keyboard (level A)

2. Cart drawer traps keyboard

   Severity: High Found: 1

   The cart drawer opens, but focus stays on the page behind it. Once you Tab into the drawer, you can’t get out, and the close button can’t be reached.

   Where

   Product page, after “Add to cart”.

   Who it affects

   Keyboard and screen-reader users. They can’t continue to checkout from the drawer.

   How to fix it

   Move focus into the drawer when it opens, keep it there while open, close it with Escape, and return focus to the “Add to cart” button.

   WCAG criterion

   2.1.2 No Keyboard Trap (level A)

3. Field without a label

   Severity: High Found: 6

   These fields only have placeholder text or an icon. A screen reader announces “edit text” or “button” without saying what it is for.

   Where

   Search field (every page), newsletter field (footer), quantity selector (product page, cart).

   Who it affects

   Screen-reader and voice-control users.

   How to fix it

   Add a visible label, or a hidden label where the design has no room for one.

   WCAG criterion

   4.1.2 Name, Role, Value (level A)

4. Text contrast too low

   Severity: Medium Found: 14

   Light grey text on white has a contrast of 2.8 : 1. The minimum for normal text is 4.5 : 1.

   Where

   Sale prices, the “Free shipping over €50” bar, footer text and product card details.

   Who it affects

   People with low vision, older shoppers, and anyone using a phone outside.

   How to fix it

   Darken the grey in the theme settings and CSS. A slightly darker shade keeps the same look.

   WCAG criterion

   1.4.3 Contrast (Minimum) (level AA)

5. Image without alt text

   Severity: Medium Found: 9

   Images have no text alternative, or one that is just the file name, such as “IMG_2041.jpg”.

   Where

   Home page banners, collection and product images.

   Who it affects

   Screen-reader users, who hear the file name or nothing at all.

   How to fix it

   Add a short description in Shopify admin for product images. Mark purely decorative images as decorative in the theme.

   WCAG criterion

   1.1.1 Non-text Content (level A)

Outside the theme code

We also noticed these. They are not counted above, because they can’t be fixed in your theme.

• Product reviews app: the star rating can’t be used with a keyboard. This is inside a third-party app. Tell the app developer, or ask us about alternatives.
• Checkout: not checked. Shopify controls the checkout, and it can’t be changed with theme code.

What this scan does not cover

An automated scan finds many common problems, but not all of them. Some things, such as whether alt text actually describes the image, or whether a page makes sense with a screen reader, need a person to check. Our paid audit includes that manual check.