Accessibility in HTML (A11y)

Web accessibility (often called A11y) ensures that websites and applications can be used by everyone — including people with disabilities. Accessible websites are not only ethical and inclusive, but they also improve usability and user experience.

In this guide, we’ll cover everything you need to know about HTML accessibility with examples.

Introduction to Accessibility in HTML

What is Accessibility?

Accessibility means designing websites so that people with visual, auditory, cognitive, or motor impairments can use them easily.
Why It Matters:
- Makes websites inclusive for all users.
- Meets legal requirements (WCAG, Section 508).
- Enhances overall user experience.

Accessibility = Usability + Inclusivity.

Semantic HTML for Accessibility

Semantic HTML gives meaning to web content, helping both users and assistive technologies (like screen readers).

Examples:

<header>Website Header</header>
<nav>Navigation Links</nav>
<main>Main Content Area</main>
<footer>Footer Information</footer>

Benefits:

Easier navigation for screen readers.
Improves overall structure and clarity.

ARIA Roles & Attributes

ARIA (Accessible Rich Internet Applications) helps make dynamic content more accessible.

Common ARIA Roles:

<button role="button">Submit</button>
<nav role="navigation">Menu</nav>

Useful ARIA Attributes:

<button aria-label="Close Menu">X</button>
<div aria-hidden="true">This text is hidden from screen readers</div>

Tip: Always use native HTML elements first (like <button>, <nav>) before adding ARIA.

Alt Text for Images

The alt attribute describes images for screen readers and improves SEO.

Examples:

<img src="dog.jpg" alt="A brown dog playing in the park">
<img src="icon.png" alt=""> <!-- Decorative image -->

Keyboard Accessibility

Not all users use a mouse. Some rely on the keyboard (Tab, Enter, Space).

Example: Focus Navigation

<a href="#main" class="skip-link">Skip to Content</a>
<input type="text" tabindex="1">
<button>Submit</button>

Tips:

Maintain logical tab order.
Use :focus or :focus-visible to style focus states.
Add skip links for easy navigation.

Forms Accessibility

Forms should be accessible to screen readers.

Example:

<label for="email">Email Address</label>
<input type="email" id="email" aria-describedby="emailHelp">
<small id="emailHelp">We’ll never share your email.</small>

Media Accessibility

Videos, audio, and animations must also be accessible.

Example: Captions

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

Tips:

Add captions and transcripts.
Use aria-live for live updates (like chat messages).

Color & Contrast

Good contrast ensures text is readable.

Guidelines (WCAG):

Normal text: 4.5:1 contrast ratio.
Large text (18px+): 3:1 contrast ratio.

Example:

Bad: Light gray text on white background.

Good: Black text on white background.

? Don’t use color alone to convey meaning (e.g., “Error in red”). Add icons or text.

Testing & Tools

Accessibility must be tested regularly.

Tools for Testing:

Screen Readers: NVDA, JAWS, VoiceOver.
Browser Tools: Chrome Lighthouse, Firefox Accessibility Inspector.
Online Tools: WAVE, Axe.

Manual Testing:

Navigate only with keyboard.
Zoom content up to 200%.
Check captions and alt text.