Element in sequential focus order has visible focus

  • Rule Type:atomic
  • Rule Id: oj04fd
  • Last modified: Nov 11, 2020
  • Accessibility Requirements Mapping:
    • 2.4.7 Focus Visible (Level AA)
      • Learn More about 2.4.7 Focus Visible
      • Required for conformance to WCAG 2.0 and later on level AA and higher.
      • Outcome mapping:
        • Any failed outcomes: success criterion is not satisfied.
        • All passed outcomes: success criterion needs further testing.
        • An inapplicable outcome: success criterion needs further testing.
  • Input Aspects:

Description

This rule checks that each element in sequential focus order has some visible focus indication.

Applicability

The rule applies to any element which is part of sequential focus navigation in an HTML document with at least two elements in its sequential focus navigation order.

Expectation

For each target element, there is at least one device pixel inside the scrolling area of the viewport whose color is different when the element is focused from when it is not.

Assumptions

This rule assumes that documents with only one focusable element automatically satisfy Success Criterion 2.4.7 Focus Visible, as stated in Understanding Success Criterion 2.4.7: Focus Visible: "if there is only one keyboard actionable control on the screen, the success criterion would be met".

Accessibility Support

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

Background

Default styling in most user agents is providing perfectly valid focus indication for focusable elements (even those that are not focusable by default), as shown in Passed Examples 1 and 2. Many examples in this rule need to remove that indicator in order to illustrate various situations. This is bad practice and should normally be avoided.

WCAG does not have any requirement of how big or small focus indicator should be, or how far or near from the focusable element it should be. Thus it is possible to pass this rule and Success Criterion 2.4.7 Focus Visible with barely perceptible changes at the other end of the page. That would however still be an accessibility issue. WCAG 2.2 includes Success Criterion 2.4.11 Focus Appearance (Minimum) and Success Criterion 2.4.12 Focus Appearance (Enhanced) specifying how big the focus indicator should be. All Examples in this rule avoid focus indications that are too small, too far away, have low contrast, …

WCAG has no clear requirement of unicity of the focus indicator for each focusable element. Therefore, this rule can pass even if several focus indicators are identical. Such a situation may nonetheless cause confusion and all Examples in this rule avoid it.

Due to the Applicability of this rule, test cases must have at least two elements in their sequential focus navigation order. In order to keep the test case focused on one aspect of the rule, most of them include a button labeled "Dummy button" whose sole purpose is to make the other element applicable. This dummy button is passing the rule (due to default User Agent's styling) for the Passed test cases, and failing it for the Failed test cases; and it is never mentioned further in the test cases descriptions.

Test Cases

Passed

Passed Example 1

Open in a new tab

The first focusable element is part of sequential focus navigation. It has an outline when it is focused (due to default User Agent's styling).

<a href="https://act-rules.github.io/">ACT rules</a> <button>Dummy button</button>

Passed Example 2

Open in a new tab

The first focusable element is part of sequential focus navigation. It has an outline when it is focused (due to default User Agent's styling).

<span tabindex="0">Act rules</span> <button>Dummy button</button>

Passed Example 3

Open in a new tab

The first focusable element is part of sequential focus navigation. Its parent span puts a border around it when it is focused (the border of the span element).

<link rel="stylesheet" href="/test-assets/focus-visible-oj04fd/styles.css" />
<script src="/test-assets/focus-visible-oj04fd/script.js"></script>

<span id="indicator" class="border">
	<a
		id="act"
		class="no-focus-default"
		onfocus="toggleActivation('indicator')"
		onblur="toggleActivation('indicator')"
		href="https://act-rules.github.io/"
		>ACT rules</a
	>
</span>
<button>Dummy button</button>

Passed Example 4

Open in a new tab

Each of these three focusable elements has a blue square in front of it when it is focused.

<link rel="stylesheet" href="/test-assets/focus-visible-oj04fd/styles.css" />
<script src="/test-assets/focus-visible-oj04fd/script.js"></script>

<span id="indicator-act" class="indicator solid"></span>
<a
	id="act"
	class="no-focus-default"
	onfocus="toggleActivation('indicator-act'); toggleActivation('indicator-wcag')"
	onblur="toggleActivation('indicator-act'); toggleActivation('indicator-wcag')"
	href="https://act-rules.github.io/"
	>ACT rules</a
>
<span id="indicator-wcag" class="indicator solid"></span>
<a
	id="wcag"
	class="no-focus-default"
	onfocus="toggleActivation('indicator-wcag'); toggleActivation('indicator-w3c')"
	onblur="toggleActivation('indicator-wcag'); toggleActivation('indicator-w3c')"
	href="https://www.w3.org/TR/WCAG21/"
	>WCAG</a
>
<span id="indicator-w3c" class="indicator solid"></span>
<a
	id="w3c"
	class="no-focus-default"
	onfocus="toggleActivation('indicator-w3c'); toggleActivation('indicator-final')"
	onblur="toggleActivation('indicator-w3c'); toggleActivation('indicator-final')"
	href="https://www.w3.org/"
	>WCAG</a
>
<span id="indicator-final" class="indicator solid"></span>

Failed

Failed Example 1

Open in a new tab

The first focusable element does not have any pixel changing color when it is focused because the default styling has been overwritten by a style that removes the outline.

<link rel="stylesheet" href="/test-assets/focus-visible-oj04fd/styles.css" />

<a class="no-focus-default" href="https://act-rules.github.io/">ACT rules</a>
<button class="no-focus-default">Dummy button</button>

Inapplicable

Inapplicable Example 1

Open in a new tab

This document contains no focusable element.

<span>ACT rules</span>

Inapplicable Example 2

Open in a new tab

This document contains only one focusable element.

<a href="https://act-rules.github.io/">ACT rules</a>

Inapplicable Example 3

Open in a new tab

None of the focusable elements in this document are part of sequential focus navigation.

<a tabindex="-1" href="https://act-rules.github.io/">ACT rules</a>
<a tabindex="-1" href="https://www.w3.org/TR/WCAG21/">WCAG</a>

Inapplicable Example 4

Open in a new tab

The sequential focus navigation order of this document contains only one element.

<a href="https://act-rules.github.io/">ACT rules</a> <a tabindex="-1" href="https://www.w3.org/TR/WCAG21/">WCAG</a>

Glossary

Outcome

An outcome is 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: Implementations 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.


Useful Links


Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date. This section will not be included in the rule when it is published on the W3C website.

ToolConsistencyCompleteReport
AlfaconsistentYesView Report
QualWebconsistentYesView Report

Acknowledgments

Table of Contents