• Success Criterion 2.4.11
  • Conformance level AA

Keyboard-Triggered Dropdown Covering the Next Focus Stop

2.4.11 — Focus Not Obscured (Minimum)

Scenario

Setting

A photo-sharing app's upload screen

What’s wrong

Keyboard-triggered dropdown covering the next focus stop entirely as user tabs onward.

Example 

.tag-dropdown {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 220px;
  z-index: 10;
}
<!-- stays open while Tab moves focus onward to the Add caption field beneath it -->

Why it matters

Tabbing past the open tag dropdown into the caption field, the field receives focus but is fully hidden underneath the dropdown panel.

How to test

Open a keyboard-triggered dropdown and continue tabbing: if the dropdown itself fully covers the next control in the tab sequence, it fails.

How to fix

A dropdown that stays open after focus leaves it can end up sitting on top of whatever the user tabs into next.

tagDropdown.addEventListener('focusout', (e) => {
  if (!tagDropdown.contains(e.relatedTarget)) {
    tagDropdown.hidden = true;
  }
});

Outcome

A user tabs from the tag dropdown into the caption field and sees it fully, dropdown already closed.

Who is affected

Keyboard users can't see the caption field they've just tabbed into while the tag list remains open above it.

Learn more

Related scenarios