What Makes a Website Accessible — and Why It Matters

Imagine visiting a website where you can’t read the text because the contrast is too low, buttons don’t respond when you press them, or you can’t navigate without a mouse. For millions of people in the UK, this isn’t imagination — it’s their daily experience on the web.

Web accessibility means designing and building websites that everyone can use, regardless of their abilities or the assistive technologies they rely on. It’s about ensuring that a person using a screen reader, someone with limited dexterity using keyboard navigation, or an individual with colour blindness can all access your content and services effectively.

This isn’t just good practice — it’s increasingly a legal requirement, makes solid business sense, and is fundamentally the right thing to do. This guide explains what accessibility means, why it matters, and practical steps you can take to make your website more inclusive.

What Is Web Accessibility?

Web accessibility is the practice of making websites usable by as many people as possible. Whilst it particularly benefits people with disabilities, accessible design improves the experience for everyone.

Who Benefits from Accessible Websites?

People with permanent disabilities:

• Visual impairments (blindness, low vision, colour blindness)
• Hearing impairments (deafness, hearing loss)
• Motor disabilities (difficulty using a mouse, tremors, paralysis)
• Cognitive disabilities (dyslexia, autism, learning difficulties)

People with temporary limitations:

• Someone with a broken arm who can’t use a mouse
• A person recovering from eye surgery with temporary vision impairment
• Anyone experiencing a migraine that makes bright screens painful

People in challenging circumstances:

• Using a mobile device in bright sunlight (low contrast becomes impossible to read)
• In a quiet environment where they can’t play audio
• On a slow internet connection where images don’t load
• Using an older device or browser

Everyone benefits from:

• Clear, well-structured content
• Logical navigation
• Readable text
• Responsive design that works on all devices
• Fast-loading pages

“Accessible design is good design. Barriers faced by people with disabilities often make websites harder for everyone to use.”

Common Accessibility Barriers

Let’s look at the most common issues that make websites difficult or impossible for some users to access:

Poor Colour Contrast

The problem: Light grey text on a white background, yellow buttons on orange backgrounds, or any colour combination that’s difficult to distinguish.

Who it affects: People with low vision, colour blindness, anyone using a device in bright sunlight.

Example: A submit button with light blue text on a white background fails contrast requirements. Many users simply won’t see it clearly.

Missing Alternative Text

The problem: Images without descriptive alt text mean screen reader users have no idea what the image shows.

Who it affects: Blind and visually impaired users relying on screen readers.

Example: An infographic showing your company’s growth statistics with no alt text is completely invisible to screen reader users. They’ll just hear “image” with no context about the valuable data you’re presenting.

Keyboard Navigation Issues

The problem: Websites that can’t be navigated using only a keyboard, interactive elements that can’t be focused or activated without a mouse.

Who it affects: People who can’t use a mouse due to motor disabilities, power users who prefer keyboard navigation, anyone using assistive technologies.

Example: A dropdown menu that only opens on mouse hover, custom form elements that don’t respond to keyboard input, or missing focus indicators so users can’t see where they are on the page.

Unclear Link Text

The problem: Links that say “click here” or “read more” without context about where they lead.

Who it affects: Screen reader users who navigate by jumping between links, people using voice control, anyone scanning the page quickly.

Example: “Click here to download our brochure” should be “Download our product brochure (PDF, 2MB)” — descriptive, informative, and useful for everyone.

Non-Semantic HTML

The problem: Using <div> and <span> elements for everything instead of proper semantic HTML like <button>, <nav>, <article>, <header>.

Who it affects: Screen reader users who rely on proper HTML structure to understand and navigate content.

Example: Creating a button using a div styled to look like a button instead of using a proper button element means assistive technologies won’t recognize it as an interactive element.

Auto-Playing Media

The problem: Videos or audio that play automatically without user control, or no way to pause/stop them.

Who it affects: People using screen readers (audio conflicts with screen reader audio), people with anxiety or sensory sensitivities, anyone in a quiet environment.

Example: A background video that starts playing immediately, with tiny controls that are hard to find and use.

Inaccessible Forms

The problem: Form fields without proper labels, error messages that aren’t clearly associated with the relevant field, required fields not marked, unclear validation rules.

Who it affects: Everyone, but particularly problematic for screen reader users and people with cognitive disabilities.

Example: A form that just says “Error” at the top without indicating which fields have problems, or input fields with placeholder text instead of proper labels (placeholders disappear when you start typing).

Missing Captions and Transcripts

The problem: Videos without captions, audio content without transcripts.

Who it affects: Deaf and hard-of-hearing users, people in sound-sensitive environments, non-native speakers, anyone who prefers reading to listening.

Example: A product demo video with no captions means deaf users can’t access the information, and it’s also less useful for indexing by search engines.

The Legal Framework: Equality Act 2010

In the UK, website accessibility isn’t optional — it’s a legal requirement under the Equality Act 2010.

What the Law Says

The Equality Act makes it unlawful to discriminate against people with disabilities. This includes providing services (such as websites) that put disabled people at a substantial disadvantage compared to non-disabled people.

Key points:

• The Act applies to all UK businesses providing goods, services, or facilities to the public
• Websites and mobile apps are considered “services” under the Act
• You must make “reasonable adjustments” to ensure disabled people can access your services
• Failure to comply can result in legal action and compensation claims

What “Reasonable Adjustments” Means

“Reasonable” depends on factors like:

• The size and resources of your organisation
• The practicality of making changes
• The effectiveness of proposed adjustments
• The cost of making changes relative to your resources

For most businesses, following established accessibility guidelines (WCAG 2.1) represents a reasonable standard. Courts have found in favour of claimants where businesses failed to meet basic accessibility requirements.

Public Sector Requirements

Public sector bodies (government departments, councils, NHS, state schools) have additional obligations under the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018.

They must:

• Meet WCAG 2.1 AA standard
• Publish an accessibility statement
• Provide alternative accessible formats on request

Whilst these regulations don’t directly apply to private businesses, they set a clear precedent for what’s considered achievable and reasonable.

Recent Legal Cases

There have been successful accessibility discrimination cases in the UK, including:

• Online retailers being sued for inaccessible checkout processes
• Service providers facing claims over unusable booking systems
• Companies settling out of court after accessibility complaints

The trend is towards increased enforcement and higher expectations. Proactive accessibility is far better than reactive legal defence.

The Business Case for Accessibility

Beyond legal compliance, accessible websites offer tangible business benefits:

Larger Potential Audience

According to the UK’s Family Resources Survey, around 14.6 million people in the UK have a disability — roughly 22% of the population. That’s a substantial market that inaccessible websites exclude.

Add temporary disabilities, situational limitations, and the ageing population (older people are more likely to have accessibility needs), and accessible design benefits the majority of users at some point.

Improved SEO

Many accessibility best practices align with good SEO:

• Proper heading structure helps search engines understand content hierarchy
• Alternative text for images provides context for search engine indexing
• Semantic HTML makes content easier for search engines to parse
• Descriptive link text improves page relevance signals
• Fast-loading, well-structured pages rank better

Google explicitly considers page experience in rankings, and accessible sites tend to provide better experiences.

Better Usability for Everyone

Accessible design principles create better experiences for all users:

• Clear navigation benefits everyone
• Readable text with good contrast is easier for everyone
• Keyboard shortcuts help power users
• Captions benefit non-native speakers and people in noisy/quiet environments
• Simple, logical layouts reduce cognitive load

Reduced Risk and Liability

Proactively addressing accessibility reduces the risk of:

• Legal action and associated costs
• Compensation claims
• Negative publicity from accessibility complaints
• Costs of emergency remediation when issues are raised

Enhanced Reputation

Demonstrating commitment to inclusion and accessibility:

• Builds trust with customers and partners
• Differentiates you from competitors
• Shows corporate responsibility
• Aligns with modern expectations around inclusivity

Future-Proofing

Building accessibility into your development process from the start is far more cost-effective than retrofitting later. Accessible code is typically:

• More maintainable
• More robust
• Better structured
• Easier to update and extend

Understanding WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) are the internationally recognised standard for web accessibility, developed by the World Wide Web Consortium (W3C).

WCAG Versions and Levels

Current version: WCAG 2.1 (with WCAG 2.2 recently released)

Three conformance levels:

• Level A: Basic accessibility features (minimum requirement)
• Level AA: Addresses major accessibility barriers (recommended target)
• Level AAA: Highest level of accessibility (not achievable for all content)

Most organisations aim for WCAG 2.1 Level AA as a reasonable and achievable standard.

The Four Principles (POUR)

WCAG is built around four core principles. Content must be:

1. Perceivable Users must be able to perceive the information being presented. This means:

• Providing text alternatives for non-text content
• Offering captions and alternatives for multimedia
• Ensuring content can be presented in different ways without losing meaning
• Making it easy for users to see and hear content (sufficient contrast, resizable text)

2. Operable Users must be able to operate the interface. This includes:

• Making all functionality available from a keyboard
• Giving users enough time to read and use content
• Not designing content that could cause seizures (flashing)
• Helping users navigate and find content
• Making it easier to use inputs beyond keyboard

3. Understandable Users must be able to understand the information and interface. Requirements include:

• Making text readable and understandable
• Making content appear and operate in predictable ways
• Helping users avoid and correct mistakes

4. Robust Content must be robust enough to work with current and future technologies, including assistive technologies. This means:

• Maximising compatibility with assistive technologies
• Using valid, semantic HTML
• Ensuring code can be reliably interpreted

Practical Steps to Improve Accessibility

You don’t need to achieve perfect accessibility overnight. Here are practical steps you can take to make meaningful improvements:

1. Use Semantic HTML

What it means: Using the right HTML element for the job instead of generic div and span elements styled to look like interactive components.

How to implement:

• Use button elements for buttons
• Use nav elements for navigation menus
• Use proper heading hierarchy (h1, h2, h3, etc.)
• Use article, section, aside, header, footer appropriately
• Use label elements properly associated with form inputs

Why it matters: Semantic HTML provides meaning and structure that assistive technologies rely on to help users navigate and understand your content.

2. Provide Alternative Text for Images

What it means: Every image that conveys information should have descriptive alt text.

Guidelines:

• Describe what’s meaningful about the image
• Keep it concise but informative
• Don’t start with “image of” or “picture of”
• For complex images (charts, diagrams), consider longer descriptions
• Decorative images should have empty alt attributes so screen readers skip them

3. Ensure Sufficient Colour Contrast

What it means: Text and important visual elements must have enough contrast against their background.

Standards:

• Normal text: 4.5:1 contrast ratio minimum
• Large text (18pt+ or 14pt+ bold): 3:1 minimum
• Interactive elements and graphics: 3:1 minimum

Tools to check:

• WebAIM Contrast Checker
• Chrome DevTools Accessibility panel
• Colour Contrast Analyser desktop app

How to fix: If colours fail contrast requirements, either darken the text or lighten the background (or vice versa) until the ratio is sufficient.

4. Make Everything Keyboard Accessible

What it means: All interactive elements must be usable with keyboard alone (no mouse required).

Test: Try navigating your entire website using only Tab, Shift+Tab, Enter, and arrow keys. Can you:

• Access all links and buttons?
• Open and close menus?
• Submit forms?
• See where you are (focus indicator visible)?

How to fix:

• Use proper interactive HTML elements (button, a, input)
• Ensure focus indicators are clearly visible
• Set logical tab order (usually follows source order)
• Provide keyboard shortcuts for complex interactions

5. Label Form Fields Properly

What it means: Every form input needs a visible label that’s programmatically associated with it.

Additional considerations:

• Mark required fields clearly
• Provide clear error messages associated with specific fields
• Group related fields appropriately
• Use helpful hints where needed

6. Create Logical Heading Structure

What it means: Using headings (h1 through h6) to create a clear content hierarchy.

Best practices:

• One h1 per page (usually the page title)
• Don’t skip heading levels
• Headings should outline your content like a table of contents
• Don’t use headings for visual styling (use CSS instead)

Why it matters: Screen reader users often navigate by headings, jumping between them to find content. A logical heading structure makes this efficient.

7. Provide Captions and Transcripts

What it means: All video content should have captions; all audio content should have transcripts.

How to implement:

• Use WebVTT format for HTML5 video captions
• Include captions in the video file or as a separate track
• Provide downloadable transcripts for audio content
• Consider audio descriptions for videos where visual information is important

Benefits beyond accessibility: Captions help people in noisy/quiet environments, non-native speakers, and improve SEO.

8. Use ARIA Attributes Appropriately

What they are: Accessible Rich Internet Applications (ARIA) attributes add semantic information to HTML elements.

Important: ARIA should enhance, not replace, semantic HTML. First rule of ARIA: don’t use ARIA if you can use native HTML instead.

9. Make Content Readable

What it means: Write clearly and structure content for easy comprehension.

How to implement:

• Use clear, straightforward language
• Break content into short paragraphs
• Use lists for multiple items
• Provide headings to break up long content
• Define jargon or technical terms
• Keep sentences reasonably short
• Use active voice where possible

10. Test with Real Users and Tools

Automated testing tools:

• WAVE (Web Accessibility Evaluation Tool)
• axe DevTools browser extension
• Lighthouse (built into Chrome DevTools)
• Pa11y for automated testing in development

Manual testing:

• Navigate with keyboard only
• Test with screen readers (NVDA, JAWS, VoiceOver)
• Check colour contrast
• Verify form error handling
• Test with browser zoom at 200%

User testing: Where possible, include people with disabilities in your user testing. They’ll identify issues automated tools miss.

Common Accessibility Myths

Let’s dispel some misconceptions about accessibility:

Myth: “Accessible websites look boring and basic” Reality: Accessible design and attractive design are not mutually exclusive. Many award-winning websites with stunning designs are also highly accessible.

Myth: “Accessibility is expensive and time-consuming” Reality: Building accessibility in from the start adds minimal time and cost. It’s retrofitting inaccessible sites that’s expensive. Most accessibility improvements are straightforward once you understand the principles.

Myth: “We don’t have any disabled users” Reality: You likely do, but your inaccessible website prevents them from using your services. Also, many disabilities are invisible, and users don’t announce them.

Myth: “Accessibility is only for blind users” Reality: Accessibility benefits people with visual, auditory, motor, and cognitive disabilities, plus everyone in challenging circumstances.

Myth: “We can add accessibility later” Reality: Retrofitting accessibility is much harder and more expensive than building it in from the start. Some architectural decisions are difficult to change later.

Myth: “Automated tools are enough” Reality: Automated tools catch maybe 30-40% of accessibility issues. Manual testing and user testing with people with disabilities are essential.

How JB Cyber Services Approaches Accessibility

At JB Cyber Services, we believe accessibility is a fundamental aspect of good web development, not an optional extra.

Built-In from the Start

We integrate accessibility into every stage of our development process:

Design phase:

• Colour contrast checking
• Clear visual hierarchy
• Intuitive navigation patterns
• Consideration for keyboard navigation and screen readers

Development phase:

• Semantic HTML as standard
• Proper ARIA attributes where needed
• Keyboard accessibility testing
• Screen reader compatibility testing

Testing phase:

• Automated accessibility testing in our build pipeline
• Manual keyboard navigation testing
• Screen reader testing
• Colour contrast verification
• Real user testing where possible

Standards-Compliant Code

All websites we build aim for WCAG 2.1 Level AA compliance as a minimum standard. We:

• Use valid, semantic HTML
• Follow accessibility best practices
• Test with multiple screen readers
• Ensure keyboard accessibility throughout
• Provide proper alternative text and captions

Accessibility Audits

For existing websites, we offer accessibility audits that:

• Identify current accessibility barriers
• Prioritise issues by severity and impact
• Provide clear, actionable recommendations
• Offer remediation support to fix identified issues

Ongoing Commitment

Accessibility isn’t a one-time checkbox — it’s an ongoing commitment. We:

• Stay current with evolving standards
• Test new features for accessibility
• Provide guidance on creating accessible content
• Support clients in maintaining accessibility over time

Inclusive Design Philosophy

We approach every project with inclusive design principles:

• Consider diverse users from the beginning
• Test with real users where possible
• Provide multiple ways to access information
• Design for flexibility and user choice

Getting Started with Accessibility

If you’re new to accessibility, here’s how to begin:

This week:

• Run your website through WAVE or Lighthouse
• Try navigating your site with keyboard only
• Check colour contrast on key elements
• Review whether images have meaningful alt text

This month:

• Fix any critical issues identified
• Establish accessibility as part of your content creation process
• Train content creators on writing alt text and using headings properly
• Add accessibility criteria to your definition of “done” for new features

This quarter:

• Conduct a comprehensive accessibility audit (or engage professionals to do so)
• Create an accessibility statement for your website
• Implement a plan to address identified issues
• Consider accessibility in any redesign or new development work

Ongoing:

• Test accessibility of new features and content
• Include accessibility in your quality assurance process
• Stay informed about accessibility standards and best practices
• Listen to feedback from users about accessibility issues

Conclusion

Web accessibility isn’t about compliance checklists or begrudgingly meeting minimum legal requirements — it’s about building a web that works for everyone.

The financial case for accessibility is clear: it expands your potential audience, reduces legal risk, improves SEO, and creates better experiences for all users. The legal case is increasingly compelling, with the Equality Act 2010 making inaccessible websites potentially unlawful. The ethical case is simple: everyone deserves equal access to information and services.

The good news is that accessibility doesn’t require massive budgets or complete rebuilds. With understanding, commitment, and the right approach, you can make significant improvements relatively quickly. Building accessibility into your development process from the start costs little more than building inaccessibly.

Whether you’re launching a new website or improving an existing one, prioritising accessibility is one of the most important decisions you can make. It’s not just the right thing to do — it’s good business sense, and it’s increasingly a legal requirement.

At JB Cyber Services, we’re committed to building websites that everyone can use. If you’d like help assessing your website’s accessibility, implementing improvements, or ensuring your next project is accessible from the ground up, we’re here to help.

The web should be for everyone. Let’s make sure yours is.