• Success Criterion 3.2.1
  • Conformance level A

Tabbing Into a Field That Opens a Chat Widget

3.2.1 — On Focus

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Focus opening a chat widget that steals focus.

Example 

ingredientCheckbox.addEventListener('focus', () => {
  chatWidget.open();
  chatWidget.focusInput();
});

Why it matters

Tabbing to check off an ingredient pops open the chat widget and steals focus into its input, so the cook can never keep checking ingredients off the list by keyboard.

How to test

Tab to an element and stop: if a chat widget or other component opens and steals focus automatically, it fails.

How to fix

Open chat only from its own trigger button's click event, never from another control's focus event. A widget should never seize focus as a side effect of the user focusing something else on the page.

chatButton.addEventListener('click', () => chatWidget.open());

Outcome

A cook tabs through the ingredient list and checks off each item without the chat window interrupting.

Who is affected

Keyboard users working through a recipe's ingredient checklist get repeatedly diverted into an unrelated chat box.

Learn more

Related scenarios