Website Accessibility Explained

Website Accessibility: What It Is, Why It Matters, and How to Test Your Site (Free Tools Included)

If you run a business website in the UK, you've probably heard the term "accessibility" thrown around, especially if you work with public sector organisations or government contracts.

But what does it actually mean? And more importantly, is your website accessible?

In this guide, I'll break down:

• What website accessibility is (in plain English)

• Why it matters for your business

• The UK legal requirements

• How to test your site with free tools

• Common issues and how to fix them

No jargon. No overwhelm. Just practical advice you can use today.

What Is Website Accessibility?

Simple definition:
Website accessibility means making your website usable for everyone, including people with disabilities.

This includes people who:

• Are blind or have low vision (use screen readers)

• Are deaf or hard of hearing (need captions on videos)

• Have motor impairments (can't use a mouse, navigate with keyboard only)

• Have cognitive disabilities (dyslexia, learning difficulties)

• Are older adults (may have age-related impairments)

In the UK alone, there are over 14 million people with disabilities. That's 1 in 5 people who might struggle to use your website if it's not accessible.

Think of it this way:
If your physical shop had stairs but no ramp, wheelchair users couldn't enter. An inaccessible website is the digital equivalent- you're unintentionally locking people out.

Why Does Accessibility Matter?

1. It's the Law (For Public Sector)

In 2018, the UK introduced the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations.

What this means:

• All government websites must be accessible

• Local councils, NHS, schools, universities—all must comply

• Websites must meet WCAG 2.1 AA standards (more on this below)

• Non-compliance can result in legal action

If you work with government or public sector clients, accessibility compliance is non-negotiable.

2. It's Good for Business

Even if you're not in the public sector, accessibility makes business sense:

• Larger audience - 14 million disabled people in the UK = potential customers

• Better SEO - Many accessibility practices (alt text, clear headings, fast loading) also improve search rankings

• 
  Improved user experience - Accessible sites are easier for EVERYONE to use

• 
  Legal protection - Private sector businesses can be sued under the Equality Act 2010

• 
  Competitive advantage - Most small business websites aren't accessible—stand out by doing it right

3. It's the Right Thing to Do

Beyond legal and business reasons, accessibility is about inclusion. Everyone deserves equal access to information, services, and opportunities online.

What Are WCAG 2.1 AA Standards?

WCAG = Web Content Accessibility Guidelines

It's the international standard for web accessibility, created by the W3C (World Wide Web Consortium).

There are 3 levels:

• Level A - Basic accessibility (minimum)

• Level AA - Standard accessibility (UK government requirement)

• Level AAA - Enhanced accessibility (gold standard, rarely required)

WCAG 2.1 AA is what you need to aim for in the UK.

What Does an Accessible Website Look Like?

Here are some key requirements:

1. Alt Text on Images

Every image needs a text description so screen readers can describe it to blind users.

Example:

html

Copy code

<img src="team-photo.jpg" alt="DNA Digital HQ team celebrating project launch">

Bad example:

html

Copy code

<img src="image1.jpg" alt="image">

2. Color Contrast

Text must have enough contrast against the background to be readable.

Good: Black text on white background (high contrast)
Bad: Light grey text on white background (fails contrast requirements)

Minimum ratio required:

• 4.5:1 for normal text

• 3:1 for large text (18pt+)

3. Keyboard Navigation

Users must be able to navigate your entire site using only a keyboard (no mouse).

How to test: Unplug your mouse and try navigating with:

• Tab - Move between links/buttons

• Enter - Activate links/buttons

• Arrow keys - Scroll or move through menus

If you get stuck or can't reach something, it's not accessible.

4. Form Labels

Every form field needs a clear label so screen readers know what it's for.

Good:

html

Copy code

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

Bad:

html

Copy code

<input type="email" placeholder="Enter email">

(Placeholders disappear when you start typing—not accessible)

5. Heading Structure

Use proper heading hierarchy (H1, H2, H3) to organize content.

Good structure:

• H1: Page title

• H2: Main sections

• H3: Subsections

Bad structure:

• H1: Page title

• H3: Section (skipped H2)

• H2: Subsection (out of order)

Screen readers use headings to navigate, so proper structure is essential.

6. Video Captions

All videos must have captions for deaf or hard-of-hearing users.

YouTube auto-captions are NOT enough (they're often inaccurate). Use proper captions or transcripts.

7. Resizable Text

Users must be able to zoom text to 200% without breaking the layout.

How to test: Press Ctrl + Plus (+) on Windows or Cmd + Plus (+) on Mac to zoom. Does the layout break? Does text overlap or disappear?

8. Focus Indicators

When you tab through a page, there must be a visible outline showing where you are.

Example: Blue outline around the current link or button.

Test: Tab through your site. Can you see where you are at all times?

How to Test Your Website (Free Tools)

You don't need to be a developer or accessibility expert to check your site. Here are free tools anyone can use:

1. WAVE (Web Accessibility Evaluation Tool)

What it does: Scans your page and highlights accessibility issues with visual icons.

How to use:

1. Go to wave.webaim.org

2. Enter your website URL

3. Click "WAVE this page"

4. Review the results (red = errors, yellow = warnings)

Or install the browser extension for instant testing on any page.

Cost: Free

2. Axe DevTools

What it does: Browser extension that audits accessibility and provides detailed reports.

How to use:

1. Install the extension (Chrome, Firefox, Edge)

2. Open your website

3. Right-click → Inspect → Axe DevTools tab

4. Click "Scan All of My Page"

5. Review issues with explanations and how to fix them

Cost: Free (Pro version available but not necessary)

3. Lighthouse (Built into Chrome)

What it does: Audits performance, SEO, and accessibility.

How to use:

1. Open your website in Chrome

2. Right-click → Inspect → Lighthouse tab

3. Select "Accessibility" and click "Generate report"

4. Review your score and recommendations

Cost: Free (built into Chrome)

4. Color Contrast Checker

What it does: Tests if your text has enough contrast against the background.

How to use:

1. Go to webaim.org/resources/contrastchecker

2. Enter your text color and background color (hex codes)

3. See if it passes WCAG AA standards

Cost: Free

5. Screen Reader Testing

What it does: Lets you experience your site the way blind users do.

Free screen readers:

• NVDA (Windows) - nvaccess.org

• VoiceOver (Mac) - Built into macOS (press Cmd + F5 to activate)

How to test:

1. Turn on the screen reader

2. Navigate your site using only the keyboard

3. Listen to what's announced—does it make sense?

Cost: Free

6. Keyboard Navigation Test

What it does: Tests if your site is usable without a mouse.

How to test:

1. Unplug your mouse (or just don't use it)

2. Use Tab, Enter, and Arrow keys to navigate

3. Can you reach everything? Can you complete tasks (fill forms, click buttons)?

Cost: Free (just your time)

Common Accessibility Issues (And How to Fix Them)

Here are the most common problems I see on small business websites:

Issue #1: Missing Alt Text on Images

Problem: Screen readers can't describe images without alt text.

How to fix:

• Add descriptive alt text to every image

• Decorative images (logos, design elements) can have empty alt text: alt=""

Example:

html

Copy code

<img src="product.jpg" alt="Handmade wooden dining table with oak finish">

Issue #2: Poor Color Contrast

Problem: Light text on light backgrounds is hard to read.

How to fix:

• Use the Color Contrast Checker tool

• Aim for at least 4.5:1 ratio for normal text

• Darken text or lighten background until it passes

Issue #3: Forms Without Labels

Problem: Screen readers can't tell users what each field is for.

How to fix:

• Add proper <label> tags to all form fields

• Don't rely on placeholders alone

Example:

html

Copy code

<label for="name">Full Name:</label> <input type="text" id="name" name="name">

Issue #4: No Keyboard Navigation

Problem: Users can't navigate without a mouse.

How to fix:

• Ensure all interactive elements (links, buttons, forms) are keyboard accessible

• Test by tabbing through your site

• Add :focus styles so users can see where they are

Issue #5: Videos Without Captions

Problem: Deaf users can't understand video content.

How to fix:

• Add captions to all videos (YouTube, Vimeo have built-in tools)

• Provide transcripts for audio-only content

Issue #6: Broken Heading Structure

Problem: Screen reader users can't navigate properly.

How to fix:

• Use headings in order (H1 → H2 → H3)

• Don't skip levels

• Only one H1 per page (usually the page title)

Quick Accessibility Checklist

Use this checklist to audit your website:

Images & Media:

• All images have descriptive alt text

• Decorative images have empty alt text (alt="")

• Videos have captions

• Audio content has transcripts

Text & Color:

• Text has sufficient color contrast (4.5:1 minimum)

• Text can be resized to 200% without breaking layout

• Information isn't conveyed by color alone

Navigation:

• Site is fully navigable with keyboard only

• Focus indicators are visible when tabbing

• No keyboard traps (can't get stuck)

• Skip-to-content link for screen readers

Structure:

• Proper heading hierarchy (H1, H2, H3 in order)

• Logical reading order

• Landmarks (header, nav, main, footer) used correctly

Forms:

• All form fields have labels

• Error messages are clear and helpful

• Required fields are clearly marked

Links & Buttons:

• Link text is descriptive (not "click here")

• Buttons have clear labels

• Links and buttons are large enough to click (minimum 44x44 pixels)

What If My Site Fails?

Don't panic! Most websites have accessibility issues—you're not alone.

What to do:

1. Prioritize - Fix critical errors first (missing alt text, poor contrast, keyboard traps)

2. Learn as you go - You don't need to be perfect overnight

3. Get help - Hire an accessibility expert if needed (or contact me!)

4. Document progress - Keep a record of what you've fixed and what's still to do

For public sector work: You'll need an accessibility statement on your website explaining your compliance status and any known issues.

Resources to Learn More

Free Courses:

• WebAIM - webaim.org (Best free resource)

• W3C Web Accessibility Initiative - w3.org/WAI (Official WCAG docs)

• Google's Web Accessibility course - Free on Coursera

Testing Tools:

• WAVE - wave.webaim.org

• Axe DevTools - deque.com/axe

• Lighthouse - Built into Chrome DevTools

Communities:

• A11y Project - a11yproject.com (Beginner-friendly)

• WebAIM Discussion List - Great for questions

Final Thoughts

Website accessibility isn't just a legal checkbox—it's about making the web usable for everyone.

Start small:

• Run a WAVE scan

• Fix missing alt text

• Check color contrast

• Test keyboard navigation

Every improvement makes a difference.

And if you're working with government or public sector clients, accessibility compliance isn't optional—it's essential.

Need help making your website accessible?

I offer accessibility audits, WCAG 2.1 AA compliance services, and website development with accessibility built in from day one.

[Get in touch →]

About the Author:

Nicola Tierney is the founder of DNA Digital HQ, specializing in accessible web development and digital transformation for trades and public sector organizations. With over a decade of experience in operations and e-commerce, she helps businesses build websites that work for everyone.