Author
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.
What is Accessibility?
Accessibility means designing websites so that people with visual, auditory, cognitive, or motor impairments can use them easily.
Why It Matters:
Accessibility = Usability + Inclusivity.
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:
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.
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 -->
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:
:focus or :focus-visible to style focus states.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>
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:
aria-live for live updates (like chat messages).Good contrast ensures text is readable.
Guidelines (WCAG):
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.
Accessibility must be tested regularly.
Tools for Testing:
Manual Testing: