HTML accessibility (a11y) is the practice of designing and coding web pages so that people with visual, auditory, motor, or cognitive disabilities can perceive, navigate, and interact with web applications effectively.
Accessible HTML relies on semantic HTML tags, proper keyboard focus management, alt text for images, and ARIA attributes when custom UI controls are built:
<!-- Accessible image with descriptive alt text -->
<img src="chart.webp" alt="Bar chart showing Q3 revenue growth up by 25%">
<!-- Accessible button with ARIA attributes for screen readers -->
<button aria-expanded="false" aria-label="Toggle Navigation Menu">
<span class="icon"></span>
</button>
Core accessibility pillars:
<button>, <a href>, <input>) have native keyboard focus and screen reader support.alt text for images and visual media so visually impaired screen reader users hear descriptions.aria-label, aria-expanded, or role attributes to clarify dynamic states on non-standard UI components.flowchart TD
A["HTML Code"] --> B["DOM Tree"]
B --> C["Browser Accessibility Tree"]
C --> D["Screen Reader / Assistive Audio Devices"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Accessibility Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Accessible Form Control</h2>
<form style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 450px;">
<!-- Accessible label linked to input -->
<label for="user-name" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Full Name <span style="color: #ef4444;" aria-hidden="true">*</span>
</label>
<input
type="text"
id="user-name"
name="username"
required
aria-required="true"
aria-describedby="name-hint"
style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #334155; margin-bottom: 0.5rem;">
<p id="name-hint" style="color: #94a3b8; font-size: 0.85rem; margin: 0;">Enter your first and last legal name.</p>
</form>
</body>
</html>
:focus-visible) when navigated via keyboard.<button> for clickable actions and <a href> for navigation: Never attach JS click handlers to static <div> tags without keyboard focus handling.Create a <button> element that includes aria-label="Close dialog modal" and aria-expanded="true"!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.