Accessibility (a11y) Introduction
Accessibility (often abbreviated a11y — "a", 11 letters, "y") is the practice of building web content that people with disabilities can perceive, navigate, and interact with. That includes people using screen readers, keyboard-only navigation, voice control, screen magnification, and many other assistive technologies.
The POUR principles
The Web Content Accessibility Guidelines (WCAG) organize accessibility around four principles, memorable as POUR.
Principle | Meaning |
|---|---|
Perceivable | Content must be presentable in ways every user can perceive — text alternatives for images, captions for video, sufficient color contrast |
Operable | Interface components must be operable by everyone — full keyboard access, enough time to read/interact, no content that triggers seizures |
Understandable | Content and operation must be understandable — readable text, predictable navigation, clear error messages |
Robust | Content must work reliably across current and future tools, including assistive technology — valid, semantic markup |
Why semantic HTML is the foundation
Assistive technology doesn't see pixels — it reads the DOM. A screen reader announces a native button element as "button," tells the user it's clickable, and lets them activate it with Enter or Space, all for free. Recreate that same look with a styled div, and none of that behavior exists unless you rebuild it yourself with ARIA and JavaScript.
<!-- Inaccessible by default: not focusable, not announced as a button,
Enter/Space do nothing without extra JavaScript -->
<div class="btn" onclick="submitForm()">Submit</div>
<!-- Accessible for free: focusable, announced as a button, activates
on both Enter and Space automatically -->
<button onclick="submitForm()">Submit</button>Native elements (button, a, input, select) come with built-in keyboard support and screen-reader semantics.
Headings (h1–h6) let screen reader users jump directly between sections instead of listening to the whole page.
Landmarks (nav, main, aside, footer) let assistive tech users skip straight to the part of the page they want.
Meaningful alt text lets non-sighted users know what an image conveys.
Using the right element for the job is almost always less work than recreating its behavior manually.
WCAG overview
WCAG defines success criteria at three conformance levels — A (minimum), AA (the level most laws and organizations target), and AAA (enhanced). Most accessibility audits and legal requirements reference WCAG 2.1 or 2.2 at level AA.
Level A: the most basic accessibility features — without them, some users cannot access content at all.
Level AA: the commonly required standard for public and commercial websites, covering contrast ratios, resizable text, and more.
Level AAA: the highest level, often impractical to apply site-wide, but valuable for specific critical content.