• Success Criterion 1.3.2
  • Conformance level A

Several Distinct Controls Merged Into One Announced Item

1.3.2 — Meaningful Sequence

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Several distinct controls are merged into one announced item — size options or share buttons read as a single blob, so screen reader users cannot reach or operate them individually.

Example 

<div class="quick-reactions" role="button" tabindex="0" onclick="handleReaction(event)">
  <img src="thumbs-up.svg" alt="">
  <img src="thumbs-down.svg" alt="">
  <img src="laugh.svg" alt="">
</div>

Why it matters

A screen reader user trying to react to a support agent's message cannot reach or choose between thumbs up, thumbs down, or laugh individually.

How to test

Tab to a set of related controls (e.g., product size chips): if a screen reader announces them as one single item instead of separately focusable/reachable controls, it fails.

How to fix

Give each option its own real button with an accessible name, instead of wrapping a whole group in one clickable container.

<div class="quick-reactions">
  <button aria-label="Thumbs up"><img src="thumbs-up.svg" alt=""></button>
  <button aria-label="Thumbs down"><img src="thumbs-down.svg" alt=""></button>
  <button aria-label="Laugh"><img src="laugh.svg" alt=""></button>
</div>

Outcome

A screen reader user can now tab to and choose "thumbs down" as its own distinct button.

Who is affected

Screen reader users and keyboard users cannot access individual reactions, since all three are merged into a single unlabeled control.

Learn more

Related scenarios