Website accessibility examples: good and bad

Website accessibility means people can use your site regardless of how they are using it: with a screen reader, by keyboard only, at 200 percent zoom, with a tremor, or simply outdoors in bright sun with one hand full.

Most small business sites fail on the same handful of things, and most of those are quick to fix. This is what good and bad actually look like, the free tools that find problems, and what an accessibility statement is for.

Why it matters, beyond the right thing to do

• It is a legal duty in the UK. The Equality Act 2010 requires reasonable adjustments so disabled people are not put at a substantial disadvantage. That applies to service providers, which includes most businesses with a website.
• The European Accessibility Act took effect on 28 June 2025 and can reach UK businesses selling to EU customers, for example through an online shop.
• It overlaps almost entirely with usability. Bigger tap targets, better contrast and clearer labels help everyone, particularly on a phone outdoors.
• Some of it helps search engines. Alt text, proper headings and descriptive links are things Google reads too.

Accessibility examples: what good and bad look like

Colour contrast

Bad: light grey text on a white background, because it looked elegant in the design. Unreadable in sunlight and hard work for anyone with reduced vision.

Good: body text with a contrast ratio of at least 4.5 to 1 against its background. Large text can go to 3 to 1. Test it rather than eyeballing it, because designers consistently overestimate contrast on a good monitor in a dim room.

Link text

Bad: “Click here”, “Read more”, “Learn more” repeated eleven times down a page. A screen reader user can pull up a list of links on a page, and a list of eleven identical “read more” entries tells them nothing.

Good: links that describe their destination, like how much website hosting costs. You can read it out of context and know where it goes.

Images and alt text

Bad: a photo of your team with no alt attribute, or alt text reading “IMG_4471.jpg”.

Good: alt text describing what the image conveys. A van outside a customer’s house becomes “A Kent Web Design van parked outside a house in Ramsgate”.

Also good, and widely misunderstood: decorative images should have an empty alt attribute, written as alt="". That tells a screen reader to skip it rather than announce a filename. Empty alt on a decorative image is correct, not a fault, and automated tools frequently flag it wrongly.

Forms

Bad: fields labelled only by placeholder text that vanishes the moment you type, so anyone who loses their place cannot tell which box is which. Errors shown only in red, with no words.

Good: a visible label attached to every field, errors that say what is wrong in text, and a form you can complete with the keyboard alone.

Keyboard use

Bad: a menu that only opens on hover, a slider you can only operate by dragging, a cookie banner you cannot dismiss without a mouse.

Good: everything reachable by pressing Tab, in a sensible order, with a visible outline showing where you are. Try it now on your own site. Tab through the header and see whether you can tell where you are.

Headings and structure

Bad: headings chosen because of how big they look, so a page jumps from H1 to H4. Or an H1 that is just the business name.

Good: one H1 saying what the page is about, then H2s and H3s in order. Screen reader users navigate by heading, the way sighted people skim.

Video and audio

Bad: a video that autoplays with sound, and no captions.

Good: captions on anything with speech, and no autoplaying audio. Most people watch video on a phone with the sound off anyway, so captions earn their place regardless.

Free accessibility checkers

Automated tools catch perhaps a third of real problems. That is worth having, as long as you know it is a floor and not a pass mark.

We went through each of these properly, including what they miss, in website accessibility checkers compared.

Be wary of overlay widgets, the ones promising instant compliance from a line of script. They are widely criticised by disabled users and by accessibility professionals, they do not fix the underlying markup, and they have not prevented legal claims. Fix the site rather than covering it.

Accessibility statements

An accessibility statement is a page saying how accessible your site is, what you know is not yet right, and how someone can tell you about a problem.

For UK public sector bodies it is a legal requirement with a prescribed format. For a private business it is not mandatory, but it is worth having, and the honest version is better than the boilerplate one.

A useful statement covers:

• What standard you are aiming at, normally WCAG 2.2 level AA.
• How accessible you believe the site currently is, in plain words.
• Anything you know is not compliant yet, stated rather than hidden.
• How to contact you if someone hits a barrier, and how quickly you will respond.
• When you last reviewed it.

Do not claim full compliance unless it has been properly tested, including with real assistive technology. An overstated statement is worse than a modest one, because it is a written claim you may not be able to stand behind.

A twenty minute check you can do today

1. Tab through your homepage. Can you reach everything, in a sensible order, and always see where you are?
2. Zoom to 200 percent. Does anything overlap or disappear?
3. Run WAVE on your homepage and your contact page.
4. Check your body text contrast in the WebAIM checker.
5. Look at your links. Any “click here” or “read more”?
6. Check your images have alt text, and that decorative ones use an empty alt rather than a filename.
7. Fill in your own contact form using only the keyboard.

That will not make you compliant, but it will find most of what is actually stopping people. It sits alongside the rest of what is worth checking in our website audit checklist.

How we put this together

The good and bad examples are the faults we find most often on real sites, including sites we have been asked to take over.

The point about empty alt attributes is from our own site. An audit tool returned over a hundred rows telling us images were missing alt text. Every one of them was a decorative avatar correctly marked as decorative, exactly as the standard asks. We had to check them by hand to be sure, which is why the warning is here rather than as a footnote.

We build accessibility in rather than retrofitting it, so most of what is above is written from doing it at build time rather than from fixing it afterwards.

Where this fits with everything else

Accessibility is not a separate project bolted on afterwards. Contrast, tap target size, clear labels and readable text are the same decisions that make a site work on a phone, which we covered in making a website mobile friendly, and the same ones that decide whether visitors get in touch, which is landing page optimisation.

It is far cheaper to build in than to retrofit, which is why we treat it as part of the build rather than an extra. More on the wider picture in what makes a good website.

If you would like someone to go through your site properly, send us the address and we will tell you what we find. If you are planning a new one, accessibility is included as standard in web design for small business, not priced as an extra.