How to Make Your Website Accessible — A Practical Guide for UK Business Owners

Making your website accessible isn’t just about compliance — it’s about ensuring that everyone who visits your site can actually use it. Around one in five people in the UK has some form of disability, and an inaccessible website is effectively a closed door to a significant portion of your potential customers.

The good news is that many accessibility improvements are straightforward and can be made without a full redesign. This guide covers the practical changes that will make the biggest difference, explained in plain terms for business owners who aren’t web developers.

Images, Alt Text, and Non-Text Content

Every image on your website that conveys information should have descriptive alt text — a short text alternative that screen readers can read aloud for blind or visually impaired users. Decorative images (backgrounds, dividers) should have an empty alt attribute (`alt=""`) so screen readers skip them.

Good alt text describes what’s in the image in the context of the page. A photo of your team outside your Norwich office might have alt text like "The Xpose team outside their Norwich city centre office". Avoid vague descriptions like "image" or "photo" and don’t start with "Image of" — screen readers already announce that it’s an image.

This principle extends to all non-text content. Videos should have captions, audio content should have transcripts, and infographics should have a text equivalent that conveys the same information.

Colour, Contrast, and Typography

Text must have sufficient contrast against its background for users with low vision or colour blindness to read it. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and above). You can check your contrast ratios using the WebAIM Contrast Checker or similar free tools.

Don’t rely on colour alone to convey information. If your form shows errors in red text with no other indicator, users who are colour-blind may not notice them. Always pair colour cues with text labels, icons, or other non-colour indicators.

Set your text sizes in relative units (rem or em) rather than fixed pixels, so that users who increase their browser’s font size see text scale correctly. Ensure your layout doesn’t break when text is enlarged to 200%.

Keyboard Navigation and Forms

Every function of your website should be operable using a keyboard alone, without requiring a mouse. Tab through your site and verify that every link, button, dropdown, and form field can be reached and activated with the keyboard. Ensure there’s a visible focus indicator — the outline that shows which element is currently focused — and don’t remove it with `outline: none` in your CSS without providing an alternative.

Forms deserve particular attention. Every input field should have a clearly associated `<label>` element — not just placeholder text, which disappears when the user starts typing. Provide clear error messages that identify which field has the problem and how to fix it. Group related fields with `<fieldset>` and `<legend>` elements.

Add a "Skip to main content" link as the very first focusable element on the page. This allows keyboard and screen reader users to jump past your navigation menu directly to the page content without tabbing through every navigation item on every page.