Skip to content

focusable-no-keyboard-trap-80af7b.md

Latest commit

 

History

History
executable file
·
280 lines (208 loc) · 9.05 KB

focusable-no-keyboard-trap-80af7b.md

File metadata and controls

executable file
·
280 lines (208 loc) · 9.05 KB
id 80af7b
name Focusable element has no keyboard trap
rules_format 1.1
rule_type composite
description This rule checks for keyboard traps. This includes use of both standard and non-standard keyboard navigation to navigate through all content without becoming trapped.
accessibility_requirements
wcag20:2.1.2 wcag-text:cc5 wcag-technique:G21
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
title forConformance failed passed inapplicable
WCAG Non-Interference
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
false
not satisfied
further testing needed
further testing needed
input_rules
a1b64e
ebe86a
acknowledgments
authors funding
Anne Thyme Nørregaard
Dagfinn Rømen
Geir Sindre Fossøy
WAI-Tools

Applicability

This rule applies to any HTML or SVG element that is focusable.

Expectation

For each test target, the outcome of at least one of the following rules is "passed":

Background

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.

Assumptions

There are no assumptions.

Accessibility Support

There are no accessibility support issues known.

Bibliography

Examples

Passed

Passed Example 1

These focusable elements do not create a trap for keyboard navigation.

<a href="#">Link 1</a> <button>Button1</button>

Passed Example 2

This element is made focusable by the tabindex attribute. It does not create a trap for keyboard navigation.

<div tabindex="1">Text</div>

Passed Example 3

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>

Passed Example 4

These focusable button elements have scripts that create a keyboard trap. The document includes help information in a paragraph before the button elements and the method advised works to escape the keyboard trap.

<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>

<p>Press Ctrl+M to Exit</p>
<a id="link1" href="#">Link 1</a>
<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 1
</button>
<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 2
</button>
<a id="link2" href="#">Link 2</a>

Passed Example 5

These focusable button elements have scripts that create a keyboard trap. The document includes help information within the trap and the method advised works to escape the keyboard trap.

<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>

<a id="link1" href="#">Link 1</a>
<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 1
</button>
<p>Press Ctrl+M to Exit</p>
<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 2
</button>
<a id="link2" href="#">Link 2</a>

Passed Example 6

These focusable button elements have scripts that create a keyboard trap. The document includes help information in a "help" link that once clicked exposes the instructions to escape the keyboard trap.

<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>

<div onkeydown="escapeTrapOnCtrlM(event)">
	<a id="link1" href="#">Link 1</a>
	<button id="btn1" onfocus="trapOn = true" onblur="moveFocusTo('helpLink')">
		Button 1
	</button>
	<a id="helpLink" href="#" onclick="showHelpText()">How to go the next element</a>
	<div id="helptext"></div>
	<button id="btn2" onblur="moveFocusTo('btn1')">
		Button 2
	</button>
</div>
<a id="link2" href="#">Link 2</a>

Passed Example 7

The focusable button labeled "Button3" creates a keyboard trap when navigating forward, as it moves focus back to "Button1" preventing users to focus "Button3". However, when navigating backward, all focusable elements receive focus as expected. Therefore, according to the background notes, this behavior is considered compliant with the rule, despite being recognized as a poor practice in terms of keyboard accessibility.

<button onblur="setTimeout(() => this.nextElementSibling.focus(), 10)">
	Button1
</button>
<button onblur="setTimeout(() => this.previousElementSibling.focus(), 10)">
	Button2
</button>
<button>
	Button3
</button>

Failed

Failed Example 1

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>

Failed Example 2

This button element is between other button elements creating a keyboard trap.

<button onblur="setTimeout(() => this.focus(), 10)">Button 1</button>
<button>Button 2</button>
<button onblur="setTimeout(() => this.focus(), 10)">Button 3</button>

Failed Example 3

These focusable button elements create a keyboard trap with no instructions.

<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>

<a id="link1" href="#">Link 1</a>
<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 1
</button>
<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 2
</button>
<a id="link2" href="#">Link 2</a>

Failed Example 4

These focusable button elements create a keyboard trap with instructions that don't give advice on the method for proceeding.

<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>

<p>Go to the next element</p>
<a id="link1" href="#">Link 1</a>
<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 1
</button>
<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')" onkeydown="escapeTrapOnCtrlM(event)">
	Button 2
</button>
<a id="link2" href="#">Link 2</a>

Failed Example 5

These focusable button elements create a keyboard trap with help text, where the method advised doesn't work.

<script src="/test-assets/focusable-no-keyboard-trap/keyboard.js"></script>

<a id="link1" href="#">Link 1</a>
<button id="btn1" onfocus="trapOn = true" onblur="moveFocusToButton('btn2')">
	Button 1
</button>
<p>Press Ctrl+M to Exit</p>
<button id="btn2" onfocus="trapOn = true" onblur="moveFocusToButton('btn1')">
	Button 2
</button>
<a id="link2" href="#">Link 2</a>

Inapplicable

Inapplicable Example 1

There is no focusable element.

<h1>Page 1</h1>

Inapplicable Example 2

There is no focusable element.

<button type="button" disabled>Click Me!</button>

Inapplicable Example 3

There is no focusable element.

<button type="button" style="display:none;">Click Me!</button>

Inapplicable Example 4

There is no focusable element.

<a href="#" style="visibility:hidden;">Link 1</a> <button style="visibility:hidden;">Button1</button>