No keyboard trap standard navigation

  • Rule Typeatomic
  • Rule ID: a1b64e
  • Last modified: Jul 19, 2019
  • Accessibility Requirements Mapping
    • This rule is not required for conformance
  • Used in rules
  • Input Aspects

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.

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

  • 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.

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.

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

Passed Example 2

Using tabindex="1".

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

Passed Example 3

Using tabindex="-1".

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

Failed

Failed Example 1

Keyboard trap one element.

<a href="#">Link 1</a>
<button class="target" onblur="setTimeout(() => this.focus(), 10)">
	Button1
</button>

Failed Example 2

Keyboard trap group.

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

Failed Example 3

A focusable element inbetween to keyboard traps.

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

Inapplicable

Inapplicable Example 1

No focusable element.

<h1>Page 1</h1>

Inapplicable Example 2

Disabled element.

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

Inapplicable Example 3

Hidden element using display:none.

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

Inapplicable Example 4

Hidden element using visibility:hidden.

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

Glossary

Outcome

key: outcome

A conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementers using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Standard keyboard navigation

key: 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.

Changelog

Jul 19, 2019chore: run prettier (#688)
Jun 11, 2019chore: run prettier (#592)
Jun 7, 2019fix: failing tests for rule - No keyboard trap standard navigation (#569)
May 9, 2019Chore: Adapt site to ACT Rules CR format (#547)
May 7, 2019Template update - No keyboard trap standard navigation (#524)
May 2, 2019chore: add manual reporting download links to rule (#492)
Apr 29, 2019chore: rename files and update associations (#489)
Apr 17, 2019chore: fix typo in rules
Apr 16, 2019chore: add unique id to all rules (#478)
Apr 15, 2019chore: WCAG ACT RULES CG Website Update (#437)
Mar 3, 2019fix: update rule type frontmatter (#427)
Oct 24, 2018Keyboard trap - Editorial changes (#318)
Oct 19, 2018Fix layout typo in keyboard-trap-standard-nav
Oct 8, 2018Changed headings from pass/fail to passed/failed.
Oct 2, 2018Removed SC from atomic keyboard trap rule (#282)
Aug 30, 2018Chore: Update test cases format and descriptions (#230)
Aug 8, 2018Rule: SC2-1-2-no-keyboard-trap-standard-navigation and SC2-1-2-no-keyboard-trap-non-standard-navigation (#171)
Jun 13, 2018Updated after review from jkodu and Wilco
May 25, 2018Update SC2-1-2-no-keyboard-trap-standard-navigation.md
May 25, 2018Update SC2-1-2-no-keyboard-trap-standard-navigation.md
May 25, 2018Update SC2-1-2-no-keyboard-trap-standard-navigation.md
May 25, 2018Update SC2-1-2-no-keyboard-trap-standard-navigation.md
May 24, 2018Updated testcases
May 24, 2018Rename SC2-1-2-no-keyboard-trap-standard-navigation to SC2-1-2-no-keyboard-trap-standard-navigation.md
May 24, 2018Rename SC2-1-2-no-keyboard-trap-r1.md to SC2-1-2-no-keyboard-trap-standard-navigation
May 24, 2018Update SC2-1-2-no-keyboard-trap-r1.md
Apr 5, 2018added rule SC2-1-2-no-keyboard-trap-r1

Useful Links


Implementations

Tool NameCreated ByReport

Acknowledgements