Website accessibility for UK small businesses: a plain guide

A lot of people in the UK live with a disability, and plenty more are squinting at a cracked phone in bright sunlight, using a mouse with a sore wrist, or reading with their glasses in the other room. If your website only works for someone with perfect eyesight, a steady hand and a new laptop, you are turning customers away without knowing it. This post explains what accessibility actually means, why it is worth doing, where you stand legally in the UK, and the ten fixes that sort out most problems.

What accessibility means in plain terms

An accessible website is one that works for people however they are using it. That covers more visitors than most business owners expect:

• People using screen readers. Software that reads the page aloud, used by blind and partially sighted people. It depends on the page being properly structured and on images having text descriptions.
• People who only use a keyboard. Some cannot use a mouse because of a motor condition or injury; others use switches or voice control that work through the keyboard. Every link, button and form field needs to be reachable with the Tab key.
• People with low vision. They zoom in, use large text settings, or need strong contrast between text and background.
• People with colour blindness. Far more common than most people think, especially among men. A form that marks errors in red only, or a chart that relies on red versus green, does not work for them.
• People with motor difficulties. Tiny buttons, links crammed together and menus that vanish the moment the cursor drifts are a daily frustration.
• People on old phones and slow connections. Not a disability, but the same good habits (lean pages, real text rather than text in images) make a site usable for them too.

Most accessibility is simply building the site properly and not getting in the way.

The business case

We would make the case for accessibility even if the law said nothing about it, because it pays for itself.

More customers. A visitor who cannot read your prices, tab to your booking button or fill in your contact form will not phone you to complain. They will go to the competitor whose site works.

Better search rankings. Google reads your site in much the same way a screen reader does. Descriptive alt text, headings in order, link text that says where it goes and clean HTML all help Google understand the page. The same work that helps a blind visitor helps you rank, which is why accessibility sits alongside speed (see our Core Web Vitals guide) as a basic of technical SEO.

Fewer complaints. An accessible site generates fewer “your form doesn’t work” emails, and the same changes help everyone: captions in a noisy café, high contrast outdoors, big tap targets for anyone with a thumb.

The legal position in the UK

First, a caveat: we are web designers, not lawyers. What follows is a general description; if you need to know where you stand, get advice for your situation.

The main law is the Equality Act 2010. It requires anyone providing goods or services to the public to make reasonable adjustments so that disabled people are not put at a substantial disadvantage. The duty is anticipatory, meaning you are expected to think about it in advance rather than wait for someone to ask. It is widely understood to apply to websites and online services, not just physical premises.

The Act does not spell out a technical standard. “Reasonable” depends on the size of the business, the cost of the adjustment and how much difference it would make. For a small business, that generally means doing the sensible, affordable things in this post rather than commissioning a full audit of every page.

Public sector bodies (councils, NHS organisations, schools and similar) are covered by separate regulations, the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018, which set a specific technical standard and require a published accessibility statement. If you supply a service to a public body, they may pass those requirements on to you in the contract.

WCAG 2.2 AA: the standard most people aim for

Because the Equality Act does not define “accessible”, almost everyone uses the Web Content Accessibility Guidelines (WCAG) from the W3C as the yardstick. The current version is 2.2, with three levels: A, AA and AAA. Level AA is what the public sector regulations require and what most private organisations target, because it covers the issues that affect the most people without being impractical for a normal website. You do not need to read the full guidelines; the ten points below cover most of what AA asks for on a typical small-business site.

The ten things that fix most problems

1. Alt text on images. Every meaningful image needs a short text description (“Groomer trimming a cockapoo on a table”, not “IMG_4471”). Purely decorative images should have an empty alt attribute so screen readers skip them. Never put important information, like opening hours or prices, only inside an image.
2. Colour contrast. Body text needs a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. Light grey on white, a favourite of modern templates, usually fails. Free contrast checkers give you the number in seconds.
3. Keyboard navigation and visible focus. Press Tab repeatedly on your site. You should reach every link, button, menu item and form field in a sensible order, and always see where you are. If the focus outline was removed “because it looked ugly”, put it back, styled to match your brand.
4. Headings in order. One main heading per page, then second-level headings for sections, then third-level inside those. Screen reader users jump between headings the way sighted users skim, so skipping levels or using headings purely for big text is confusing.
5. Link text that makes sense on its own. “Click here” and “read more” mean nothing when read out of context. “View our dog grooming prices” does. This helps Google too.
6. Form labels and error messages. Every field needs a visible label that stays visible (placeholder text that disappears when you type is not a label). When something goes wrong, say what and where, in words, next to the field, not just by turning the border red.
7. Captions and transcripts. Add captions to video and a transcript for audio. This also makes the content searchable.
8. No autoplaying sound. A video that starts talking the moment the page loads is disorienting for screen reader users, whose software is talking at the same time. If you must autoplay, keep it muted with a visible pause button.
9. Text that can be resized. Visitors should be able to zoom to 200% without text overlapping, disappearing off the edge or getting stuck behind a fixed header.
10. Reduced motion. Parallax scrolling, bouncing icons and auto-rotating carousels make some people feel ill. Phones and computers have a “reduce motion” setting; your site should respect it. Any carousel should also have a pause control.

How to test it yourself

You can find most problems without special equipment. Set aside half an hour and go through these on your homepage, a service page and your contact or booking page.

To go further, turn on your phone’s built-in screen reader (VoiceOver on iPhone, TalkBack on Android) and try to enquire with your eyes closed. It is humbling.

Alt text and link wording you can usually fix yourself. Contrast, focus styles and form behaviour live in the theme, so that is a job for whoever built the site. If the list is long and the site is old, it may be one of the signs your website needs a redesign rather than a patch.

What WebProud builds in by default

We do not sell accessibility as an add-on, because the cheapest time to get it right is while the site is being built. Every site we design, from a £500 Starter to a fully custom Premium build, includes:

• Semantic markup. Proper HTML elements for headings, navigation, lists, buttons and forms, so screen readers and Google both understand the structure.
• Skip links. A hidden “skip to content” link at the top of every page, so keyboard users do not have to tab through the whole menu each time.
• Focus styles. A clear, on-brand outline on whatever has keyboard focus. We never remove it.
• Reduced-motion support. Animations are switched off or softened when the visitor’s device asks for reduced motion.
• Colour contrast checks. Every text and background pairing is checked against the AA ratios before we write a line of code.

It is part of our website launch checklist, and it goes hand in hand with writing clearly, which we cover in how to write website content for a small business.

Accessibility checklist

Tick these off as you go.

• Every meaningful image has useful alt text; decorative images have empty alt.
• Body text contrast is at least 4.5 to 1; large text at least 3 to 1.
• Everything can be reached and used with the keyboard, and focus is always visible.
• Headings run in order with no skipped levels.
• Link text makes sense on its own.
• Every form field has a visible label; errors are explained in words next to the field.
• Videos have captions; audio has a transcript.
• Nothing plays sound automatically.
• The page works at 200% zoom with no horizontal scrolling.
• The site respects the reduce-motion setting; carousels can be paused.
• Nothing important is conveyed by colour alone.
• Lighthouse and WAVE show no errors on your main pages.

Where to start

Do the keyboard tab-through on your contact page today. It takes two minutes and tells you more than any report. Then run WAVE on your homepage and fix the alt text and contrast errors it finds.

If you would rather have it built properly from the start, our web design service includes everything above at every price point (see pricing). Get in touch for a free 20-minute scoping call; we reply within one working day.