Last updated:

Created by:

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.

Test procedure

Applicability

The rule 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 target element focus can cycle to the browser UI by using standard keyboard navigation.

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

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

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

Inapplicable

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.

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.

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!