• Success Criterion 2.1.2
  • Conformance level A
  • W3C reference F10

Keyboard Focus Stuck Inside an Embedded Plugin or Widget

2.1.2 — No Keyboard Trap

Scenario

Setting

An email client's compose window

What’s wrong

Keyboard focus can get stuck inside an embedded plugin/format (video player, widget) and the user cannot Tab back out to the rest of the page.

Example 

<div class="compose-window">
  <textarea>...</textarea>
  <iframe src="video-preview.html" class="attachment-preview"></iframe>
</div>
<!-- the iframe's internal player captures all Tab presses and never returns focus to the textarea -->

Why it matters

A user composing an email tabs into an attached video preview and can never tab back out to finish writing or send the message.

How to test

Tab into any embedded plugin/format (PDF viewer, old Flash-style widget): confirm Tab or Shift+Tab can move focus back out to the surrounding page.

How to fix

An embedded widget must let Tab and Shift+Tab move focus back out to the surrounding page once its own controls are exhausted.

videoPreview.addEventListener('keydown', (e) => {
  if (e.key === 'Tab' && isLastControl(document.activeElement)) {
    e.preventDefault();
    document.querySelector('.send-btn').focus();
  }
});

Outcome

A user tabs through the video preview and continues straight on to the Send button.

Who is affected

Keyboard-only users get permanently stuck inside the embedded player, unable to reach the rest of the compose window.

Learn more

Related scenarios