accessibility

Notes attached to a design file that spell out the things a mockup cannot show: heading levels, focus order, names, roles, live regions, and alt text.

Collapsing a cluster of elements, an icon plus a label plus a value, into one thing assistive technology stops at, instead of three stops that mean nothing apart.

A third party script bolted onto a site with a promise of automatic compliance, usually a floating widget of font and contrast toggles that fixes nothing underneath.

The platform flag on a native view that says what it is and how it behaves, the mobile counterpart to a role plus a state, and the thing a custom control has to set by hand.

The parallel tree a browser derives from the DOM, holding the role, name, state, and value that assistive technology actually reads.

A sign-in route that never requires a cognitive function test such as recalling a password or solving a puzzle without offering an alternative.

Supplementary text announced after a control's name, carrying hint or error detail without becoming part of the name itself.

The string assistive technology announces for a control, computed from label, aria-labelledby, aria-label, or its own content in a fixed order of precedence.

A focus technique where DOM focus stays on a container or input and aria-activedescendant names which child is active, used when focus must not move.

The text alternative that stands in for an image, written to serve the same purpose in the same context rather than to describe every detail.

A proposed API for speaking a message directly to assistive technology, without the live region trick of mutating hidden text and hoping the timing works out.

An attribute that removes an element and its whole subtree from the accessibility tree while leaving it visible on screen.

A live region setting that makes assistive technology re-read the whole region when any part of it changes, instead of only the changed fragment.

A way to stop sound that started on its own, because autoplaying audio drowns out the screen reader voice a reader depends on to find the control that stops it.

A narration track describing visual information the soundtrack leaves out, fitted into the gaps between dialogue.

A refreshable braille row that renders the same accessibility tree as speech, with abbreviated role names authors can override.

The screen reader mode that intercepts keystrokes for reading and navigation, as opposed to focus or forms mode where keys reach the page.

Marking a region as still loading so assistive technology waits for the finished result instead of reading each row as it streams in.

The rule that decides which element to use: a link goes somewhere, a button does something, and the choice sets the keyboard, the cursor, and the announced role.

Synchronised text for a video's audio, including speaker changes and meaningful sound, distinct from subtitles which only translate dialogue.

A shift big enough to disorient a reader, a new page, a new window, a moved focus, a rearranged form, and the rule that it should follow a request rather than a keystroke.

Single letter shortcuts that fire without a modifier, which must be switchable off or remappable because speech input and screen readers trigger them by accident.

The text alternative for a chart: a summary of the takeaway plus access to the underlying values, not a recital of the pixels.

Breaking content into small labelled pieces, short paragraphs, lists, and headings, so a reader can hold one piece at a time instead of the whole wall.

The mental effort an interface demands, split between the work the task really needs and the work the design added by way of clutter, jargon, and avoidable steps.

Reduced ability to tell certain hues apart, most often red from green, which makes hue alone an unreliable way to carry meaning for roughly one man in twelve.

The A, AA, or AAA tier a WCAG success criterion sits in, and the tier a product claims, which is what people mean when they say a design is AA.

Keeping the same help route, a contact link, a chat launcher, a self-help pane, in the same relative place on every page so a stuck reader can find it again.

Calling the same function by the same name and icon everywhere in a product, so a reader who learned it once does not have to relearn it per screen.

The pattern where something built for a disabled minority turns out to serve everyone, the way dropped kerbs serve prams and captions serve noisy rooms.

The marking of which item in a navigation set is the one you are on, exposed with aria-current so it survives without the colour cue.

An image that carries no information and is given an empty alt attribute so assistive technology skips it entirely.

A second, non-dragging route to anything a drag can do, such as arrow keys or a move-to menu on a sortable list.

Naming the field that failed and saying what went wrong in text, rather than only outlining the input in red.

The screen reader equivalent of the Escape key, a two finger scrub that dismisses a sheet or steps back a level.

The open or closed state of a disclosure, exposed with aria-expanded on the control that owns it rather than on the panel it reveals.

The touch screen reader mode where dragging a finger reads whatever is under it and activation takes a second, deliberate tap, so nothing fires by accident.

The maxim that no ARIA is better than bad ARIA: if a native element does the job, use it rather than pinning a role onto a div and reimplementing the behaviour.

Content that flashes more than three times per second in a large enough area, restricted because it can trigger seizures.

The size and contrast a focus indicator must reach to count as visible: enough area around the control, enough change against both the control and its background.

A shadow root option that forwards focus from the host into the first focusable element inside it, so clicking the padding of a custom element does not leave focus nowhere.

Deliberately moving keyboard focus after a state change so the reader lands on the new content instead of at the top of the document.

The requirement that a focused control is not completely hidden by sticky headers, footers, cookie bars, or chat widgets when it receives focus.

The sequence keyboard focus follows through a page, which should match reading order instead of source quirks or positive tabindex values.

The visible outline drawn around the element that currently holds keyboard focus, showing where the next keypress will land.

A constraint that keeps keyboard focus cycling inside one region until that region is dismissed.

A focus style shown only when focus arrived by keyboard or another non-pointer route, so a mouse click does not leave a ring behind.

A control styled as unavailable but left in the tab order with aria-disabled, so a reader can find it and learn why it is off.

Giving a scrollable box its own tab stop so a keyboard user can scroll it, which matters whenever the content inside holds no focusable element of its own.

A statement of the gap between what a person can do and what a design demands, the WCAG 3 draft's way of naming a barrier without sorting people into disability categories.

The one name that covers a set of controls, a question above its radio buttons or a heading above an address block, so each field is heard in context.

A hint on a trigger that says something will open and what kind of thing it will be, a menu, a listbox, a dialog, before the reader commits to pressing it.

The markup that ties a data cell to its row and column headers, so a cell read on its own still says what it is.

The nested outline formed by heading levels, navigated directly by assistive technology and broken by skipping a level or picking a level for its size.

An element hidden from assistive technology that is still in the tab sequence, so keyboard focus lands on something a screen reader refuses to describe.

The three conditions content revealed on hover or focus must meet: reachable with the pointer, dismissible without moving focus, and not self-closing.

Text baked into a raster image, which cannot be resized, restyled, selected, translated, or read by anything but the alt attribute someone remembered to write.

A user preference for more contrast than a theme's default, honoured by strengthening borders, text, and state colours rather than by shifting hues.

A state that removes a subtree from focus order, hit testing, and the accessibility tree at once, used to seal the background behind a dialog.

Where focus lands when a view, dialog, or page first appears, chosen deliberately rather than left on the body or dumped on the first close button.

Machine readable autocomplete tokens on personal fields, which let browsers autofill and let personalisation tools add familiar icons or wording.

The programmatic mark that a field's value failed validation, paired with a pointer to the message that explains it.

A whole-screen colour inversion applied by the OS, which flips a design nobody tested upside down and turns every shadow into a highlight.

A place keyboard focus can enter but not leave by keyboard alone, stranding anyone who is not using a pointer.

The programmatic link between a label and its field, made by for and id or by wrapping, which makes the label clickable and the field named.

The rule that a control's accessible name must contain its visible label text, so speaking the visible words works in voice control.

A named region role (banner, navigation, main, complementary, contentinfo, search) that lets assistive technology jump between the major parts of a page.

The declared language of a document or a passage inside it, which picks the voice, the pronunciation rules, and the hyphenation a reader gets.

The size at which text counts as large for contrast purposes (about 18pt, or 14pt when bold) and its required ratio drops from 4.5:1 to 3:1.

A reading aid that dims everything except one to five lines of text, so the eye has a single band to track and cannot skip or reread a line by accident.

Whether a link's own text says where it goes, the reason a list of read more and click here links fails when read out of context.

A container marked so assistive technology reads changes inside it without moving focus, used for messages that appear after an action.

An extended text alternative for a chart, diagram, or map, linked or referenced because a short alt string cannot carry the content.

A screen reader gesture that fires the one action a screen is most likely about, so the reader does not have to hunt for the control.

A checkbox showing a third, indeterminate state when only some of the boxes it governs are checked.

Triggering a function by moving the device itself, such as shake to undo, which needs a plain control alternative and an off switch.

The three things every control has to expose to assistive technology: what it is called, what kind of thing it is, and what state it is currently in.

A focusable control placed inside another control, such as a button inside a link or a checkbox inside a clickable row, which garbles the announcement and can leave the inner control unreachable.

The requirement that controls, focus indicators and meaningful graphics reach 3:1 against what is next to them, which is the rule that governs borders and icons.

Restricting a screen to portrait or landscape, which strands anyone whose device is fixed in a mount or a wheelchair arm in the orientation the design refused.

A child the accessibility tree is told to adopt from elsewhere in the DOM, used when the nesting a role requires is impossible in the markup.

The document title, the first thing a screen reader speaks and the only label a reader has when picking between tabs, windows, and history entries.

A visible control for content that moves, blinks, scrolls, or updates on its own, so a reader can stop it before reading around it.

The antipattern of using placeholder text as a field's only label, which vanishes on typing and usually fails both contrast and naming.

Writing interface copy at the reading level of the people using it, with short sentences, familiar words, and the point first, rather than at the level of the org chart.

Activating a control on pointer release rather than press, so someone who lands on the wrong target can slide off and abort.

Path based or multi finger gestures such as pinch, swipe, and drag along a track, which need a single pointer equivalent to stay operable.

The urgency setting on a live region: polite waits for a pause in speech, assertive interrupts whatever is being read.

Using tabindex values above zero to force an order, which yanks those elements to the front of the whole page sequence and is almost always a bug.

The four principles WCAG is built on, perceivable, operable, understandable, and robust, used as a shorthand for sorting an accessibility problem into a bucket.

Stripping an element of its semantics while leaving it on screen, so a table used for layout or a list used for spacing stops being announced as one.

The rule that some roles flatten everything inside them into their own label, which is why an icon and a span inside a button are never announced separately.

How a synthetic voice says a word, and the hints an author can give when the default reading turns a product name, a units string, or a homograph into nonsense.

Speaking a page's own prose with a synthetic voice, highlighting each word as it is spoken. A reading aid for people who can see the screen, not a screen reader.

A browser view that throws away your layout and rebuilds the article as plain text the reader can restyle, which is a verdict on how readable the original was.

A CSS property that repoints reading and tab order at the visual arrangement of a flex or grid container, instead of leaving both stuck in source order.

The order content is exposed in the DOM, which drives both speech output and tab order, and which visual reordering can silently contradict.

A user preference asking interfaces to cut non-essential animation, honoured by shortening, cross fading, or removing movement rather than by doing nothing.

A user preference asking for opaque surfaces instead of blur and translucency, honoured by swapping frosted layers for solid fills.

The rule against asking for the same information twice in one process, unless it is re-entered for a real reason such as confirmation.

The requirement that content works in one column at 320 CSS pixels wide without two dimensional scrolling, which is 400 percent zoom on a desktop.

How a form says a field cannot be left empty, in the label text, in the announced name, and not by an asterisk whose meaning is explained somewhere else.

Text must scale to at least 200 percent without loss of content or function, which rules out fixed pixel heights around wrapping copy.

A second cursor a screen reader user can move over the screen to read text without moving the system focus, so inspecting a region does not disturb the app.

An author supplied name for a widget's role, spoken in place of the stock role name, which overrides the platform wording and misleads easily.

VoiceOver's dial for choosing what a swipe or flick moves between: headings, links, landmarks, form controls, or characters.

Telling assistive technology that a client side navigation happened, by moving focus to the new heading or posting the new title to a live region.

A screen reader mode that switches the display off entirely while navigation keeps working, used for privacy and by sighted testers checking an audio-only run.

Blowing part of the screen up many times over, so a reader sees a keyhole of the layout at a time and anything far from the action is effectively off screen.

Software that speaks or brailles the accessibility tree and supplies its own keyboard commands for moving through a page.

Reaching for the element that already means what you mean, so name, role, keyboard behaviour, and platform conventions arrive for free instead of being rebuilt.

Instructions that lean on shape, size, position, or sound alone, such as the round button on the right, which fail when those cues are not perceived.

Telling assistive technology how big a list really is and where an item sits in it, so a windowed or paginated list still announces "item 6 of 16".

A signed track alongside video, presented as an inset or a companion stream, for readers whose first language is a sign language rather than the written caption text.

A barrier that comes from the moment rather than the body, one arm holding a baby, sunlight on a screen, a noisy train, and that makes the audience for access everyone.

A link at the very start of a page, revealed on focus, that jumps past repeated navigation to the main content.

Turning data into sound, mapping a series to pitch or rhythm, so a chart can be heard as a shape rather than described one value at a time.

The announced direction of the one column a table is currently sorted by, carried on that column header alone rather than on every sortable header.

Moving focus by direction rather than by sequence, so arrow keys, a D-pad, or a TV remote jump to the nearest control up, down, left, or right.

A change in content that reports progress, result, or state and must be announced without taking focus, such as a count of search results.

How a screen reader is told about text that arrives token by token, holding the region quiet while it streams and speaking once when the answer is complete.

Operating a device with one or two switches, where a scanning cursor steps through targets in turn and a press selects the highlighted one.

Marking a control with a concept code so a reader who uses an augmentative symbol set sees their own familiar picture in place of your icon and wording.

One position in the tab sequence: a place the Tab key can reach, counted once even when the widget it belongs to holds many focusable parts.

Reachable by the Tab key, as opposed to merely focusable: an element with tabindex of -1 can take focus from script but never from Tab.

The exception that lets an undersized control pass when no other target falls inside a 24 pixel circle centred on it, trading size for clearance.

The requirement that a reader can increase line height, letter spacing, word spacing, and paragraph spacing without any content being lost or clipped.

A warning before a session or form expires with a simple way to extend it, so a slower reader does not lose their work silently.

The minimum area a control must offer a finger or imprecise pointer, measured on the activation region rather than the painted glyph.

A full text version of time based media, readable without playing it and searchable by both people and machines.

The rule that colour must never be the only carrier of meaning, so a red field also needs an icon, wording, or shape change.

How much a screen reader says about each thing it reaches, a user setting that decides whether your carefully written description is heard at all.

Content removed from the visual layout but left in the accessibility tree, so screen readers announce what the design leaves unsaid.

Operating an interface by speaking control names or numbered overlays, which makes the visible wording of a control its address.