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."Semantic HTML elements like <button> or <nav> come with accessibility built in for free — keyboard focus, correct role, and screen-reader announcement. ARIA is a set of attributes (role, aria-label, aria-selected, etc.) that patches in that same information onto generic or custom elements when no native element fits. The "first rule of ARIA" is not to use it if a native HTML element already does the job, since ARIA only describes behaviour — it does not add it.
WCAG defines three levels: A is the minimum baseline, AA is the level almost every legal and compliance requirement targets (e.g. 4.5:1 color contrast for normal text), and AAA is the strictest level, with some success criteria that are intentionally very hard to meet across an entire site. Most organizations aim for "WCAG 2.2 AA" rather than claiming full AAA compliance.
An <img> with no alt attribute is technically invalid and some screen readers will fall back to reading the filename aloud, which is confusing noise. An empty alt="" explicitly marks the image as decorative, so assistive technology skips it entirely and moves straight to the next meaningful content.
A "polite" live region waits for the screen reader to finish whatever it is currently announcing before reading the update — good for non-urgent status messages like "3 items added to cart". An "assertive" live region interrupts immediately, which should be reserved for urgent, time-sensitive alerts like a failed payment, since overusing it is disorienting.
tabindex="0" adds an element into the natural document-order tab sequence, which is normally correct. A positive value like tabindex="5" instead hijacks the tab order and forces that element to be focused out of sequence, ahead of elements that appear before it visually — this almost always creates a confusing, unpredictable keyboard experience and is avoided in nearly every real-world case.
A focus trap keeps keyboard focus cycling within an open modal or dialog, so pressing Tab from the last focusable element wraps back to the first one instead of moving focus to content hidden behind the modal. Without one, a keyboard or screen-reader user can silently tab into page content they cannot see, which is deeply disorienting.
The accessible name is computed from a defined priority order: aria-labelledby first, then aria-label, then visible text content, then other fallbacks like the alt attribute or title. It is what a screen reader actually announces for that element — a missing or wrong accessible name (for example, an icon-only button with no label) is one of the most common accessibility bugs in custom components.
WCAG AA requires at least a 4.5:1 contrast ratio between text and its background for normal-size text, and 3:1 for large text. Light gray "subtle" secondary text and low-contrast placeholder text are classic failures — they often look fine to a sighted designer but fail the measured ratio for users with low vision.
Reflow requires that content reorganizes itself to stay usable at 400% zoom without needing to scroll horizontally in two dimensions — for example, a two-column layout should collapse into a single column. Fixed-width layouts and tables that only work via horizontal scrolling are the classic failures of this success criterion.
Yes — the page lists a last-reviewed date, and terms are periodically checked against the current WCAG version and common assistive-technology behaviour so the definitions and code examples stay accurate.