| id | a1b64e | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Focusable element has no keyboard trap via standard navigation | |||||||||||||
| rules_format | 1.1 | |||||||||||||
| rule_type | atomic | |||||||||||||
| description | This rule checks if it is possible to use standard keyboard navigation to navigate through all content on a web page without becoming trapped in any element. | |||||||||||||
| accessibility_requirements | ||||||||||||||
| input_aspects |
|
|||||||||||||
| acknowledgments |
|
This rule applies to any HTML or SVG element that is focusable.
For each target element, focus can cycle to the browser UI by using standard keyboard navigation.
Note: It is not possible to fulfill this expectation by using browser specific shortcuts to return to the browser UI.
This rule only requires navigation in one direction (either forward or backward), not both, and not a specific one. It is clear that not being able to escape a focus trap in any direction is a failure of Success Criterion 2.1.2 No keyboard trap. However, it is less clear that being able to escape in only one direction is enough to satisfy it. If Success Criterion 2.1.2 No keyboard trap requires the possibility to escape the trap in a specific way (e.g. forward standard keyboard navigation) or in both directions, this rule may pass while the criterion is not satisfied.
- The focus order in keyboard navigation is cyclical, not linear, meaning that the focus order will cycle to the first/last element when it moves away from the last/first element.
- The Browser UI is part of the focus navigation cycle of the page.
Some browsers have settings that will immediately cycle focus back to the web document. This fulfills the expectation because focus can cycle to the browser UI and the browser UI cycles focus back to the web document.
- Understanding Success Criterion 2.1.2: No Keyboard Trap
- G21: Ensuring that users are not trapped in content
- F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type
These focusable elements do not create a trap for keyboard navigation.
<a href="#">Link 1</a> <button>Button1</button>This element is made focusable by the tabindex attribute. It does not create a trap for keyboard navigation.
<div role="button" tabindex="1">Text</div>This element is made focusable by the tabindex attribute, even if it is not part of the sequential focus navigation. It does not create a trap for keyboard navigation.
<div tabindex="-1">Text</div>While the elements with id "sentinelBefore" and "sentinelAfter" contain focus to the contents of the div with name "Sample Modal", focus is not trapped since the user can use standard keyboard navigation using the Escape key or by activating the "Close button" to dismiss the modal
<div>Main page content with <a href="#">some link</a></div>
<div aria-hidden="true">
<a href="#" id="sentinelBefore" style="position:absolute; top:-999em"
>Upon receiving focus, this focus sentinel should wrap focus to the bottom of the modal</a
>
</div>
<div
id="sampleModal"
role="dialog"
aria-label="Sample Modal"
aria-modal="true"
style="border: solid black 1px; padding: 1rem;"
>
<label>First and last name <input id="dialogFirst"/></label><br />
<button id="closeButton">Close button</button>
</div>
<div aria-hidden="true">
<a href="#" id="sentinelAfter" style="position:absolute; top:-999em"
>Upon receiving focus, this focus sentinel should wrap focus to the top of the modal</a
>
</div>
<script>
window.addEventListener('load', () => {
document.getElementById('dialogFirst').focus()
})
document.getElementById('sentinelBefore').addEventListener('focus', () => {
document.getElementById('closeButton').focus()
})
document.getElementById('sentinelAfter').addEventListener('focus', () => {
document.getElementById('dialogFirst').focus()
})
document.getElementById('closeButton').addEventListener('click', () => {
document.getElementById('sampleModal').style.display = 'none'
})
document.getElementById('sampleModal').addEventListener('keydown', evt => {
if (evt.key === 'Escape') {
document.getElementById('sampleModal').style.display = 'none'
}
})
</script>This focusable element creates a keyboard trap bringing focus to the button. Note that if one of the links is removed, the focus may jump to the browser UI before the timeout expires, at which point the this.focus() trap cannot trigger anymore.
<a href="#">Link 1</a>
<button onblur="setTimeout(() => this.focus(), 10)">
Button1
</button>
<a href="#">Link 2</a>These focusable button elements create a keyboard trap preventing the last button to be reached using the keyboard.
<button onblur="setTimeout(() => this.nextElementSibling.focus(), 10)">
Button1
</button>
<button onblur="setTimeout(() => this.previousElementSibling.focus(), 10)">
Button2
</button>
<button>
Button3
</button>This button element is between other button elements creating keyboard traps.
<button onblur="setTimeout(() => this.focus(), 10)">Button 1</button>
<button>Button 2</button>
<button onblur="setTimeout(() => this.focus(), 10)">Button 3</button>There is no focusable element.
<h1>Page 1</h1>There is no focusable element.
<button type="button" disabled>Click Me!</button>There is no focusable element.
<button type="button" style="display:none;">Click Me!</button>There is no focusable element.
<a href="#" style="visibility:hidden;">Link 1</a> <button style="visibility:hidden;">Button1</button>