sitepunchlist.com

Announced as "button" with nothing else. Close buttons, hamburger menus and icon toolbars are where this almost always shows up.

How to fix it. Add visible text, or aria-label when the control really is icon-only. Make sure any icon inside is marked aria-hidden="true" so it is not announced alongside.

<button><span class="icon-close"></span></button>

<button aria-label="Close dialog">
  <span class="icon-close" aria-hidden="true"></span>
</button>

Engine rule button-name. Rule documentation.

Without alt text a screen reader falls back to reading the filename, so a product photo becomes "I M G underscore 4 7 2 1 dot j p g". It also means nothing sensible shows when the image fails to load.

How to fix it. Describe what the image conveys in this context, not what it literally depicts. If it is purely decorative, use alt="" (empty, not missing) so it is skipped cleanly.

Automated testing can only see whether alt exists. Whether the wording is any good still needs a person.

<img src="/img/IMG_4721.jpg">

<img src="/img/IMG_4721.jpg" alt="Oak dining table seating six">
<img src="/img/divider.svg" alt="">  <!-- decorative -->

Engine rule image-alt. Rule documentation.

The dropdown is announced with only its current value, so there is nothing saying what it selects. Currency, country and sort-order pickers are frequent offenders.

How to fix it. Add a <label for>, or aria-label when there is genuinely no room for visible text.

<select name="sort"><option>Newest</option></select>

<label for="sort">Sort by</label>
<select id="sort" name="sort"><option>Newest</option></select>

Engine rule select-name. Rule documentation.

The field is announced with no name, so it is guesswork what to type. Placeholder text does not count: it disappears the moment someone starts typing, and many screen readers do not announce it.

How to fix it. Connect a <label> to the input with for/id, or wrap the input in the label. Keep the placeholder as a hint if you like, but it is never the label.

<input type="email" placeholder="Email address">

<label for="email">Email address</label>
<input id="email" type="email" placeholder="you@example.com">

Engine rule label. Rule documentation.

Anyone reading on a phone in daylight, on a cheap monitor, or with reduced contrast sensitivity loses the text entirely. This is the single most common defect on the web.

How to fix it. Darken the text or lighten the background until the ratio reaches 4.5:1 for body text, or 3:1 for text at 18pt/14pt-bold and larger. Change the colour token, not the individual element — the same pale grey is usually defined once and used everywhere.

The engine reports the exact measured ratio for each element, so you can see how far off each one is.

<p style="color:#999; background:#fff">Read our terms</p>
<!-- 2.85:1 - fails -->

<p style="color:#595959; background:#fff">Read our terms</p>
<!-- 7.0:1 - passes -->

Engine rule color-contrast. Rule documentation.

A screen reader announces these as just "link", so someone listing the links on a page hears nothing that tells them where any of them go. Icon-only links and links wrapping a bare image are the usual cause.

How to fix it. Give the link text. If it must look like an icon alone, put the words in a visually-hidden span, or use aria-label. Never leave the accessible name to the href.

<a href="/cart"><svg aria-hidden="true">…</svg></a>

<a href="/cart">
  <svg aria-hidden="true">…</svg>
  <span class="visually-hidden">Basket</span>
</a>

Engine rule link-name. Rule documentation.

Small, tightly packed controls are easy to miss for anyone with a tremor, using a touchscreen one-handed, or on the move. Added in WCAG 2.2, so plenty of older sites have never been checked against it.

How to fix it. Make targets at least 24×24 CSS pixels, or leave enough space around them that a 24px circle centred on each does not overlap its neighbour. Padding counts toward the target — the icon itself does not have to grow.

.social-icon { width: 16px; height: 16px; margin: 0 2px; }

.social-icon { width: 16px; height: 16px; padding: 8px; }
/* 32x32 target around a 16px icon */

Engine rule target-size. Rule documentation.

A screen reader announces "list, 6 items" so someone knows what they are stepping into. Stray wrappers inside break the count, and sometimes break the announcement entirely. Injected advert and tracking divs are a frequent cause.

How to fix it. Only <li>, <script> and <template> may sit directly inside <ul> or <ol>. Move wrappers inside the <li>.

<ul>
  <div class="ad-slot"></div>
  <li>First</li>
</ul>

<ul>
  <li><div class="ad-slot"></div></li>
  <li>First</li>
</ul>

Engine rule list. Rule documentation.

A screen reader picks its pronunciation rules from this attribute. Without it, English read by a voice set to French is close to unintelligible.

How to fix it. Set lang on the <html> element in your base template. One line, every page.

<html>

<html lang="en">

Engine rule html-has-lang. Rule documentation.

user-scalable=no or a low maximum-scale stops people pinch-zooming on a phone. For anyone who enlarges text to read it, the page becomes unusable.

How to fix it. Remove user-scalable and maximum-scale from the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="viewport" content="width=device-width, initial-scale=1">

Engine rule meta-viewport. Rule documentation.