Accessible website: the 10 most common mistakes on contrast, keyboard and forms

When I check a site's accessibility, I almost always find the same problems. They are not rare or sophisticated defects: they are common mistakes, born from design or development habits, and they can be fixed with a few targeted interventions.

Here are the ten I meet most often, with how to recognise them and what to do. For the overall picture, start with Web accessibility: what the law requires and where to start.

1. Insufficient contrast between text and background

Light grey on white is elegant, but many people cannot read it, especially in strong light or on a phone. The WCAG guidelines (level AA) ask for a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.

How to fix it: measure the colours with a contrast tool and darken the text or lighten the background. Also check text over images and buttons.

2. Images without alternative text (or with the wrong one)

A screen reader does not "see" the image: it reads the alternative text. If it is missing, it reads the file name. If that is "image1", it helps nobody.

How to fix it: briefly describe what the image conveys. Purely decorative images should be left with empty alternative text, so they are skipped.

3. Impossible keyboard navigation

Many people do not use a mouse: they use the keyboard or devices that simulate it. If a menu opens only on mouse hover, for them it does not exist.

How to spot it: press Tab to move between elements. Can you reach menus, buttons and forms? Can you close an overlaid window?

4. Invisible focus

When you move with Tab, the selected element must be clearly visible. All too often the outline is removed "because it is ugly", and keyboard users get lost.

How to fix it: keep a clearly visible focus indicator, consistent with the design.

5. Forms without labels

A field with only placeholder text inside ("Name") is not accessible: when you start typing the text disappears and the screen reader may not announce it.

How to fix it: every field must have a visible, linked label, say whether it is required and use the right field type.

6. Unclear error messages

"Form error" does not say what to fix. And if the error is flagged only with the colour red, people who cannot tell colours apart do not see it.

How to fix it: say which field has the problem and how to fix it, with text and not only colour, and bring attention to the error.

7. Headings used for looks and not for structure

A big heading gets used because it "looks nice", skipping levels or using several main headings. People browsing with a screen reader use headings as an index of the page.

How to fix it: one main heading per page, levels in order, and visual style separated from structure.

8. Links with generic text

"Click here", "Read more": out of context they say nothing. Someone hearing the list of links on a page finds ten identical "Read more".

How to fix it: link text describes where it leads ("Read the accessibility guide").

9. Videos without captions and moving content

A video without captions excludes people who cannot hear (and those watching without sound). Sliders that scroll by themselves or continuous animations disturb people who have trouble concentrating.

How to fix it: captions or a transcript for videos, and controls to pause what moves.

10. Elements that depend on colour alone

"Fields in red are required" does not work for people who cannot tell colours apart. The same goes for charts that differ only in colour.

How to fix it: add another signal, such as a symbol, a text or a different shape.

How to check on your own, in ten minutes

1. Test the keyboard. Navigate with Tab, Shift+Tab and Enter only.
2. Enlarge the text up to double: does the page remain usable?
3. Check the contrast of the main text and buttons.
4. Examine forms: labels, errors, timing.
5. Open the page with a screen reader (some are built into operating systems) and listen to the start.
6. Run an automatic tool for the most obvious problems.

These checks do not replace a full audit, but they bring a lot to light.

Where accessibility is decided

Many mistakes are born in the design, before the code: contrast, sizes, button states, use of colour. Fixing them upstream costs less. If you work from a design file, I talk about it in From Figma to WordPress.

The most serious mistakes, in order of priority

If you cannot fix everything right away, start with what stops people from using the site.

1. Forms and payment unusable with a keyboard or screen reader: they block contacts and purchases.
2. Menus and navigation that cannot be reached from the keyboard.
3. Very low contrast in the main text and buttons.
4. Images that carry information without alternative text.
5. Videos with important content without captions.

The rest (heading structure, generic links, small inconsistencies) is worth fixing right after, but does not block use in the same way.

What to ask whoever builds the site

If you commission a new site, ask from the start:

• that contrast and sizes are verified in the design;
• that components (menus, forms, dialogs) are usable from the keyboard;
• that the code uses the correct structure for headings, lists and forms;
• that a short report of what was verified is delivered.

It costs much less to do it well at the start than to fix it later.

Why entrust it to me

I have been programming since 1999, with more than 300 projects delivered and about 30 agencies as an external developer. I check sites' accessibility with automatic tools, keyboard testing and screen readers, and fix problems according to the WCAG guidelines: contrast, alternative text, forms, menus, keyboard navigation. I do not issue certifications: I deliver a report of what I verified and fixed. I work from Rome and remotely.

If you want to know which of these ten mistakes your site has, write to me: a chat of about 20 minutes, no strings attached. You will find the service in Web accessibility: WCAG audits and fixes.