E1.12.2toggle button accessible statedesignresearch

Assistive technology must see a toggle as a switch-like state

Aliases: aria-pressed · toggle role · pressed true

What it is

Sighted users read inset to tell whether Bold is on. Screen readers and voice control have no inset. They need role and state: this is a toggle, currently pressed or not. Assistive technology must see the control as switch-like, not as an ordinary “button, activate to do.” Without state, every focus speaks “Bold, button,” identical on and off.

Why it happens

The accessibility tree uses role to distinguish “press to do” from “press to flip a value.” A button with a pressed true/false, or an explicit switch role, is what lets speech say on/off after the name. Voice control also uses state to choose “turn Bold on” versus “turn Bold off.” A name with no state leaves only trial: press once and listen for the document to change. Trial is costly on invisible formatting, and costlier on Mute, which has no immediate document change. Visible inset is not a stand-in for state; the assistive channel does not read pixels.

Studying it

Focus the same toggle with a screen reader under three implementations: a stateless button, a button with pressed, role=switch. Log the spoken string, and whether “turn Bold off” hits when it is already on.

Independent variables: role and state attributes, presence of visible inset (should be irrelevant to AT). Dependent variables: whether speech reveals the current value, steps to flip, treating the toggle as a one-shot.

A test with the display on lets the facilitator read inset and false-pass. Turn the screen off, or have someone who cannot see the UI operate it.

Where it stops holding

A real switch control takes the switch role; Bold in a toolbar is more often button + pressed. Do not switch the role just to “feel like a switch,” or rotors will mix formatting with settings. A mutually exclusive set (align left / center) needs pressed plus group relations, not five independent switches. Do not put “Bold on” in the name; stuffing value into the name duplicates or fights the state when it changes.

Applying it

  • Expose pressed state on toggle buttons so speech can tell on from off.
  • Name the setting only (Bold, Mute); leave on/off to state, not the name.
  • Listen once on and once off; the two utterances must differ.
  • Verify with the display off, toolbar only. If Bold is spoken identically on and off, assistive technology is not seeing a stateful switch.

Related

  • Within the group: E1.12.1 A toggle button uses pressed and unpressed to show the current setting · E1.12.3 Toolbar toggles need a different look from neighboring action buttons · E1.12.4 A toggle’s state must survive a page refresh
  • Adjacent: J5.10 Name, role, and state · E3.03 Switches · J5.04 Voice control
  • Search terms: aria-pressed · toggle button · switch role

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E1.12.2