5 quick accessibility wins for UK small business sites

Accessibility is not all-or-nothing. Five small, specific fixes will make your website work better for people with disabilities and meet the letter of UK law. Each takes a few hours to implement. None requires a complete redesign.

The legal angle

The Equality Act 2010 requires that service providers (including businesses with websites) make reasonable adjustments so that disabled people are not excluded from access. This applies to private businesses, not just public sector organisations. There is no prescribed standard, but compliance with WCAG 2.1 Level AA has become the recognised benchmark for demonstrating reasonable adjustments.

The five fixes below address the most common failures and align with specific WCAG 2.1 success criteria. The summary table shows how much time each takes and which users benefit most.

<div className="my-6 overflow-x-auto"> <table className="w-full border-collapse text-sm"> <thead> <tr className="bg-slate-100 text-left"> <th className="border border-slate-300 px-3 py-2 font-semibold">#</th> <th className="border border-slate-300 px-3 py-2 font-semibold">Fix</th> <th className="border border-slate-300 px-3 py-2 font-semibold">WCAG 2.1 criterion</th> <th className="border border-slate-300 px-3 py-2 font-semibold">Time to apply</th> <th className="border border-slate-300 px-3 py-2 font-semibold">Who benefits most</th> </tr> </thead> <tbody> <tr> <td className="border border-slate-300 px-3 py-2">1</td> <td className="border border-slate-300 px-3 py-2 font-semibold">Add alt text to meaningful images</td> <td className="border border-slate-300 px-3 py-2">1.1.1 Non-text Content</td> <td className="border border-slate-300 px-3 py-2">30 min - 2 hours</td> <td className="border border-slate-300 px-3 py-2">Screen reader users</td> </tr> <tr className="bg-slate-50"> <td className="border border-slate-300 px-3 py-2">2</td> <td className="border border-slate-300 px-3 py-2 font-semibold">Restore a visible keyboard focus indicator</td> <td className="border border-slate-300 px-3 py-2">2.4.7 Focus Visible</td> <td className="border border-slate-300 px-3 py-2">30 min - 1 hour</td> <td className="border border-slate-300 px-3 py-2">Keyboard-only and motor-impaired users</td> </tr> <tr> <td className="border border-slate-300 px-3 py-2">3</td> <td className="border border-slate-300 px-3 py-2 font-semibold">Fix low text contrast</td> <td className="border border-slate-300 px-3 py-2">1.4.3 Contrast Minimum</td> <td className="border border-slate-300 px-3 py-2">1-2 hours</td> <td className="border border-slate-300 px-3 py-2">Low-vision and older users</td> </tr> <tr className="bg-slate-50"> <td className="border border-slate-300 px-3 py-2">4</td> <td className="border border-slate-300 px-3 py-2 font-semibold">Label every form field</td> <td className="border border-slate-300 px-3 py-2">1.3.1 and 3.3.2</td> <td className="border border-slate-300 px-3 py-2">1-2 hours</td> <td className="border border-slate-300 px-3 py-2">Screen reader and voice-control users</td> </tr> <tr> <td className="border border-slate-300 px-3 py-2">5</td> <td className="border border-slate-300 px-3 py-2 font-semibold">Write descriptive link text</td> <td className="border border-slate-300 px-3 py-2">2.4.4 Link Purpose</td> <td className="border border-slate-300 px-3 py-2">30 min - 1 hour</td> <td className="border border-slate-300 px-3 py-2">Screen reader users navigating by links</td> </tr> </tbody> </table> </div>

1. Add alt text to meaningful images

WCAG criterion: 1.1.1 Non-text Content

Every image on your site that carries meaning needs a text description. Screen reader users cannot see images, so the alt text is their only way to understand what you are trying to convey.

Write alt text that says what the image shows. "Logo" is not enough. "Smith and Sons Plumbing Services logo" is better. For a photo of a technician fixing a pipe, "Plumber installing a new copper pipe" tells the user what they are looking at.

Do not write "image of" or "picture of" at the start. Screen readers already announce that it is an image.

Decorative images (dividers, background patterns) do not need alt text. Mark them with an empty alt attribute: alt="".

How long: 30 minutes to 2 hours, depending on the number of images.

2. Make sure the keyboard focus indicator is visible

WCAG criterion: 2.4.7 Focus Visible

Keyboard-only users navigate your site using Tab. When they do, there must be a clear visible outline or highlight showing which button, link or form field is currently active.

Check your site by opening it and pressing Tab repeatedly. Watch for a visible border, background change or outline on the element that is active. If nothing appears or if the indicator is so subtle you can barely see it, you have a problem.

The fix is usually simple: restore the browser's default focus outline or add a custom one if you have removed it with CSS. Many websites delete the outline to make the site look cleaner, not realising they are breaking keyboard navigation.

button:focus, a:focus, input:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

How long: 30 minutes to 1 hour.

3. Check your text contrast

WCAG criterion: 1.4.3 Contrast Minimum

Text must have enough contrast between the foreground and background so that people with moderately low vision can read it. The standard is 4.5:1 (dark text on light background or vice versa). Larger text (18pt or larger) can be 3:1.

Test your site with a free tool such as Lighthouse (built into Chrome DevTools) or WAVE. Both will flag low-contrast text and show you which parts of your site are affected.

Common fixes:

• Make text darker or background lighter.
• Use a different colour combination.
• Increase the font size (larger text can have lower contrast).

Do not rely on colour alone to convey information. If you use red text to highlight errors, also add an icon or word like "Error:" so that colour-blind users understand.

How long: 1-2 hours, depending on how many colour changes are needed.

4. Label form fields properly

WCAG criteria: 1.3.1 Info and Relationships and 3.3.2 Labels or Instructions

Every form field (text input, dropdown, checkbox) must have a visible label and that label must be associated with the field in code. Screen reader users need the label to know what the field is for.

The correct way in HTML is to use the <label> element with a for attribute:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

The for attribute in the label must match the id attribute in the input. This tells the screen reader which label belongs to which field.

Do not rely on placeholder text (greyed-out text inside the field) as a label. Placeholders disappear when the user starts typing and are hard to read.

If you are using a website builder or form tool, check its accessibility settings. Many have an option to link labels and fields properly.

How long: 1-2 hours for a small website.

5. Write descriptive link text

WCAG criterion: 2.4.4 Link Purpose

Avoid link text like "click here" or "more information". Screen reader users often jump from link to link, so they hear only the link text out of context. "Click here" tells them nothing.

Instead, write link text that stands alone:

• Instead of: "For our privacy policy, click here."

• Write: "Read our privacy policy."

• Instead of: "Find out more."

• Write: "Contact us for a free quote."

The link text should be 2-5 words and describe where the link goes or what will happen when you click it.

How long: 30 minutes to 1 hour, depending on the size of your site.

Testing your improvements

After you implement these fixes, test with:

• WAVE (browser extension or website): Highlights accessibility issues and shows you what screen readers see.
• axe DevTools (browser extension): Automated testing for common accessibility problems.
• Keyboard: Open your site and use Tab and arrow keys only. Make sure you can navigate to every button, link and form field.
• NVDA or another free screen reader (Windows) or VoiceOver (Mac): Listen to how your site is read aloud.

Key takeaways

These five fixes address the most common accessibility barriers and are grounded in UK law. The Equality Act 2010 requires reasonable adjustments, WCAG 2.1 Level AA is the recognised standard for what "reasonable" looks like. Each fix takes a few hours and delivers immediate benefit to disabled users.

Start with the one that will have the biggest impact on your site. If you have 50 images with no alt text, begin there. If your contrast is borderline, test and fix that next.