Last updated:

Created by:

Success Criterion:

Atomic Rules:

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

This conformance rule relates to:

Aggregation Definition

Applicability

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

Note: This rule only applies to HTML and SVG. Thus, it is a partial check for WCAG 2.0 success criterion 2.1.2, which applies to all content.

Expectation

For each test target, the outcome of one of the following rules is “passed”:

Assumptions

There are currently no assumptions.

Accessibility support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed example 1

No trap for keyboard navigation.

Code Snippet:
 <a href ="#">Link 1</a>
<button class="target">Button1</button>
 
Example Output: Open in a new tab/ window

Passed example 2

Using tabindex="1".

Code Snippet:
 <div tabindex=“1”>Text</div>
 
Example Output: Open in a new tab/ window

Passed example 3

Using tabindex="-1".

Code Snippet:
 <div tabindex=“-1”>Text</div>
 
Example Output: Open in a new tab/ window

Passed example 4

Keyboard trap with help information in a paragraph before, and where the method advised works.

Code Snippet:
 <script>
var trapOn = false ;
</script>

<p>Press the M-key to Exit</p>
<a id="link1" href="#">Link 1</a>
<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
 
Example Output: Open in a new tab/ window

Passed example 5

Keyboard trap with help information within the trap, and where the method advised works.

Code Snippet:
 <script>
var trapOn = false ;
</script>

<a id="link1" href="#">Link 1</a>
<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<p>Press the M-key to Exit</p>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
 
Example Output: Open in a new tab/ window

Passed example 6

Keyboard trap with “help” link that once clicked exposes the instructions.

Code Snippet:
 <script>
var trapOn = false ;

function showHelpText(){
document.getElementById("helptext").innerHTML = "<p>Press the M-key to Exit</p>";
}
</script>

<div onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)">
<a id="link1" href="#">Link 1</a>
<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('helpLink').focus();})(event)">Button 1</button>
<a id="helpLink" href="#" onclick="showHelpText()">How to go the next element</a>
<div id="helptext"></div>
<button id="btn2" class="target" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
</div>
<a id="link2" href="#">Link 2</a>
 
Example Output: Open in a new tab/ window

Failed

Failed example 1

Keyboard trap one element.

Code Snippet:
 <a href="#">Link 1</a>
<button class="target" onblur="setTimeout(() => this.focus(), 10)">Button1</button>
 
Example Output: Open in a new tab/ window

Failed example 2

Keyboard trap group.

Code Snippet:
 <button class="target" onblur="setTimeout(() => this.nextSibling.focus(), 10)">Button1</button>
<button class="target" onblur="setTimeout(() => this.previousSibling.focus(), 10)">Button2</button>
 
Example Output: Open in a new tab/ window

Failed example 3

A focusable element inbetween to keyboard traps.

Code Snippet:
 <button onblur="setTimeout(() => this.focus(), 10)">Button 1</button>
<button class="target" >Button 2</button>
<button onblur="setTimeout(() => this.focus(), 10)">Button 3</button>
 
Example Output: Open in a new tab/ window

Failed example 4

Keyboard trap with no instructions.

Code Snippet:
 <script>
var trapOn = false ;
</script>

<a id="link1" href="#">Link 1</a>
<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
 
Example Output: Open in a new tab/ window

Failed example 5

Keyboard trap with instructions that doesn’t give advise on the method for proceeding.

Code Snippet:
 <script>
var trapOn = false ;
</script>

<p>Go to the next element</p>
<a id="link1" href="#">Link 1</a>
<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
 
Example Output: Open in a new tab/ window

Failed example 6

Keyboard trap with help text, where the method advised doesn’t work.

Code Snippet:
 <script>
var trapOn = false ;
</script>

<a id="link1" href="#">Link 1</a>
<button id="btn1" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<p>Press the M-key to Exit</p>
<button id="btn2" class="target"  onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
 
Example Output: Open in a new tab/ window

Inapplicable example 2

Inapplicable example 1

No focusable element.

Code Snippet:
 <h1>Page 1</h1>
 
Example Output: Open in a new tab/ window

Inapplicable example 2

Disabled element.

Code Snippet:
 <button type="button" disabled>Click Me!</button>
 
Example Output: Open in a new tab/ window

Inapplicable example 3

Hidden element using display:none.

Code Snippet:
 <button type="button" style=“display:none;”>Click Me!</button>
 
Example Output: Open in a new tab/ window

Inapplicable example 4

Hidden element using visibility:hidden.

Code Snippet:
 <a href ="#" style="visibility:hidden;">Link 1</a>
<button class="target" style="visibility:hidden;">Button1</button>
 
Example Output: Open in a new tab/ window

Glossary

Focusable

Elements that can become the target of keyboard input as described in https://www.w3.org/TR/html/editing.html#focusable and https://www.w3.org/TR/html/editing.html#can-be-focused.

Contribute






GitHub

Contributing is open to anyone. We welcome any new issues or pull requests for changes. Auto WCAG Rules has conference calls every 4 weeks. If you are interested in becoming an active contributor or reviewer, we ask that you join the Auto WCAG Rules community group through the W3C Website. This requires setting up a W3C account, may require approval by the organization you work for if they are a W3C member.

Learn more about contributing to Auto WCAG Rules Join the Auto WCAG Rules community group now!