Accessibility
Simple HTML practices that make pages usable for everyone
Overview
Accessibility means building pages that everyone can use, including people who rely on screen readers, keyboards, or other assistive technology. Much of it comes free with good HTML: semantic tags, descriptive text, and proper labels. Learning these basics early saves you from costly rework later and makes the web better for all.
Syntax / Usage
Prefer native semantic elements, provide text alternatives, and label interactive controls. Use ARIA attributes only when HTML alone cannot express the meaning.
<!-- Descriptive alt text for images -->
<img src="chart.png" alt="Sales rose 20% in Q3" />
<!-- Labels tied to inputs -->
<label for="search">Search</label>
<input type="search" id="search" name="q" />
<!-- Meaningful link text, not "click here" -->
<a href="/report.pdf">Download the annual report (PDF)</a>
<!-- ARIA label when no visible text exists -->
<button aria-label="Close dialog">×</button>
Examples
A skip link that lets keyboard users jump past navigation:
<body>
<a href="#main" class="skip-link">Skip to content</a>
<nav><!-- links --></nav>
<main id="main">
<h1>Welcome</h1>
</main>
</body>
Using semantic buttons instead of clickable divs so keyboards work automatically:
<!-- Good: focusable and works with Enter/Space -->
<button type="button">Toggle menu</button>
Common Mistakes
- Missing or unhelpful
alttext on informative images - Using
<div>with click handlers instead of a real<button> - Vague link text like "click here" that gives no context out of context
- Forgetting to associate
<label>elements with their form inputs - Relying on color alone to convey meaning, which excludes color-blind users
See Also
html-semantic-elements html-forms html-links-and-images