murattunalı.

Focus trap.

A focus trap is when keyboard focus enters a region and cannot leave it again, and WCAG prohibits it explicitly at level A.

A trap is the harshest defect there is for a keyboard user: it makes the page unusable. The user tabs forward, enters a layer or an embedded component, and cannot get out; they keep pressing Tab but the focus keeps circling the same few elements. The only remedy left is reloading the page — that is, losing everything done up to that point.

WCAG criterion 2.1.2 “No Keyboard Trap” prohibits this directly and sits at level A. A trap is therefore a violation at the baseline — even a conformance claim with a deliberately narrow scope cannot tolerate it.

The most frequent source is layer and dialog implementations. A good modal WANTS to keep focus inside — not letting Tab reach the content behind is the correct behaviour. But when that containment is built without leaving a way out, it turns into a trap.

  1. Right: focus cycles inside the layer, Escape closes it, and on closing the focus returns to the element that opened it.
  2. Wrong: focus cycles inside the layer and Escape does nothing.
  3. Wrong: there is a close button, but the tab order never reaches it.
  4. Wrong: embedded third-party content swallows the focus and does not give it back.

The last item is the hardest, because the control is not yours. An embedded video player, map or payment frame may take the focus and not release it. The remedy there is to place skip links before and after the embedded content, or to load the content only on the user’s request.

There is one test method and it takes ten seconds: open every layer, press Tab repeatedly, and make sure you can get out. Try Escape too. If you cannot get out, you have found the defect.

The trap also has a soft form, and it is more common: focus can technically leave, but the way out is so long that it is unusable in practice. If getting out of a layer with fifty elements takes fifty presses of Tab, the user can leave but will not.

That is why a good layer does more than leave an escape route — it keeps the escape SHORT: Escape always works, and the close button sits somewhere reachable at the start or the end of the focus order.

One final distinction: CONTAINING focus in a region and TRAPPING it are not the same thing. In a modal dialog, focus cycling inside is the correct behaviour and exactly what accessibility calls for. A trap is the user being unable to leave of their own accord — containment and escape are separate matters.

SOURCES