"Accessible" sounds like a property of a whole website. In practice it is a series of small decisions in the front end. Here are six of them, as we find them on real sites, and as they look when they are right.
1. Grey text on white
How we find it. Helper text, prices under products and form hints in light grey. It looks calm, and in a design file on a bright monitor it reads fine.
How it should be. Text and background reach a contrast ratio of 4.5:1; large text, from 24 px or from 18.66 px bold, needs 3:1. Check a pair in the WCAG contrast checker before it goes into the design system.
Criterion. 1.4.3 Contrast (Minimum), level AA.
2. The focus indicator is invisible
How we find it. The CSS says outline: none, because the ring was in the way when clicking. With a mouse you never notice. Anyone navigating by keyboard stops being able to see where they are.
How it should be. A custom visible focus style instead of none at all: a clear ring or outline that stands out from the background, on every link, button and field.
Criterion. 2.4.7 Focus Visible, level AA.
3. The form field with no label
How we find it. A search field or a newsletter field with nothing but a placeholder. The placeholder disappears as soon as you type, and screen readers do not treat it reliably as a name.
How it should be. A label whose for points at the field's id. If the layout has no room for a visible label, the label still exists in the markup and is hidden visually rather than removed.
Criterion. 3.3.2 Labels or Instructions, level A, together with 4.1.2 Name, Role, Value.
4. The cookie banner focus cannot leave
How we find it. The banner holds focus while it is open. That part is correct. What is wrong is that its buttons only respond to a mouse: press Tab and you cycle back to "Accept", press Enter and nothing happens, and you never reach the page.
How it should be. Every control inside the banner works from the keyboard, and focus returns to where it was once the banner closes. Closing on Escape as well is good practice.
Criterion. 2.1.1 Keyboard and 2.1.2 No Keyboard Trap, both level A. Why an automated scan does not find this is in why an automated scan cannot find a keyboard trap.
5. The image with the wrong alternative text
How we find it. alt="image", alt="photo_2024_final.jpg", or alternative text describing what is in the photo when the image is actually a button.
How it should be. The alternative text says what the image does in that place. For a button image, that is the action, not the scenery. Purely decorative images get an empty alt="" so the screen reader skips them.
Criterion. 1.1.1 Non-text Content, level A.
6. Headings that only look like headings
How we find it. A div at 32 px as the page title, with real h3 elements under it. Visually the hierarchy is right; in the document it does not exist. Anyone navigating by heading list cannot find their way around.
How it should be. One h1 per page, then h2 and h3 in the order the content implies. CSS handles size, markup handles structure.
Criterion. 1.3.1 Info and Relationships, level A.
What the six have in common
None of these is a special case for a small group. An invisible focus ring affects anyone who is not using a mouse right now. Grey text affects anyone reading on a train in sunlight. A missing heading structure affects anyone who moves through a page by its headings.
And none of them is expensive while it is still in the design. They get expensive once they sit in a design system and ship across every page at once.
See where your site stands
A free scan checks a page against the automated WCAG 2.1 AA rules and shows the first findings.
This article is informational and does not constitute legal advice.