Fixing the accessibility issues we flag most

Three findings account for most accessibility failures we see.

Missing alt text

The rule is not "every image needs a description". It is that every image needs the *right* treatment:

• Decorative images get alt="". An empty attribute is correct and tells assistive tech to skip it. This is different from having no attribute at all, which makes a screen reader read the filename.
• Informative images get a description of what matters. "Our four-person team outside the Camden workshop" beats "team photo".
• Images that are links or buttons describe the destination or action, not the picture. If your logo links home, alt="Northgate Plumbing home".
• Images containing text repeat that text exactly. Better: do not put text in images.

A good test: read the page aloud, substituting your alt text for each image. If a sentence stops making sense, the alt text is wrong.

Form fields with no label

A placeholder is not a label. It disappears when someone types, it is usually too low-contrast to read, and screen readers treat it inconsistently.

Every input needs either:

<label for="email">Email</label>
<input id="email" type="email">

or a wrapping label:

<label>Email <input type="email"></label>

Keep the placeholder as an example if you like. It just cannot be the only label.

Contrast below threshold

The thresholds for WCAG 2.2 AA:

• 4.5:1 for normal text
• 3:1 for large text (24px and up, or 18.66px and up if bold)
• 3:1 for meaningful interface elements such as input borders and icons

The two most common failures are light grey helper text on white, and white text on a mid-tone brand colour. Both look fine on a good monitor indoors and vanish on a phone outside.

Usually the fix is to darken the text rather than change the brand colour, which keeps the design intact.

One thing automated testing cannot check: whether colour is your *only* means of conveying something. If form errors are indicated by red text alone, add an icon or a message.