accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

No keyboard trap

On this page:


Summary

Make sure that keyboard-only users don’t get trapped within any element.

When someone using a keyboard to navigate content moves to an element, they must be able to move away from it again.


Requirements

Common mistakes

Why?

This ensures that people who use a keyboard do not get stuck on any part of the page.

Official wording in the Web Content Accessibility Guidelines

2.1.2 No Keyboard Trap: If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A)

See the W3C’s detailed explanation of this guideline with techniques and examples.


Guidance for Design

Example: designing a modal dialog for the Web

More guidance for Design


Guidance for iOS

This section needs more content. Contribute via Github or email.


Guidance for Android

This section needs more content. Contribute via Github or email.


Guidance for Flutter

This section needs more content. Contribute via Github or email.


Guidance for Web

Example

<!-- JavaScript updates field label to indicate an error but does not trap focus -->
<script type="text/javascript">
function check() {
  if (isValid()) {
    // update field label to explain that field is in error but do not trap focus
   var s = createElement("span");
   s.innerText = "(Invalid name)";
   document.getElementById("l1").appendChild(s);
  }
}
</script>

<label id="l1" for="name1"> First name</label>
<input onBlur="check();" type="text" id="name1">  

Failure example

<!-- JavaScript keeps returning focus to a field until a user enters data correctly -->
<script type="text/javascript">
function check() {
  if (isValid()) {
    document.getElementById("name1").focus();
  }
}
</script>

<label for="name1"> First name</label>
<input onBlur="check();" type="text" id="name1">   

More guidance for Web


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email