What is Web Accessibility?
Accessibility (often abbreviated a11y) means building pages that people with disabilities — visual, auditory, motor, or cognitive — can use effectively, often with the help of assistive technology like screen readers.
Semantic HTML is the Foundation
The single biggest accessibility win is using the right semantic element for the job. Native elements like <button>, <a>, and <nav> come with built-in keyboard support and screen reader behavior for free.
Accessibility Fundamentals
- Every image has meaningful alt text (or alt="" if decorative).
- Every form input has an associated <label>.
- Heading levels follow a logical order (h1 → h2 → h3).
- Interactive elements are reachable and usable with a keyboard alone.
- Color is never the only way information is conveyed.
- Sufficient color contrast between text and background.
ARIA Attributes
ARIA (Accessible Rich Internet Applications) attributes add extra information for assistive technology when semantic HTML alone isn’t enough — typically for custom, JavaScript-driven widgets.
Common ARIA Attributes
<button aria-label="Close dialog">×</button>
<div role="alert">Your changes have been saved.</div>
<input type="text" aria-describedby="password-hint" />
<p id="password-hint">Must be at least 8 characters.</p>Useful ARIA Attributes
| Attribute | Purpose |
|---|---|
| aria-label | Provides an accessible name when there is no visible text |
| aria-labelledby | Points to another element that labels this one |
| aria-describedby | Points to an element with additional descriptive text |
| aria-hidden | Hides purely decorative content from assistive technology |
| role | Overrides or clarifies the semantic role of an element |
The First Rule of ARIA
No ARIA is better than bad ARIA. Always prefer a native semantic element over adding ARIA attributes to a generic <div> — ARIA should fill gaps, not replace semantics you could get for free.
Skip Links
A "skip to main content" link, hidden until focused, lets keyboard users bypass repetitive navigation and jump straight to the page’s main content.
Best Practice
Build with semantic HTML first, test your pages using only a keyboard, and run an automated checker (like Lighthouse or axe) to catch common accessibility issues early.
Summary
Accessibility is not an afterthought — it starts with the semantic HTML choices you make on day one. Combined with proper labels, alt text, and ARIA where needed, it ensures your pages work for everyone.