Website Accessibility: WCAG 2.2, ADA & Inclusive Design
Over one billion people live with a disability. An inaccessible website excludes them entirely — and in many countries, exposes your business to legal liability. This guide covers every accessibility standard, implementation pattern, and testing method you need to build websites that work for everyone.
What is Website Accessibility?
Website accessibility is the practice of designing and building websites and web applications that can be used by all people — including those with visual, auditory, motor, speech, and cognitive disabilities. It means ensuring that assistive technologies like screen readers can interpret your content, that keyboard-only users can navigate and interact with every feature, and that your design choices do not create barriers for any segment of your audience.
International standard
WCAG 2.2 — published by W3C, adopted globally as the legal baseline
Legal requirement
ADA (US), European Accessibility Act (EU), Equality Act (UK)
SEO connection
Accessible HTML is semantic HTML — directly improves crawlability and rankings
▸ WCAG Principles
The 4 POUR Principles of WCAG 2.2
Every WCAG success criterion maps to one of four core principles — Perceivable, Operable, Understandable, and Robust. Understanding these principles helps you make accessibility decisions beyond just following a checklist.
Perceivable
All information and UI components must be presentable to users in ways they can perceive — no content should be invisible to all their senses.
Alt text for images
Captions for video
Sufficient colour contrast
Content not conveyed by colour alone
Operable
All UI components and navigation must be operable — users must be able to operate the interface regardless of input method.
Full keyboard navigation
No keyboard traps
Skip navigation links
Sufficient time to read and use content
Understandable
Information and operation of the UI must be understandable — users must be able to understand both the content and how the interface works.
Page language declared
Consistent navigation
Clear error messages
Labels for all inputs
Robust
Content must be robust enough to be interpreted by a wide variety of assistive technologies — current and future.
Valid, semantic HTML
ARIA used correctly
Status messages programmatically determined
Compatible with screen readers
▸ Conformance Levels
WCAG Levels A, AA, and AAA — Which One Do You Need?
WCAG has three conformance levels. For most businesses, Level AA is the legally required and practically achievable target. Here is what each level covers and who needs it.
Minimum accessibility. Addresses the most basic barriers. Required as a baseline — without it, some users cannot access content at all.
Example requirements
Non-text content has alt text
Keyboard accessible
No seizure-inducing content
Page has a title
Standard compliance target. Required for ADA, EAA, and most international accessibility laws. The level most businesses must reach.
Example requirements
4.5:1 colour contrast ratio
Resize text to 200% without loss
Focus visible on all interactions
Error identification and suggestion
Highest conformance level. Not required for most sites — recommended for government, healthcare, and public service websites.
Example requirements
7:1 colour contrast ratio
Sign language for video
Reading level below secondary
No timing requirements
▸ Accessibility Checklist
The Complete Website Accessibility Checklist
Every item on this checklist has a direct impact on whether a user with a disability can access your site. Critical items must be resolved before launch. These are the same checks we run on every 4Byte project.
Semantic HTML
Use semantic HTML5 elements — header, nav, main, section, article, footer
Ensure exactly one <h1> per page with a logical heading hierarchy (H1 → H2 → H3)
Use <button> for interactive elements and <a> for navigation — never a <div>
Declare page language with lang attribute on the <html> element
Use <label> elements explicitly associated with every form input
Use <table> with <thead>, <tbody>, and scope attributes for tabular data
Colour & Contrast
Normal text must meet 4.5:1 contrast ratio against its background (WCAG AA)
Large text (18pt or 14pt bold) must meet 3:1 contrast ratio
UI components and icons must meet 3:1 contrast ratio against adjacent colours
Never convey information using colour alone — always pair with text or icon
Test all colour combinations with WebAIM Contrast Checker before launch
Ensure focus indicators are visible at sufficient contrast
Keyboard & Focus
All interactive elements must be reachable and operable with Tab and Enter keys
Add a skip navigation link as the first focusable element on every page
Never remove the default focus outline without replacing it with a visible alternative
Ensure no keyboard traps — users can always Tab away from any component
Modal dialogs must trap focus inside until closed, then return focus to trigger
Implement logical focus order that matches the visual reading order
Images & Media
All informative images must have descriptive alt text
Decorative images must have empty alt="" so screen readers skip them
Complex images (charts, graphs) need extended descriptions
Videos must have accurate captions and audio descriptions where needed
Avoid auto-playing video or audio — provide visible controls
Ensure no content flashes more than 3 times per second
▸ ARIA Patterns
6 ARIA Patterns Every Developer Should Know
These are the most common scenarios where native HTML semantics are insufficient and ARIA attributes are required to make interactive components accessible to screen reader users. Use these patterns in every project.
Icon-only button
A button with only an SVG icon has no accessible name for screen readers.
Navigation landmark
Multiple <nav> elements on a page cannot be distinguished by screen reader users.
Form error message
An error message that appears below an input is not programmatically associated with that input.
Loading state
A spinning loader gives no feedback to screen reader users about what is happening.
Expandable section
A custom accordion component gives no indication of expanded or collapsed state.
Tab component
A custom tab interface is not identified as a tab list by assistive technologies.
▸ Common Issues
4 Accessibility Issues That Appear on Most Website Audits
These four issues are found on the majority of websites that have never had an accessibility audit. Each is fixable — and each has a concrete, implementable solution.
Missing or empty alt text on images
Impact
Screen reader users receive no information about image content. Informative images become invisible to assistive technology users.
Fix
Add descriptive alt text to all informative images. Use alt="" (empty) for decorative images. For complex visuals like charts, link to a text description.
Insufficient colour contrast
Impact
Users with low vision or colour blindness cannot read text that does not meet the 4.5:1 contrast ratio. This is one of the most common WCAG failures.
Fix
Test all text and background colour combinations with WebAIM Contrast Checker. The 4Byte dark theme uses white text on dark backgrounds which consistently passes AA contrast requirements.
No visible focus indicator
Impact
Keyboard-only users have no way to know which element is currently focused. The page is effectively unusable without a mouse.
Fix
Never use outline: none without providing an alternative focus style. Implement a clearly visible focus ring using outline or box-shadow with sufficient contrast.
Interactive elements built with non-semantic HTML
Impact
A <div> with an onClick handler is not keyboard accessible, not identifiable by screen readers, and not operable by assistive technologies.
Fix
Replace all clickable <div> and <span> elements with native <button> or <a> elements. Native HTML elements provide keyboard support, focus management, and screen reader semantics automatically.
▸ Testing Tools
How to Test Your Website for Accessibility
Accessibility testing requires both automated tools and manual testing. Automated tools catch roughly 30–40% of accessibility issues. The remaining 60–70% require human testing — especially keyboard navigation and screen reader testing.
The keyboard test
Close your mouse and navigate your entire website using only Tab, Shift+Tab, Enter, Space, and Arrow keys. If you get stuck anywhere, that is an accessibility failure. This single test catches more issues than most automated tools combined.
axe DevTools
Browser extension for automated accessibility scanning — flags violations with remediation guidance
WAVE
Visual accessibility evaluation — overlays icons directly on the page to show issues in context
Google Lighthouse
Accessibility audit built into Chrome DevTools — target 90+ on every page
WebAIM Contrast Checker
Test any colour combination against WCAG AA and AAA contrast requirements
VoiceOver (macOS/iOS)
Built-in Apple screen reader — test how the page sounds to visually impaired users
NVDA (Windows)
Free open-source Windows screen reader — the most widely used screen reader globally
▸ Accessibility at 4Byte Agency
Accessibility is a Build Requirement, Not an Afterthought.
Every website 4Byte Agency ships meets WCAG 2.2 Level AA by default. We use semantic HTML throughout, test keyboard navigation on every interactive component, validate colour contrast on every design decision, add ARIA labels on all icon-only elements, and run the full Lighthouse Accessibility audit before launch.
We also offer standalone accessibility audits for existing websites — a full axe scan, keyboard navigation review, and prioritised WCAG fix list.
Book a free accessibility audit→▸ FAQ
Frequently Asked Questions
Common questions about website accessibility — WCAG, ADA compliance, ARIA, testing tools, and how 4Byte handles accessibility on every build.
What is website accessibility?+
Website accessibility is the practice of designing and building websites usable by everyone — including people with visual, auditory, motor, and cognitive disabilities. An accessible website works with screen readers, supports keyboard-only navigation, has sufficient colour contrast, and provides text alternatives for non-text content. It is both a legal requirement in many jurisdictions and a direct SEO and UX quality signal.
What is WCAG and what are the different levels?+
WCAG (Web Content Accessibility Guidelines) is the international accessibility standard from the W3C. It is built around four principles — Perceivable, Operable, Understandable, and Robust. It has three levels: Level A (minimum baseline), Level AA (standard legal compliance target for most businesses), and Level AAA (highest, typically for government and public services). WCAG 2.2 is the current version in 2025.
Is website accessibility a legal requirement?+
Yes, in many jurisdictions. In the US, the ADA requires websites of public-facing businesses to be accessible — courts have consistently ruled websites are places of public accommodation. In the EU, the European Accessibility Act requires WCAG 2.1 AA compliance by 2025. In the UK, the Equality Act 2010 applies. Non-compliance exposes businesses to lawsuits, fines, and reputational risk.
What colour contrast ratio is required for accessibility?+
WCAG 2.2 Level AA requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text. UI components and graphical elements require 3:1 against adjacent colours. Use WebAIM Contrast Checker to test any combination before launch.
What are ARIA labels and when should I use them?+
ARIA labels provide additional context to assistive technologies when native HTML semantics are insufficient. Use aria-label for elements without visible text (like icon-only buttons). Use aria-labelledby to reference an existing element as a label. Use aria-describedby for supplementary descriptions. The first rule of ARIA: always use native HTML elements before reaching for ARIA attributes.
How do I test my website for accessibility?+
Use a combination of automated and manual testing. Automated: axe DevTools extension, WAVE, Google Lighthouse Accessibility audit (target 90+). Manual: navigate the entire site using only keyboard (Tab, Enter, Arrow keys, Escape); test with VoiceOver on Mac or NVDA on Windows; check all colour contrast with WebAIM Contrast Checker; test at 200% browser zoom.
Does website accessibility affect SEO?+
Yes significantly. Accessibility and SEO overlap heavily — both benefit from semantic HTML, descriptive alt text, meaningful link text, fast load times, and clear page structure. Google's crawlers effectively act as screen readers — they rely on the same semantic markup and text alternatives that assistive technologies use. An accessible website is almost always a better-performing SEO website.
Does 4Byte Agency build accessible websites by default?+
Yes — accessibility is a build requirement on every 4Byte project. Every site ships with semantic HTML5, WCAG 2.2 AA colour contrast, keyboard navigation, ARIA labels on all icon-only interactive elements, skip navigation links, descriptive alt text on all images, visible focus indicators, and a Lighthouse Accessibility score of 90+ on every page.
▸ Related Resources
Continue Learning
Explore more guides on technical excellence, SEO, and building websites that perform for every user and every search engine.
Technical SEO Guide
Accessibility and SEO overlap significantly — start here for the full technical picture.
Website Performance Optimisation
Fast load times benefit both accessibility and search rankings.
Website Development Guide
The complete guide to building professional websites in 2025.
Website Redesign Guide
Redesign with accessibility built in from the first wireframe.
Conversion Rate Optimisation
Accessible sites convert better — learn the full CRO picture.
Website Maintenance Guide
Keep your website accessible, secure, and performant after launch.
Build a website that works for everyone.
Tell us about your site — we will audit every accessibility issue, give you a prioritised WCAG fix list, and implement the changes on a fixed price. First audit call is free.
WCAG 2.2 AA
Full compliance audit
Keyboard Test
Manual navigation review
Free Audit
Full axe + Lighthouse scan