The web was built to be open to everyone. Yet for millions of people living with visual, auditory, motor, or cognitive disabilities, navigating the modern internet can feel like trying to enter a building with no ramp and no door handle. Web accessibility is the practice of removing those barriers — and it matters more than ever.
What Is Web Accessibility?
Web accessibility means designing and developing websites so that people with disabilities can perceive, understand, navigate, and interact with them effectively. This includes people who are blind or have low vision, those who are deaf or hard of hearing, people with motor impairments who cannot use a mouse, and individuals with cognitive or learning differences.
Importantly, accessibility doesn't only benefit people with permanent disabilities. It also helps people with temporary impairments (like a broken arm), situational limitations (like bright sunlight on a phone screen), and older users whose abilities may be changing. In short, accessible design is better design for everyone.
Understanding WCAG: The Accessibility Rulebook
The Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), are the internationally recognised standard for web accessibility. The current widely adopted version is WCAG 2.1, with WCAG 2.2 now available and WCAG 3.0 in development.
WCAG is organised around four core principles, often remembered by the acronym POUR:
- Perceivable — Information and UI components must be presentable to users in ways they can perceive (e.g. providing text alternatives for images).
- Operable — UI components and navigation must be operable by all users, including those who rely on keyboards or assistive technology.
- Understandable — Information and the operation of the UI must be understandable, with clear language and predictable behaviour.
- Robust — Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
Each principle contains specific guidelines, and each guideline has testable success criteria rated at three conformance levels: Level A (minimum), Level AA (standard target for most organisations), and Level AAA (enhanced). Most legal requirements and best-practice recommendations target Level AA compliance.
Common Accessibility Issues and How to Fix Them
Despite growing awareness, the same accessibility failures appear on websites time and again. Here are the most prevalent issues — and what you can do about them.
1. Missing or Poor Alt Text
Alternative text (alt text) is a written description attached to an image in HTML. Screen readers — software used by blind and low-vision users — read this text aloud in place of the image. When alt text is missing, a screen reader may announce the image file name (e.g. "IMG_4823.jpg") or simply say "image", leaving the user with no useful information.
Best practices for alt text:
- Be descriptive and concise — describe what the image shows and why it's there.
- For decorative images that add no information, use an empty alt attribute (
alt="") so screen readers skip them. - For images containing text (like infographics), include all the text in the alt description.
- Avoid starting with "Image of" or "Photo of" — screen readers already announce it as an image.
2. Insufficient Color Contrast
Low contrast between text and its background makes content difficult or impossible to read for people with low vision or colour blindness — and even for sighted users in bright environments. 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).
Use tools like the WebAIM Contrast Checker or browser DevTools to audit your colour palette. Never rely on colour alone to convey meaning — always pair it with text labels, icons, or patterns.
3. Keyboard Navigation Barriers
Many users — including those with motor impairments, power users, and screen reader users — navigate entirely by keyboard. A fully keyboard-accessible website means every interactive element (links, buttons, forms, modals) can be reached and activated using only the Tab, Enter, Space, and arrow keys.
Common keyboard accessibility failures include:
- Removing the default focus outline (
outline: none) without providing a visible alternative. - Keyboard focus becoming trapped inside a modal or widget with no way to escape.
- Custom interactive components (dropdowns, sliders) built without proper keyboard event handling.
- A logical, predictable tab order that doesn't match the visual layout.
Test your site by unplugging your mouse and navigating with the keyboard alone. If you get stuck, your users will too.
4. Screen Reader Incompatibility
Screen readers like NVDA, JAWS, and VoiceOver convert on-screen content into synthesised speech or Braille output. They rely heavily on semantic HTML and ARIA (Accessible Rich Internet Applications) attributes to understand and communicate page structure.
Key practices for screen reader compatibility:
- Use semantic HTML elements (
<nav>,<main>,<header>,<button>) rather than generic<div>elements for everything. - Provide descriptive labels for form inputs using
<label>elements oraria-labelattributes. - Use ARIA roles and properties only when native HTML semantics are insufficient — ARIA should enhance, not replace, good HTML.
- Ensure dynamic content updates (like live notifications or loading states) are announced using
aria-liveregions.
Legal Considerations: Accessibility Is Not Optional
Beyond ethics and good design, web accessibility carries real legal weight in many jurisdictions. Organisations that fail to meet accessibility standards risk litigation, regulatory penalties, and reputational damage.
- United States: The Americans with Disabilities Act (ADA) has been interpreted by courts to apply to websites. Section 508 of the Rehabilitation Act mandates accessibility for federal agencies and their contractors.
- European Union: The European Accessibility Act (EAA), effective from June 2025, requires many private-sector digital products and services to meet accessibility standards.
- United Kingdom: The Equality Act 2010 requires service providers to make reasonable adjustments for disabled people, which courts have extended to digital services.
- Canada: The Accessible Canada Act (ACA) sets out requirements for federally regulated organisations, with WCAG 2.1 Level AA as the benchmark.
The number of accessibility-related lawsuits has grown significantly year over year. Proactively building accessible websites is far less costly than retrofitting them under legal pressure — or settling a lawsuit.
Quick Wins: Improve Accessibility Starting Today
You don't need to overhaul your entire codebase overnight. These high-impact, low-effort improvements can meaningfully raise your site's accessibility level right away.
- Audit with free tools. Run your site through Lighthouse (built into Chrome DevTools), axe DevTools, or WAVE to get an instant accessibility report with actionable recommendations.
- Add alt text to all meaningful images. Go through your CMS or codebase and ensure every image has a descriptive alt attribute.
- Fix your colour contrast. Check your primary text and background colour combinations and adjust any that fall below the 4.5:1 ratio.
- Restore visible focus styles. Remove any CSS that hides the focus ring and replace it with a clearly visible custom style that matches your brand.
- Use semantic HTML. Replace presentational
<div>and<span>elements with meaningful tags like<button>,<nav>, and<article>. - Label all form fields. Every input, select, and textarea should have an associated
<label>element. Placeholder text alone is not sufficient. - Add a skip navigation link. A "Skip to main content" link at the top of the page lets keyboard users bypass repetitive navigation menus on every page load.
- Set the page language. Add a
langattribute to your<html>element (e.g.lang="en") so screen readers use the correct language and pronunciation.
Accessibility Is a Journey, Not a Destination
No website achieves perfect accessibility overnight, and that's okay. What matters is making consistent, intentional progress. Build accessibility into your design and development process from the start — include it in your definition of done, test with real assistive technologies, and involve users with disabilities in your testing where possible.
The web is at its best when it's open to everyone. By investing in accessibility, you're not just ticking a compliance box — you're building something that genuinely serves all of your users, expanding your audience, and demonstrating that your organisation values every person who visits your site.