Glossary

123 terms from Web Accessibility, in plain words, each with the chapter that teaches it.

Search the glossary

#

:focus-visible: A CSS selector matching an element when the browser decides the user needs to see focus, such as after a Tab press but not a mouse click. It styles a custom focus ring, and outline-offset leaves a gap so the ring shows even around a same-colored button.

A

AA: The usual WCAG target level. It includes all level A criteria, and laws and lawsuits nearly always mean this level.
AAA: The highest WCAG conformance level. Some of it can't be met for all content, so nobody asks for all of it, though easy parts like reduced motion are worth doing.
Accessibility: Making sure everyone, disabled people included, can use what you build, such as Kettle & Crane's shop.
Accessibility tree: A simplified copy of the page that the browser builds from your HTML and gives to assistive technology. Dana's screen reader reads only this tree, never the CSS.
Accessible description: Extra text read after an element's name and role, often supplied through aria-describedby, such as a zip code format hint.
Accessible name: The words a screen reader announces for a control, such as a button's text or a field's label. A button with no name is just read as "button".
Accessible name computation: The fixed order browsers follow to pick a name: aria-labelledby, then aria-label, then the native source (label, alt or content), then title.
ADA: The US law banning discrimination against disabled people. Title II covers governments and Title III covers businesses open to the public, like shops.
Alt text: The text in an image's alt attribute that stands in for it for screen readers. What it says depends on the image's job, and decorative images get alt="".
ARIA: A set of attributes that change what the accessibility tree says (roles, states, properties) but add no behavior. The first rule is to use native HTML instead when you can.
aria-atomic: Makes a live region read its whole content when any part changes, not just the changed words. role="status" and role="alert" set it for you.
aria-controls: An ARIA property holding the id of the element a control operates, such as the FAQ answer that a button shows or hides.
aria-describedby: Points to one or more elements by id whose text becomes the field's description, read after its name. It's used for hints and error messages.
aria-expanded and aria-pressed: ARIA states that tell whether a control's panel is open (aria-expanded) or a toggle button is on (aria-pressed). Your script must update them together with what they describe.
aria-hidden: Removes an element and everything inside it from the accessibility tree while leaving it visible, useful for decorative icons. Never put it on something focusable.
aria-invalid: Marks a form field as failing validation so screen readers say "invalid entry". The checkout script sets it when a field fails.
aria-label: An ARIA attribute that supplies an accessible name directly as text. It beats a button's visible text, which can break voice control if the words differ.
aria-labelledby: Names an element from the text of other elements whose ids it lists. A dialog or section can be named by its own heading this way.
aria-live: Turns an element into a live region. polite waits until the screen reader finishes speaking, while assertive interrupts.
Assistive technology: Software or hardware that helps a disabled person use a computer, such as screen readers, magnifiers and switches.
Audio description: Narration of a video's important visual details that aren't said aloud, needed under criterion 1.2.5. It can be a voice in the pauses or a second version of the video.
Autocomplete: An attribute telling the browser what a field holds (name, email, postal-code, address-level1) so it can fill saved details. It satisfies criterion 1.3.5.
Autoplay, motion and flashing: Rules for media: don't autoplay sound (1.4.2), give a pause button to anything moving over 5 seconds (2.2.2), and never flash more than three times a second (2.3.1).
axe DevTools: A free browser extension from Deque that scans a page and lists each problem with the element and a link explaining the fix.
axe-core: The free rule library, made by the company Deque, that powers Lighthouse's checks, axe DevTools and the audit.mjs script. The @axe-core/playwright package runs it inside pages Playwright opens.

B

Banner: The landmark role created by a page's top-level header element, holding the logo, site name and main menu.
Browse mode: NVDA's mode on web pages where single letter keys, like H for headings, move you around the page instead of typing.

C

Captions: The words and important sounds of a video shown as timed text, for people who can't hear it. Subtitles, by contrast, translate speech for people who can hear.
Cognitive: To do with thinking, memory, reading and focus. Cognitive disabilities such as dyslexia, ADHD or memory loss make dense text, time limits and surprises hard.
Color blindness: Trouble telling some colors apart, most often red and green. Lin can't tell Kettle & Crane's green and pale red stock dots apart.
Conformance: Passing every criterion of a WCAG level; there's no partial credit, and a testing tool's score is not conformance.
Contrast ratio: A number from 1:1 to 21:1 comparing text color to its background. Normal text needs 4.5:1, large text and control parts 3:1.

D

Data table: A table that holds real data, given a caption that names it and th header cells with scope="col" or scope="row" so screen readers announce the header with each value. Tables are never for layout.
data- attribute: A custom HTML attribute for storing extra data on an element, which a script reads. The shop's Add to cart buttons store the product name in data-name.
Decorative image: An image that adds nothing or repeats nearby text. It gets alt="" so screen readers skip it; omitting alt entirely is different and may read the file name.
details and summary: Native HTML elements for a disclosure: summary is the clickable part and details holds the hidden content. It works with the keyboard without any script or ARIA.
DevTools: Chrome's built-in developer tools, including the Accessibility pane, color picker, device toolbar, Rendering tab and Lighthouse.
Dialog: A native HTML element for pop-up boxes like Kettle & Crane's cart. Opening it with showModal() moves focus inside, makes the rest of the page inert, and lets Escape close it.
Disability: A condition that makes some ways of seeing, hearing, moving or thinking hard or impossible. It can be permanent, temporary or situational.
Disclosure: A control that shows or hides content, like an FAQ answer. The native version uses details and summary; the ARIA version needs aria-expanded, aria-controls and a script.
display: none: CSS (and the hidden attribute) that hides an element from everyone, including screen readers, as opposed to visually-hidden.

E

Error identification: Criteria 3.3.1 and 3.3.3: say in text, not just color, which field failed and how to fix it, such as "Enter a 5-digit zip code" rather than "Invalid".
Error summary: A box at the top of a form listing the number of problems with a link to each field. The script moves focus to its heading so Dana hears it at once.
European Accessibility Act: An EU law, applying since June 28, 2025, requiring accessible online shops that sell to EU customers.
Exit code: The number a program hands back when it ends: 0 means success and anything else failure. audit.mjs sets it to 1 when problems are found so other tools can stop a release.

F

Failures: WCAG's documented common ways to fail a criterion, such as F78 for hiding the focus indicator.
Fieldset and legend: fieldset groups related controls such as radio buttons, and legend gives the group its name, so Dana hears the question with each option.
Figure and figcaption: Elements that keep an image and its caption together. The caption names the figure, useful for a chart's text summary.
Focus indicator: The outline the browser draws around the focused element. Removing it with outline: none leaves keyboard users like Marcus lost.
Focus mode: NVDA's mode where keys type into a text field instead of moving around the page. NVDA+Space switches modes by hand.
Focus not obscured: Criterion 2.4.11: the focused element must not be completely hidden, for example behind a sticky header. Setting scroll-padding-top on html scrolls focused things clear of the header.
Focus order: The order Tab moves through a page, which follows the HTML source rather than the visual layout. CSS tricks like flexbox order can make them differ.
Focusable: Able to receive keyboard focus, like links with href, buttons and form fields. A div with a click handler is not.
Forced colors: A system mode, such as Windows contrast themes, that replaces page colors with a few the user chose. Background colors vanish, so shapes drawn only with fills need a border.
Form validation (pattern, checkValidity()): The pattern attribute holds the format a field must match, such as [0-9]{5} for five digits. checkValidity() returns true if a field passes its own rules (required, type="email", pattern).
Functional image: An image that is a link or button, so its alt says where it goes or what it does, like "Kettle & Crane home" for the logo.

G

Guideline: A broad goal under a WCAG principle, such as 1.4 Distinguishable; success criteria sit beneath it.

H

Heading outline: The headings of a page read like a table of contents: one h1, levels in order without skipping going down, chosen by structure and never by size. Screen reader users skim a page by its headings.
Headless: A browser running with no window on screen, as Playwright does by default for scripted checks.

I

Identify Input Purpose: Criterion 1.3.5: fields about the user, like name and email, should carry autocomplete values so browsers can fill them.
Inert: Unable to be focused, clicked or read by a screen reader, like the page behind a modal dialog. The inert attribute applies this to any element.
Issue log: A table of problems found in an audit, each with where it is, the WCAG criterion it fails, who it blocks and the fix.

K

Keyboard trap: A part of the page that focus can enter but not leave by keyboard, such as a badly built embedded map or video player (criterion 2.1.2).

L

Label in Name: Criterion 2.5.3: a control's accessible name should start with its visible words, so voice control users saying "Click Continue to payment" succeed.
Landmarks: The big page regions screen reader users jump between, created by header, nav, main, aside, footer and search. Two of the same kind need distinct aria-labels.
lang attribute: An attribute on html (or any element) that names its human language so screen readers pick the right voice. Mark a foreign phrase with lang on its own element.
Large text: Text at least 24 px, or at least 18.66 px and bold. It needs only 3:1 contrast instead of 4.5:1.
Levels: How strict a WCAG criterion is: A (basics), AA (the usual target) or AAA (highest).
Lighthouse: Chrome DevTools' built-in auditing tool, which runs mostly axe checks and gives an accessibility score out of 100. The score is a to-do list, not proof of conformance.
Link purpose: Criterion 2.4.4: each link's purpose should be clear from its text, or its text and surrounding context. Links lists strip the context, so "Read more" needs extra words, which can be visually hidden.
Live region: A part of the page whose changes screen readers read out, wherever focus is. It must be in the HTML and empty before its text changes.
Low vision: Sight that glasses can't fully correct; people see only with large text or high contrast.

M

Manual testing checklist: A short hand test for each new page covering keyboard, focus, screen reader, zoom, color, forms and media, since automated tools find only part of the problems.
Modal: A dialog that keeps focus inside it and makes the rest of the page inert until it's closed.

N

Non-text contrast: Criterion 1.4.11: the parts needed to see a control, like an input's border, icon or focus ring, need 3:1 contrast against what's next to them.
novalidate: A form attribute that turns off the browser's own validation pop-ups so the script can show its own accessible error messages.
npm / npx: Node.js's package tool: npm install adds libraries like Playwright, and npx runs commands from them such as lighthouse or playwright install.
NVDA: A free Windows screen reader. Its NVDA key is Insert and Ctrl+Alt+N starts it.

O

Overlays: One-line scripts that add an accessibility toolbar to a site. They can't fix missing labels or keyboard access, and sites using them still get sued.

P

Placeholder: Gray hint text inside an empty field. It vanishes as you type, is often low contrast, and is not a label.
Playwright: A testing library that drives a real browser, such as Chromium (the open-source core of Chrome), from a script: it opens pages, presses keys and reads results. It can print a page's accessibility tree as text, run axe checks and walk the Tab order.
POUR: WCAG's four principles: Perceivable, Operable, Understandable and Robust.
prefers-reduced-motion: A CSS media query reflecting a user's system setting to reduce motion, used to turn off animations like the cart count bump for people with vestibular disorders.
Properties: ARIA attributes that rarely change, such as aria-label and aria-controls, as opposed to states that change often.

Q

Quick Reference: The W3C's filterable, searchable list of every WCAG criterion.

R

Reflow: Criterion 1.4.10: at 320 CSS pixels wide (a 1280 px window at 400% zoom) the page fits without sideways scrolling.
Region: The landmark a section element becomes only when it has an accessible name, such as from aria-labelledby pointing to its heading.
Required field: A field the user must fill in. Say so in visible words and add the required attribute so screen readers announce "required" too.
Role: What an element is to assistive technology: button, link, heading, checkbox, list.
role="alert": A live region that interrupts the screen reader (assertive), for urgent messages like a session ending.
role="status": A polite live region used for messages like "Added House Espresso" that appear without moving focus.
Rotor: VoiceOver's list of a page's headings, links and landmarks, opened with VO+U.
Rules of ARIA use: The W3C's five rules for ARIA, starting with "use a native HTML element instead" and including never aria-hidden on focusable things.

S

Screen magnifier: Software that enlarges part of the screen, so the user sees only a small piece of the page at a time.
Screen reader: Software that reads the screen aloud or in braille, such as VoiceOver, NVDA and TalkBack. It reads the accessibility tree rather than the visuals.
Semantics: Using the element whose meaning matches the job, like button or nav, rather than styled divs, so roles and names come for free.
Skip link: The first link on a page, hidden until focused, that jumps past repeated navigation to the main content (2.4.1).
State: A changing fact about an element, such as checked, expanded or pressed.
Status Messages: Criterion 4.1.3: a message that appears without moving focus must be announced to screen readers, usually through a live region.
Subtitles: A translation of speech for people who can hear but don't know the language; captions are for people who can't hear.
Success criterion: One testable WCAG rule that a page passes or fails, numbered like 1.4.3 for principle, guideline and criterion.
Sufficient techniques: WCAG's documented ways known to meet a criterion, such as G18 for 4.5:1 contrast.
SVG: An image format drawn with shapes in markup. Inline SVG icons need aria-hidden beside words, or role="img" and a label when standing alone; stroke="currentColor" makes an icon use the surrounding text color.
Switch access: Driving a device with one or two big buttons that step through controls in order, like a slow keyboard.

T

tabindex: An attribute changing focusability: 0 adds an element to the Tab order, -1 lets a script focus it without a Tab stop, and positive values should never be used.
TalkBack: Android's built-in screen reader.
Target size: The size of a click or tap target; criterion 2.5.8 asks for at least 24 by 24 CSS pixels so a shaky hand can hit it.
Text spacing: Criterion 1.4.12: if readers widen line, letter and word spacing with their own style sheet, no text gets cut off.
Title (page title): A unique title in the head, most specific part first, like "Shop coffee | Kettle & Crane". It names the browser tab and is the first thing a screen reader says.
Transcript: All of a video's speech and important sounds as a page of text, helpful for deafblind users with braille displays and for anyone who can't listen.

U

Understanding: The W3C page for each criterion that explains why the rule exists, who it helps, and lists techniques and failures.

V

Vestibular disorder: A problem with the inner ear's sense of balance that makes on-screen motion cause dizziness or sickness.
Visually hidden: Text hidden from the eyes but still read by screen readers, using a CSS class that shrinks it to 1 px and clips it with clip-path: inset(50%). Used for link text like "about Decaf".
Voice control: Working a device by speaking commands such as "click Add to cart". It needs visible words to match a control's name.
VoiceOver: Apple's built-in screen reader, turned on with Cmd+F5 on a Mac. Its commands use the VO keys, Control+Option.
VPAT: A report on how a product meets WCAG that large buyers ask for.

W

W3C: The group that writes web standards such as HTML, CSS and WCAG.
WAVE: WebAIM's checker that draws icons on the page itself: red for errors, yellow for alerts, green for features.
WCAG: The W3C's standard that websites are measured against. Aim for WCAG 2.2 level AA, which includes 2.1 and level A.
WebAIM Million: An annual test by the nonprofit WebAIM of the top million home pages with an automated checker, showing the most common accessibility failures.
WebVTT: The plain-text caption format, in .vtt files that start with WEBVTT and hold timed cues. A track element links it to the video.

Z

Zoom: Enlarging the whole page in the browser (Ctrl or Cmd and +), which the layout must survive up to 200%.