← All posts

Web accessibility: the basics that change everything

Accessibility is often treated as a niche topic: something you handle "if there's time", for a small minority of visitors. That framing is wrong. An accessible site is first and foremost a site that keeps working when conditions aren't ideal — a screen in direct sunlight, a broken mouse, a slow connection, one hand busy, tired eyes at the end of the day. In other words: everyone, regularly.

It's also a simpler site. Most accessibility fixes involve removing complications, not adding them. Here are the basics that produce the most effect, in the order I tackle them.

Contrast: the cheapest fix there is

This is the most widespread problem, and the easiest to solve. Light grey on white looks refined on a designer's calibrated screen and is unreadable on a phone on the train.

The WCAG guidelines give precise thresholds: a contrast ratio of at least 4.5:1 for body text, and 3:1 for large text and for interface elements (field borders, meaningful icons). These aren't vague recommendations — they're numbers you can check in seconds with a contrast tool, or straight from the browser's inspector panel.

The classic trap: secondary button labels and legal notices, systematically too pale. Nobody notices internally, because everyone already knows what they say.

Visible focus: don't remove it

Plenty of people navigate with a keyboard. Some have no choice, others are simply faster that way. They press Tab to move from link to link — and the browser draws an outline around the active element.

That outline often gets stripped out in CSS because it doesn't look pretty. It's probably the single most damaging thing you can do to a site: keyboard users are then navigating blind, with no idea where they are.

The right approach isn't to remove it but to design it: a crisp, high-contrast outline that fits the site's identity. Test it yourself — open your homepage, press Tab a dozen times, and see whether you can follow the path effortlessly. If you lose track, so do your visitors.

Alt text: describe the intent

An image with no alt attribute is a hole in the page for a screen reader. But badly written alt text doesn't help either. The question to ask isn't "what's in this image?" but "why is this image here?".

A purely decorative photo has nothing to say: alt="" is the correct answer, and it will be skipped. A logo inside a link to the homepage should announce the destination, not describe a drawing. A chart has to convey the information it carries — if the number matters, it should appear as text somewhere.

Forms: labels, not placeholders

On a marketing site, the contact form is often the most important page. It's also the one that accumulates the most accessibility problems.

The most common: replacing labels with placeholder text. It looks elegant while the field is empty — then the hint disappears the moment you start typing, the contrast is usually too low, and screen readers don't interpret it reliably. A real <label> tied to the field solves all of that at once, and enlarges the clickable area as a bonus.

Two other useful habits: report errors in text, not only with a red border (colour alone is never a message), and don't impose pointless format constraints on phone numbers or addresses.

Structure: HTML that says what it is

A screen reader doesn't see your layout, it reads your structure. A heading that's just a bold <div> isn't a heading to it. A button built from a clickable <div> won't fire from the keyboard.

The basics come down to very little: one <h1> per page, heading levels in order, <button> for an action and <a> for a destination, and the correct lang attribute on the <html> tag — that's what tells a screen reader which pronunciation to use, and it matters especially on a bilingual site like this one.

Native HTML already does almost all the work. ARIA attributes exist to fill the gaps, not to patch up poorly chosen markup.

What it costs, and what it returns

Handled from the design stage, these five basics cost almost nothing: they're decisions, not extra development. Retrofitted onto a finished site, they become a project — which is exactly why they belong at the start.

The benefit isn't limited to visitors with disabilities. A clean heading structure also helps search engines. Explicit labels reduce form abandonment. Adequate contrast keeps the site readable on the move. And depending on your market, digital accessibility increasingly falls under regulatory obligations — the European framework has tightened noticeably in recent years, and it's worth checking what applies to your sector.

A quick way to gauge your own site: navigate a full page using only the keyboard, then read it again in bright sunlight on your phone. What you find will probably be fixable in a day.

Want a second opinion on your site's accessibility, or a site designed to be accessible from the first mockup? Let's talk.

Got a project in mind? Let’s talk.

Get in touch