Last updated:

Created by:

Description

This rule checks if it is possible to use non-standard keyboard navigation to navigate through content where focus is trapped when using standard ways of keyboard navigation.

Test procedure

Applicability

The rule applies to any HTML or SVG element that is focusable where focus cannot cycle to the browser UI by using standard keyboard navigation.

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 1

For each target element help information is visible on the page and included in the accessibility tree or can be accessed from within the keyboard trap.

Note: As per WCAG 2.0 Success Criterion 2.1.1 Keyboard the help information should be accessible through a keyboard interface.

Expectation 2

The help information explains how to cycle to the browser UI, or on how to get to a point from where it is possible to cycle to the browser UI, using standard keyboard navigation.

Expectation 3

For each target element focus can cycle to the browser UI by using the method advised in the help information.

Note: Cycling back to the browser UI can be done both by moving forward through the tab order and by moving backwards. It is not possible to fulfil this expectation by using browser specific shortcuts to return to the browser UI.

Assumptions

Accessibility support

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

Background

Test Cases

Passed

Passed example 1

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 2

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 3

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 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 2

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 3

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

Inapplicable example 1

Not a keyboard trap (interactive element).

Code Snippet:
 <a id="link1" href="#">Link 1</a>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<a id="link2" href="#">Link 2</a>
 
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.

Standard keyboard navigation

Standard keyboard navigation entails using one or more of the following:

  • Tab key
  • Shift+Tab
  • Arrow keys
  • Esc key
  • Enter key
  • Space key

Expected behaviour of standard keyboard navigation keys:

  • Tab key: Skipping forward between focusable elements
  • Shift+Tab: Skipping backwards between focusable elements
  • Arrow keys: Navigate input elements, e.g. up/down drop down, between radio buttons etc.
  • Esc key: Close or cancel, e.g close a modal
  • Enter key: Select or activate the element in focus (same as clicking with mouse)
  • Space key: Select input elements, e.g. drop downs, radio buttons etc.

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are [included in the accessibility tree][] can be found in the HTML accessibility API mappings and the SVG accessibility API mappings.

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Visible on the Page

Elements should be visible on the page, and also meet the requirements for color contrast and visibility when focused. For more details, check out:

Visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

Test Aspects

Test aspects are defined as part of the ACT Rules format 1.0.
  • DOM Tree

  • CSS Styling

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!