skip to content

Accessibility

Making interfaces usable by everyone: WCAG conformance, roles and accessible names, keyboard operation, contrast and testing. Interviewers ask because it is both law and a signal of care.

part ofDesign systems & UX foundationsoverview, primer and where to startread it →
on this pageshow

questions

24

What is an accessible name, and what breaks for a voice-control user when it disagrees with the visible label?

level: juniorimportance: must knowfreq 76%

answer

  1. Which one is this, not what kind
  2. Every operable control needs one
  3. Speech input repeats what is visible
  4. Two sources of truth can disagree
  5. A Level A criterion covers the mismatch

basics

~20 s

An accessible name is the string assistive technology announces to identify a control - which one it is. Every operable control needs one, and it must contain the visible text, or voice-control users cannot activate it by saying what they see.

solid answer

~50 s

An **accessible name** is the short string assistive technology announces to identify a control: the *which one is this* fact, distinct from the *what kind of thing is this* fact carried by its role. Every control a user can operate must have one, because a node announced as button with no name cannot be told apart from the four beside it. That requirement is *4.1.2 Name, Role, Value* (Level A). The name can come from the control's own visible text or from a string the author supplies, and the two can silently drift apart. When they do - the control reads Buy ticket and is named Purchase - a screen-reader user hears a word nobody else on the team uses, and a voice-control user, who speaks the words printed on the control, gets nothing at all. *2.5.3 Label in Name* (Level A) exists for exactly that failure.

code

pseudocode · 5 lines
pseudocode
VISIBLE TEXT      Buy ticket
ACCESSIBLE NAME   Purchase

speech announces          -> Purchase, button
spoken command Buy ticket -> no match, nothing happens

go deeper

for a junior

Know that every control a user can operate must have an accessible name, that the name says which control it is rather than what kind it is, and that it should contain the words printed on the control.

for a middle

Explain how a name and a visible label drift apart in the first place, what each audience loses when they do, and why speech input matches the announced string literally rather than approximately.

for a senior

Expect to be asked how you would find naming defects across a whole product: which ones a machine can flag, which need a person operating and listening, and how you keep them from coming back after the current batch is fixed.

for a principal

Own naming as a content problem rather than a code one. Decide who writes the words, how they stay consistent across a product and its translations, and what a shared component library owes so that names cannot silently diverge from labels.

## Name is identity, not kind Assistive technology describes a control with several facts, and the two that get confused are its **role** and its **accessible name**. The role says what kind of thing it is - a button, a checkbox, a link. The name says *which* one: Buy single ticket, Add a passenger, Cancel and start again. A user who cannot see the screen walks the interface one node at a time and hears both. Role alone is useless on a screen with five buttons; name alone reads as prose and gives no hint that anything can be operated. The accessible name is deliberately short. Where a control needs more explanation than a name can carry, that supplementary text is an **accessible description** - a separate, longer, optional fact announced after the name. Stuffing an explanation into the name makes every future announcement of that control long, and speech has no scroll bar. Also note what a name is *not*: it is not an identifier used by code, not a variable, and not a test hook. It is user-facing content in the same sense the visible text is, and it should be written by whoever writes the visible text. ## Why every operable control must have one *4.1.2 Name, Role, Value* (Level A) requires a programmatically determinable name and role for every user-interface component. Level A is the conformance floor: this is not a refinement for mature products, it is the baseline. *2.4.6 Headings and Labels* (Level AA) adds that labels must actually describe purpose, so Submit on eleven different screens satisfies the first requirement and fails the second. | What the node exposes | What the user gets | Verdict | | --- | --- | --- | | Role only | button, five times, indistinguishable | Unusable | | Name only | a phrase that reads as ordinary text | Skipped | | Name and role | Buy single ticket, button | Usable | | Name that contradicts the visible text | the wrong word, and a failed voice command | Worse than useless | ## When the announced name and the visible label disagree Take a public transport ticketing kiosk. Its confirm control is printed **Buy ticket** and, because a designer renamed the copy late and nobody changed the annotation, it is announced as **Purchase**. Three separate audiences break, in increasing severity: 1. **Screen-reader users** hear a word that appears nowhere on the screen and nowhere in the help text. They can still operate the control, but every instruction written for the product - say, a support script telling them to press Buy ticket - now refers to something they cannot find. 2. **Users of speech output alongside the visible screen**, including many people with cognitive or reading disabilities, hear one word while reading another. The mismatch itself is the barrier. 3. **Voice-control users** simply cannot use it. Speech input matches the spoken phrase against the accessible name, and it matches it **literally**, not approximately. The user says the words printed in front of them, nothing happens, and there is no error message to explain why. There is no workaround available to them from the outside. That third case is the reason for *2.5.3 Label in Name* (Level A): where a control has a visible text label, the accessible name must contain that text. Contain, not resemble. A name of Purchase does not contain Buy ticket. A name of Buy ticket for zone 2 does contain it, and word order matters - putting extra words *before* the visible text can still defeat a spoken command on some input methods, so the safe pattern is visible text first, qualifier after. ## Where the mismatches come from On a 41-screen kiosk journey, name defects are rarely one bad decision. They accumulate: - **Late copy changes.** The visible text is updated and the annotation is not, because the two live in different places and only one of them is visible in review. - **Icon-only controls.** A control with no text at all gets a name invented by a developer rather than written by whoever owns the product's words, so it says what the code does instead of what the user sees. - **Duplicated names for distinct controls.** Nine screens each with a control named Continue is technically conformant and practically hostile, because the announcement carries no information about what the user is continuing to. - **Names that restate the role.** Naming a control Buy ticket button makes every announcement say button twice. - **Translation.** The visible text is translated and the annotation is not, or the two are translated separately by different people, and the pair drifts again in every language after the first. ## Catching them Automated inspection can tell you a name exists and can compare it against nearby visible text, so the empty-name and obvious-mismatch cases are cheap to find. It cannot tell you the name is the *right* word, that nine Continue controls are ambiguous, or that a name reads badly out loud. Those need a person operating the product and listening - and, for the voice-control case specifically, a person trying to drive it by speaking the words on the screen. Treat naming as a content review, not a code review, and it stops regressing.

  • Why is a control announced only as button still a defect, even though it does have a role?
    Because the role tells the user what kind of thing it is and nothing about which one. On a screen with several controls the announcement is identical every time, so the user has to activate them to find out what they do, and on a destructive action that is unacceptable. Role and name answer different questions, and a component that carries only one of them is half-described.
  • Is it enough for the accessible name to be similar to the visible text?
    No. Speech input matches literally, so a near-miss is a miss: a control printed Buy ticket and named Purchase ticket still fails a spoken Buy ticket. The rule is containment - the visible text appears inside the name, unchanged. Put the visible text first and add any qualifier after it, so the spoken phrase matches from the start.
  • Besides voice-control users, who else is hurt when the announced name differs from the visible label?
    Anyone who reads the screen while listening to it, which includes many people with reading or cognitive disabilities: they get two different words for one control and have to resolve the conflict themselves. Support staff are hurt too, because written instructions refer to words some users never hear. And any team member testing by listening sees a product that describes itself inconsistently.

The role is the job title and the accessible name is the person's name. Telling someone to go and press a button is useless in a room of five buttons.

saying these in an interview costs you the question

  • Says a control is fine because some text exists somewhere nearby
  • Confuses the accessible name with an identifier used by code
  • Thinks only screen-reader users are affected by a mismatch
  • Assumes a roughly similar name is close enough for speech input
  • Packs a whole explanation into the name instead of a description
  • Treats naming as optional for controls that look obvious
open as a page

What does a color contrast ratio measure, and which text gets 4.5:1 versus 3:1?

level: juniorimportance: must knowfreq 78%

basics

~10 s

A contrast ratio measures how far apart two specific colors sit in relative luminance, on a scale from 1:1 to 21:1. WCAG's minimum-contrast criterion asks 4.5:1 for normal-size text and 3:1 for large text.

open as a page

What determines focus order on a screen, and why is a focus order that contradicts the visual layout a defect?

level: juniorimportance: must knowfreq 70%

basics

~20 s

Focus order follows the order controls appear in a screen's underlying structure, not where they are painted. When the two disagree, keyboard users jump unpredictably, and WCAG treats that as a Focus Order failure, not a cosmetic flaw.

open as a page

How does a screen reader user move through an unfamiliar screen, and what must the screen provide for each way of moving?

level: juniorimportance: must knowfreq 74%

basics

~20 s

Screen reader users rarely read top to bottom. They jump between structural elements, step from one control to the next, or read linearly through everything. Each way of moving needs real structure behind the visuals, not just visual formatting.

open as a page

How do you run a keyboard-only pass and an assistive-technology pass over a task, and why in that order?

level: juniorimportance: must knowfreq 66%

basics

~20 s

Two passes over the whole task: complete it using the keyboard alone, then repeat it with an assistive technology, judging what is announced. Run the keyboard pass first — an inoperable screen makes every later finding point at the wrong cause.

open as a page

What are the four WCAG principles, and what is each one a claim about?

level: juniorimportance: must knowfreq 88%

basics

~10 s

WCAG organises every requirement under four principles: perceivable, operable, understandable, robust. Content must reach the user's senses, be usable without a mouse or precise pointing, be comprehensible, and be exposed reliably to assistive technologies.

open as a page

What is the accessibility tree, and how do a control's name, role, value and state describe it to someone who cannot see it?

level: middleimportance: must knowfreq 70%

basics

~20 s

The accessibility tree is a parallel structure the platform derives from an interface and exposes to assistive technology. Each node carries a role, an accessible name, a value and states - enough for a non-visual user to identify and operate a control.

open as a page

Why must color never be the only way an interface conveys meaning, and what is a second indicator?

level: middleimportance: must knowfreq 60%

basics

~20 s

Color alone fails anyone who cannot separate the hues - color-vision deficiency, low vision, glare, a dimmed display, an uncolored printout, speech output. Pair every color cue with a second channel: a word, a distinct shape, or a pattern.

open as a page

What is a keyboard trap, and why is it a conformance failure rather than an inconvenience?

level: middleimportance: must knowfreq 56%

basics

~20 s

A keyboard trap is a part of a screen keyboard focus can enter but not leave without a pointer. WCAG forbids it at Level A because a trapped user loses the entire rest of the screen, not one control.

open as a page

Why can a screen reader announce a screen in a different order than it looks, and when is that a defect?

level: middleimportance: must knowfreq 63%

basics

~20 s

Announcement order follows the structure the interface exposes, not where things are painted. Layout can move a box anywhere without touching that structure. When the two disagree and the sequence carries meaning, it is a defect against the meaningful-sequence criterion.

open as a page

Which WCAG success criteria can an automated rule engine decide, and which need a human judgement?

level: middleimportance: must knowfreq 78%

basics

~20 s

An automated rule engine decides only criteria whose pass condition is mechanically measurable — a computed value, or a required property present or absent. Criteria turning on meaning, equivalence or order need a human. That boundary belongs to the criteria.

open as a page

What do the WCAG conformance levels A, AA and AAA mean, and why is AA the usual target?

level: middleimportance: must knowfreq 74%

basics

~20 s

Every WCAG success criterion carries one level. A claim at AA means every level A and every level AA criterion is satisfied — the levels stack. AA is the common target because AAA cannot be met across all content.

open as a page

Why is removing a control's default keyboard-focus indicator, with no replacement, a conformance failure rather than a styling choice?

level: middleimportance: should knowfreq 52%

basics

~20 s

A keyboard user's only clue to where they are is the focus indicator; strip it and the interface becomes unusable without a pointer. Success criterion 2.4.7 Focus Visible, level AA, requires one, so removal with no replacement is a defect.

open as a page

How does a screen reader user learn about a change that does not move focus, such as a saved confirmation?

level: middleimportance: should knowfreq 47%

basics

~20 s

Nothing is announced unless the interface asks for it. Three choices: move focus to the change, announce it without moving focus, or leave a status the user must find. Interrupting cuts off speech; queueing risks being missed.

open as a page

Why does giving a generic element an accessibility role not make it behave like that role, and what does the author still owe?

level: seniorimportance: should knowfreq 48%

basics

~20 s

An accessibility role is a description, not an implementation. It changes what assistive technology announces and nothing about how the element works. The author still owes reachable focus, the key interactions that role implies, and state annotations kept true as the real state changes.

open as a page

What does 'keyboard operable' demand of a custom control, and who besides keyboard users is blocked when it is pointer-only?

level: seniorimportance: should knowfreq 46%

basics

~10 s

Every action a control offers by pointer must also be reachable and performable by keyboard alone: reach, activate, adjust, cancel, leave. Pointer-only interaction blocks switch, voice and alternative-input users too, not keyboard users alone.

open as a page

Why can the same screen behave differently under two assistive technologies, and what does that do to the claim that it works with a screen reader?

level: seniorimportance: should knowfreq 38%

basics

~20 s

What a user hears comes from a stack: the structure you expose, the platform layer beneath it, the assistive technology's own interpretation, and the user's settings. Every layer varies, so that claim describes one combination at one moment, not the screen.

open as a page

Where do accessibility checks belong across design review, component acceptance, a build gate and periodic audits?

level: seniorimportance: should knowfreq 44%

basics

~20 s

Design review catches meaning decisions before they are built; component acceptance catches per-control naming and operability; a build gate catches regressions on the machine-decidable criteria on every change; a periodic audit catches whole-task problems the other three cannot see.

open as a page

What does a WCAG conformance claim require beyond passing checks on a single screen?

level: seniorimportance: should knowfreq 38%

basics

~20 s

Conformance is claimed for whole pages, never for parts or components. Every page in a multi-step process must reach the claimed level, only technologies that assistive technology genuinely supports may be relied on, and content you do not rely on must not interfere.

open as a page

A year after launch, how do you answer 'is this accessible?' with evidence rather than opinion?

level: principalimportance: should knowfreq 37%

basics

~20 s

Answer with evidence: dated records of which task was tested, by which pass, by whom, and what was found; a gate blocking regressions on every change; known unfixed defects with owners; and findings from people with disabilities.

open as a page

How do you set a WCAG conformance target for a product and keep the claim true a year later?

level: principalimportance: should knowfreq 30%

basics

~20 s

Pick a level and a version deliberately — usually AA on the newest version — scope the claim to named screens and processes, state exceptions and uncontrolled content honestly, and re-verify on a cadence, because a claim decays with every release.

open as a page

What must an accessibility line in a Definition of Done say to be able to fail?

level: middleimportance: nice to knowfreq 22%

basics

~20 s

A line that can fail names a check, a scope and a failing result: the task completes with no pointing device, every new control has an accessible name, the build gate adds no violations. 'Accessible' names none of them.

open as a page

How is a WCAG success criterion written, and how does it differ from a published technique?

level: middleimportance: nice to knowfreq 26%

basics

~20 s

A success criterion is a normative, testable statement carrying a conformance level and often explicit exceptions. Techniques and failures published alongside it are informative examples: you conform by satisfying the criterion by any means, not by copying a listed technique.

open as a page

What can a contrast-ratio check on a static color palette miss in a live, running interface?

level: seniorimportance: nice to knowfreq 27%

basics

~20 s

A ratio describes two colors as finally composited, so a palette check misses whatever the palette does not pin down: text over imagery and gradients, translucent overlays, and every visual state a control enters. Measure the composite, not the swatch.

open as a page