24 accessibility (a11y) terms in plain English — what each one means, a code example, and the gotcha worth knowing.
Last reviewed:
a11yA numeronym for "accessibility" — the "11" counts the letters between the first "a" and the last "y".
# same pattern as i18n (internationalization), l10n (localization)💡 Purely a typing shortcut, not a different concept — used constantly in issue titles and PR labels.
WCAGWeb Content Accessibility Guidelines — the internationally recognised standard defining what "accessible" means for web content.
# WCAG 2.2 has three conformance levels: A, AA, AAA💡 Pronounced "wuh-cag" or "wu-cag" — most legal/compliance requirements target level AA, not the strictest AAA.
assistive technologyAny software or hardware a person uses to interact with content differently than the default — screen readers, switch devices, magnifiers.
# screen readers, screen magnifiers, voice control, switch access, braille displays💡 Often abbreviated "AT" in accessibility docs and tickets.
POUR principlesThe four pillars WCAG is built on: content must be Perceivable, Operable, Understandable, and Robust.
# "not perceivable": an image with no alt text
# "not operable": a menu only openable by mouse hover💡 A useful mental checklist when reviewing a new feature for accessibility gaps.
semantic HTMLUsing HTML elements for their actual meaning (<button>, <nav>, <h1>) instead of generic <div>/<span> styled to look the part.
<!-- Bad -->
<div onclick="submit()">Submit</div>
<!-- Good -->
<button type="submit">Submit</button>💡 A real <button> gets keyboard focus, Enter/Space activation, and screen-reader announcement for free — a styled <div> gets none of it.
ARIAAccessible Rich Internet Applications — a set of HTML attributes that fill accessibility gaps for custom, non-native widgets.
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
</div>💡 The "first rule of ARIA" is: don't use ARIA if a native HTML element already does the job.
alt textA text alternative for an image, read aloud by screen readers and shown if the image fails to load.
<img src="chart.png" alt="Revenue grew 40% year over year">💡 A purely decorative image should use alt="" (empty, not omitted) so screen readers skip it entirely.
landmark regionA semantic region (<nav>, <main>, <header>, <footer>, <aside>) that lets assistive tech users jump directly to a section of the page.
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>💡 Screen reader users commonly navigate by landmark first, rather than reading the whole page top to bottom.
aria-labelProvides an accessible name for an element when there's no visible text to use — common on icon-only buttons.
<button aria-label="Close dialog">✕</button>💡 Overrides any visible text for screen readers — use aria-label carefully, since it can hide real text from AT if applied wrongly.
screen readerSoftware that reads on-screen content aloud (or to a braille display) for users who are blind or have low vision.
# common ones: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android)💡 Screen reader users often navigate by heading, landmark, or link list — not by reading everything sequentially.
accessible nameThe text a screen reader actually announces for an element — computed from visible text, alt, aria-label, or aria-labelledby, in a defined priority order.
<button aria-label="Delete item">🗑</button>
<!-- accessible name = "Delete item", not the emoji -->💡 A missing or wrong accessible name is the single most common accessibility bug in custom components.
live regionA region marked so screen readers automatically announce content changes inside it, without the user needing to navigate there.
<div aria-live="polite">3 items added to cart</div>💡 "polite" waits for a pause before announcing; "assertive" interrupts immediately — reserve assertive for urgent alerts only.
switch accessA method for operating a device using one or a few physical switches instead of a touchscreen or mouse, scanning through options sequentially.
# used by people with limited fine motor control💡 Depends entirely on every interactive element being properly focusable and operable by keyboard equivalents.
color contrast ratioA measured ratio between text color and background color — WCAG AA requires at least 4.5:1 for normal text, 3:1 for large text.
# black on white = 21:1 (max possible)
# light gray on white = often below 4.5:1 — fails AA💡 A common failure: gray placeholder text or "subtle" secondary text that looks fine to a designer but fails the measured ratio.
reflowContent reorganizing itself to remain usable at 400% zoom without horizontal scrolling — a WCAG 2.1 AA requirement.
# a two-column layout should stack into one column when zoomed heavily💡 Fixed-width layouts and horizontal-scroll-only tables are the classic reflow failures.
focus indicatorA visible outline or highlight showing which element currently has keyboard focus.
button:focus-visible {
outline: 2px solid #2563eb;
}💡 "outline: none" without a replacement is one of the most common and most damaging accessibility mistakes in CSS resets.
prefers-reduced-motionA CSS media feature that detects a user's OS-level preference to minimize animations, for users with vestibular disorders.
@media (prefers-reduced-motion: reduce) {
.animation { animation: none; }
}💡 Should disable or shorten parallax, auto-play carousels, and large motion effects, not just decorative transitions.
keyboard navigableEvery interactive element on the page can be reached and operated using only the keyboard (Tab, Shift+Tab, Enter, Space, arrow keys).
# test: unplug your mouse and try to complete the task💡 The single fastest, no-tool-needed accessibility audit anyone can run themselves.
focus trapKeeping keyboard focus contained within an open modal or dialog, so Tab doesn't silently move focus to content hidden behind it.
# focus cycles: last focusable element -> Tab -> back to first focusable element💡 A missing focus trap is why some modals let you "tab into" content you can't see, which is deeply disorienting for screen reader users.
skip linkA hidden link, revealed on keyboard focus, that lets a user jump straight past repeated navigation to the main content.
<a href="#main" class="skip-link">Skip to main content</a>💡 Usually the very first focusable element on the page, visually hidden until it receives keyboard focus.
tab orderThe sequence in which elements receive focus when pressing Tab — should match the visual/logical reading order.
<!-- tabindex="0" adds to natural order; positive tabindex values are almost always a bug -->
<div tabindex="0">Focusable div</div>💡 A positive tabindex value hijacks the natural order and is considered an anti-pattern in almost every real case.
axe / accessibility linterAutomated tools that scan a page for common accessibility violations — missing alt text, low contrast, missing labels.
npx @axe-core/cli https://example.com💡 Automated tools catch roughly 30-40% of real issues — manual keyboard and screen-reader testing is still required.
manual accessibility auditTesting a page by hand — keyboard-only navigation, an actual screen reader, and zoomed-in reflow checks — rather than relying on automated tools alone.
# checklist: tab through the page, then re-do the flow with VoiceOver/NVDA turned on💡 The only way to catch issues automated scanners fundamentally can't detect, like a confusing reading order or a misleading accessible name.
accessibility conformance levelHow closely a page or product meets WCAG — Level A (minimum), AA (the common legal/compliance target), or AAA (the strictest, rarely required in full).
# "WCAG 2.2 Level AA compliant" is the most common compliance claim💡 Claiming AAA compliance for an entire site is unusual — some AAA success criteria are intentionally very hard to satisfy universally.
aria-label."outline: none without a real focus indicator to replace it."