HTML Accessibility Guide

Why HTML accessibility matters

Over 1.3 billion people globally live with some form of disability. Web accessibility ensures your site is usable by people with visual, motor, auditory, and cognitive disabilities. Beyond ethics, it's increasingly a legal requirement — the ADA in the US and EN 301 549 in the EU both mandate accessible web content.

Google has also confirmed that accessible sites tend to rank better, since accessibility improvements overlap heavily with good SEO practices — both rely on meaningful structure, descriptive text, and clear navigation.

ARIA labels and roles

ARIA (Accessible Rich Internet Applications) attributes add semantic context to HTML elements. Use them when native HTML semantics aren't enough:

<!-- Button without visible text -->
<button aria-label="Close dialog">✕</button>

<!-- Navigation landmark -->
<nav aria-label="Main navigation">...</nav>

<!-- Live region for dynamic content -->
<div aria-live="polite" id="status"></div>

<!-- Expandable section -->
<button aria-expanded="false" aria-controls="panel">Toggle</button>
<div id="panel" hidden>...</div>

Keyboard navigation

Every interactive element on your page must be reachable and operable with a keyboard alone. Test by pressing Tab to move through the page:

• All links, buttons, and form inputs must receive keyboard focus
• Focus order must be logical (matches visual reading order)
• Modal dialogs must trap focus while open
• Use tabindex="0" to make custom elements focusable
• Never use tabindex values above 0 — this breaks natural flow
• Provide a "Skip to main content" link as the first element on the page

<!-- Skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">...</main>

Images and alt text

Every <img> element needs an alt attribute. What goes in it depends on the image's role:

• Informative images: describe the content — alt="Bar chart showing Q3 revenue up 24%"
• Decorative images: use empty alt — alt="" — so screen readers skip it
• Functional images (buttons, icons): describe the action — alt="Search"
• Complex images: provide a longer description in nearby text or via aria-describedby

Accessible forms

Forms are among the most common accessibility failures on the web. The rules are simple:

<!-- Always associate labels with inputs -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required
       aria-describedby="email-hint">
<p id="email-hint">We'll send a confirmation link.</p>

<!-- Error messages -->
<input type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Enter a valid email address.</p>

Color and contrast

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+). This affects many common design choices — light grey text on white fails, for example.

Use the Color Picker tool to check contrast and pick accessible color pairs.

Testing your page

• Run the HTML Validator to catch structural errors
• Install axe DevTools or WAVE browser extension for automated checks
• Tab through the entire page with keyboard only
• Test with VoiceOver (Mac/iOS) or NVDA (Windows) screen reader
• Check color contrast with a contrast analyser