Designing Accessible Websites: A Practical WCAG Primer for UK Small Businesses
Why Accessibility Matters for UK Small Businesses
Accessibility is not just a legal box to tick. Around one in five people in the UK lives with a disability, and the Equality Act 2010 expects businesses to make reasonable adjustments so everyone can use their services. For a small business, an accessible website widens your audience and improves how every visitor experiences your site.
The good news is that the core principles are simple. You do not need to be a designer or developer to understand them. Below, we explain three practical areas from the Web Content Accessibility Guidelines (WCAG): contrast, keyboard navigation and alt text.
Contrast: Making Text Easy to Read
Contrast is the difference between the colour of your text and the colour of the background behind it. If that difference is too small, people with low vision, colour blindness or even a glare-filled laptop screen will struggle to read your words.
WCAG sets clear targets. Normal body text should reach a contrast ratio of at least 4.5 to 1 against its background. Larger text, such as headings, needs at least 3 to 1. Free online contrast checkers let you paste in two colour codes and see whether they pass.
A useful rule of thumb: avoid light grey text on white, and never place white text over a pale photo. If in doubt, darken the text or lighten the background.
Keyboard Navigation: Designing for People Who Do Not Use a Mouse
Many people navigate websites using only a keyboard. This includes people with motor impairments, screen reader users and anyone whose mouse has stopped working. Your site should let them reach every link, button and form field using the Tab key.
Three checks to run on your own site:
- Press Tab repeatedly from the top of a page. Can you see a clear outline around each focused element?
- Can you reach and activate every menu item, button and form field without touching a mouse?
- Does the focus order follow the visual order of the page, rather than jumping around?
If the focus indicator disappears, or if important controls are only reachable by hovering, that is a barrier worth fixing.
Alt Text: Describing Images for Everyone
Alt text is a short written description of an image. Screen readers read it aloud, and it appears if an image fails to load. Good alt text is specific and useful rather than stuffed with keywords.
Consider these points:
- Describe the purpose of the image, not every visual detail.
- Keep it concise, usually under 125 characters.
- For decorative images, use an empty alt attribute so screen readers skip them.
- For charts or infographics, provide a longer description nearby.
Putting It Into Practice
You do not need to fix everything at once. Start by checking your homepage contrast, then test keyboard navigation, then review the alt text on your most important images. Small, steady improvements add up.
Accessibility is a journey, not a one-off task.
If you would like help reviewing your website against WCAG, the team at Design Logix can audit your pages and suggest practical fixes that suit a small business budget.
