Six barriers, as found and as fixed
These six failure types caused 87 % of the errors in my study of 42 shop homepages. Each one is shown the way it was found, then fixed, with the code. The “Read it aloud” buttons show the text a screen reader gets in each case.
The “as found” examples are deliberately broken. They are hidden from assistive technology on this page so that the page itself stays accessible; the code block shows what is in them.
Simulated screen reader output
Press a “Read it aloud” button and the simulated screen reader output appears here.
1. Image without a text alternative
Found on 12 of 42 homepages. A product image with no alt attribute is read out as its file name, or skipped, so the person never learns what the product is.
Critical As found
Oak dining chair, 129 €
<img src="chair-oak-01.jpg">Fixed
Oak dining chair, 129 €
<img src="chair-oak-01.jpg" width="600" height="450"
alt="Oak dining chair, natural finish, three-quarter view">Purely decorative images get alt="" so that they are skipped on purpose. The rule is WCAG 1.1.1 Non-text content.
2. Text contrast below 4.5:1
Found on 22 of 42 homepages, 1,073 elements. Light grey on white is the most common case: delivery notes, secondary prices, breadcrumbs. Body text needs a contrast ratio of at least 4.5:1; large text, 3:1.
Serious As found, 2.4:1
Free delivery from 50 €. Returns within 30 days.
.note { color: #9AA5B8; } /* on white: 2.4:1 */Fixed, 7.6:1
Free delivery from 50 €. Returns within 30 days.
.note { color: #475467; } /* on white: 7.6:1 */On most shops this is three to six colour pairs in the theme's variables, fixed once. WCAG 1.4.3 Contrast (minimum).
3. Search field without a label
A placeholder disappears as soon as you type and is not a label. Screen readers announce “edit text” with no idea what the field is for; browsers cannot autofill it.
Critical As found
<input type="search" placeholder="Search">Fixed
<label for="q">Search products</label>
<input id="q" type="search" placeholder="e.g. running shoes">If the design has no room for a visible label, a visually hidden one is acceptable. WCAG 1.3.1, 3.3.2 and 4.1.2.
4. Link that contains only an image
Found on 20 of 42 homepages, 580 elements. Promotional banners are almost always images wrapped in a link. Without alternative text the link has no name, and a screen reader reads “link” or the image file name.
The alternative text of a linked image describes the destination, not the picture. WCAG 2.4.4 Link purpose and 1.1.1.
5. Icon button without a name
Found on 9 of 42 homepages, 77 elements: wishlist hearts, carousel dots, close buttons, search submit buttons with an empty value. The button works with a mouse and is a mystery to everyone else.
Critical As found
<button><svg>…</svg></button>Fixed
<button type="button" aria-pressed="false">
<svg aria-hidden="true">…</svg>
<span class="sr-only">Add to wishlist</span>
</button>Visually hidden text translates with the rest of the page; aria-label is the fallback. WCAG 4.1.2 Name, Role, Value.
6. Zoom disabled on mobile
Found on 5 of 42 homepages. One attribute in the viewport tag stops pinch-to-zoom, so anyone who needs larger text on their phone cannot get it. It is the cheapest fix on this page.
Moderate As found
<meta name="viewport"
content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=0">Fixed
<meta name="viewport"
content="width=device-width, initial-scale=1">Text must remain usable when enlarged to 200 %. WCAG 1.4.4 Resize text.
These are the easy ones. The full audit finds the rest.
Keyboard traps, focus order, error messages that do not say what went wrong, carousels that cannot be paused: those need a person at the keyboard. That is what the quick check and the full audit add.