• Success Criterion 2.4.3
  • Conformance level A

Looping Carousel Clones Creating Duplicate Tab Stops

2.4.3 — Focus Order

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

Carousel clones (looping sliders) duplicating tab stops in nonsensical sequence.

Example 

<div class="bg-carousel">
  <button class="clone" tabindex="0">Beach (clone)</button>
  <button>Office</button>
  <button>Beach</button>
  <button>Mountains</button>
  <button class="clone" tabindex="0">Office (clone)</button>
</div>

Why it matters

Tabbing through virtual background options, the user hits Beach twice in a row with no visible difference, then loses count of real options.

How to test

Tab through a carousel with cloned/looping slides: if duplicate clones create extra tab stops in a nonsensical sequence, it fails.

How to fix

Looping clones should be invisible to assistive tech and unreachable by keyboard, since they exist only for animation.

<div class="bg-carousel">
  <button class="clone" tabindex="-1" aria-hidden="true">Beach</button>
  <button>Office</button>
  <button>Beach</button>
  <button>Mountains</button>
  <button class="clone" tabindex="-1" aria-hidden="true">Office</button>
</div>

Outcome

A host tabs through exactly three background choices, with no repeats and no dead ends.

Who is affected

Keyboard users choosing a virtual background hit duplicate, confusing stops from clones meant only for visual looping.

Learn more

Related scenarios