How to Build ADA-Compliant Websites

Jul 29, 2026

ADA Compliance means designing and developing a website so that everyone, including people with disabilities, can access and use it without barriers.

The term ADA comes from the Americans with Disabilities Act (1990), a U.S. civil rights law that prohibits discrimination against individuals with disabilities. Although the law is American, its accessibility principles are now followed worldwide because they improve usability for everyone.

For websites, ADA compliance is generally achieved by following the Web Content Accessibility Guidelines (WCAG) 2.2, most commonly at Level AA.

Why is ADA Compliance Important?

Imagine trying to use a website if you:

Cannot see the screen.
Cannot hear audio.
Cannot use a mouse.
Have limited hand movement.
Have colour blindness.
Have low vision.
Have dyslexia or cognitive difficulties.

Many users rely on assistive technologies such as:

Screen readers
Keyboard-only navigation
Voice control software
Screen magnifiers
Braille displays
High-contrast display modes

If a website is not built with accessibility in mind, these users may be unable to access information or complete essential tasks.

Here I have created a list of rules (handbook) which can be followed while coding ADA compliant web page.

1. Semantic HTML

Semantic HTML helps browsers and assistive technologies understand page structure.

<header>
  <nav aria-label="Primary Navigation">
    ...
  </nav>
</header>

<main id="main">

<section>

<h2>Services</h2>

<p>...</p>

</section>

</main>

<footer>
...
</footer>

DON’T

<div id="header">

<div id="menu">

<div id="content">

<div id="footer">

Why?

Screen readers recognise semantic landmarks allowing users to jump directly to Header, Navigation, Main Content and Footer.

2. Heading Structure

<h1>ADA Compliance Guide</h1>

<h2>Images</h2>

<h3>Alternative Text</h3>

<h2>Forms</h2>

DON’T

<h1>ADA Guide</h1>

<h4>Images</h4>

<h6>Forms</h6>

Never skip heading levels.

3. Images

Informative Image

<img
src="doctor.webp"
alt="Doctor examining a patient with a stethoscope"
width="900"
height="600">

DON’T

<img src="doctor.webp">

<img src="doctor.webp" alt="image">

<img src="doctor.webp" alt="photo">

Decorative Image

<img src="divider.svg" alt="">

DON’T

<img src="divider.svg" alt="decorative line">

4. Image Formats

Photographs

WebP

<picture>
 <source srcset="hero.webp" type="image/webp">
 <img src="hero.jpg"
      alt="Students learning online">
</picture>

PNG for large photographs.

Logos

SVG

<img src="logo.svg"
alt="ABC Company logo">

JPG logo

Reason: Blurry when scaled.

5. Links

<a href="/pricing">
View Pricing Plans
</a>

DON’T

<a href="/pricing">
Click Here
</a>

Users of screen readers often browse only link text.

6. Buttons

**DO*8

<button type="submit">
Save Changes
</button>

DON’T

<div onclick="save()">
Save
</div>

Div elements are not keyboard accessible.

7. Forms

Labels

<label for="email">
Email Address
</label>

<input
id="email"
type="email"
required>

DON’T

<input
placeholder="Email Address">

Placeholder text disappears and is not a replacement for labels.

Validation

<div
class="error"
aria-live="polite">

Please enter a valid email address.

</div>

DON’T

Invalid

Everything must be operable without a mouse.

:focus{
outline:3px solid #005FCC;
outline-offset:2px;
}

DON’T

:focus{
outline:none;
}

9. Colour Contrast

Background

#FAFAFA

Text

#1F1F1F

Contrast > 4.5:1

DON’T

Background

#FFFFFF

Text

#BEBEBE

Fails WCAG.

<a class="skip-link"
href="#main">
Skip to Main Content
</a>

11. Tables

<table>

<thead>

<tr>

<th scope="col">Name</th>

<th scope="col">Phone</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">John</th>

<td>123456</td>

</tr>

</tbody>

</table>

DON’T

<table>

<tr>

<td>Name</td>

<td>Phone</td>

</tr>

</table>

12. ARIA

Native HTML Preferred

<button>

Download PDF

</button>

DON’T

<div
role="button">

Download PDF

</div>

13. Videos

Closed Captions
Transcript
Keyboard Controls

DON’T

Autoplay with sound.

14. CSS

Recommended Variables

:root{

--bg:#FAFAFA;
--surface:#FFFFFF;
--text:#1F1F1F;
--text-light:#4A4A4A;

--primary:#005FCC;
--primary-hover:#003D80;

--border:#D9D9D9;

--success:#0F7B0F;

--warning:#A65C00;

--danger:#B00020;

}

15. Accessible Colour Palette

Purpose	Hex Code	Usage
Background	`#FAFAFA`	Main page background
Surface	`#FFFFFF`	Cards, panels, modals
Text	`#1F1F1F`	Primary text
Links	`#005FCC`	Hyperlinks and primary actions
Hover	`#003D80`	Link and button hover state
Success	`#0F7B0F`	Success messages and confirmations
Warning	`#A65C00`	Warning messages and alerts
Error	`#B00020`	Error messages and validation failures