Proposed Element in sequential focus order has visible focus

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.

Expectation

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

Background

Default styling in user agents provides a 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 2.0 and 2.1 do 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 and Success Criterion 2.4.12 Focus Not Obscured (Minimum) specifying how big the focus indicator should be. All Passed Examples in this rule satisfy those success criteria.

WCAG does not require that the focus indicator for each focusable element is unique in appearance. 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.

Assumptions

There are no assumptions.

Accessibility Support

There are no accessibility support issues known.

Bibliography

• Success Criterion 2.4.7 Focus Visible
• Success Criterion 2.4.11 Focus Appearance
• Success Criterion 2.4.12 Focus Not Obscured (Minimum)
• Understanding Success Criterion 2.4.7: Focus Visible
• Understanding Success Criterion 2.4.11: Focus Appearance
• Understanding Success Criterion 2.4.12: Focus Not Obscured (Minimum)

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

The following aspects are required in using this rule.

• CSS styling
• DOM tree

Test Cases

function toggleActivation(id) {
	document.getElementById(id).classList.toggle('active')
}

.indicator {
	display: inline-block;
	width: 1em;
	height: 1em;
}

.solid.active {
	background-color: navy;
}

.border.active {
	border: medium solid navy;
}

.no-focus-default:focus {
	/* Never do that without defining other focus indication! */
	outline: none;
}

Passed

Passed Example 1

Open in a new tab

The focusable element is part of sequential focus navigation. It has an outline when it is focused (due to default User Agent’s styling). The outline has a different hsl value compared to the hsl value of the background over which the outline appears (the exact values depend on the type of browser being used).

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

Passed Example 2

Open in a new tab

The focusable element is part of sequential focus navigation. It has an outline when it is focused (due to default User Agent’s styling). The outline has a different hsl value compared to the hsl value of the background over which the outline appears (the exact values depend on the type of browser being used).

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

Passed Example 3

Open in a new tab

The 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). The border’s hsl value (hsl(240, 100%, 25%)) is different to the hsl value of the background (hsl(0, 0%, 100%)) over which the border appears.

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

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. The square’s hsl value (hsl(240, 100%, 25%)) is different to the hsl value of the background (hsl(0, 0%, 100%)) over which the square appears.

<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/WCAG22/"
	>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 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>

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

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/WCAG22/">WCAG</a>

Glossary

Focusable

An element is focusable if one or both of the following are true:

• the element is part of sequential focus navigation; or
• the element has a tabindex value that is not null.

Exception: Elements that lose focus and do not regain focus during a period of up to 1 second after gaining focus, without the user interacting with the page the element is on, are not considered focusable.

Notes:

• The 1 second time span is an arbitrary limit which is not included in WCAG. Given that scripts can manage the focus state of elements, testing the focusability of an element consistently would be impractical without a time limit.
• The tabindex value of an element is the value of the tabindex attribute parsed using the rules for parsing integers. For the tabindex value to be different from null, it needs to be parsed without errors.

Focused

An element is said to be focused when the element matches the :focus pseudo-class uninterruptedly for a period of 1 second after a user stopped interacting with the page.

The 1 second time span is an arbitrary limit which is not included in WCAG. Given the possibility of the focus state of elements being managed through scripts, testing the focused state of an element consistently would be impractical without a time limit.

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 five 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
• cantTell: Whether the rule is applicable, or not all expectations were met could not be fully determined by the tester.
• Untested: The tester has not attempted to evaluate the test subject.

Note: A rule has one passed or failed outcome for every test target. When a tester evaluates a test target it can also be reported as cantTell if the rule cannot be tested in its entirety. For example, when applicability was automated, but the expectations have to be evaluated manually.

When there are no test targets the rule has one inapplicable outcome. If the tester is unable to determine whether there are test targets there will be one cantTell outcome. And when no evaluation has occurred the test target has one untested outcome. This means that each test subject always has one or more outcomes.

Outcomes used in ACT Rules can be expressed using the outcome property of the [EARL10-Schema][].

Rule Versions

1. Proposed version, 30 August 2023 (compare)
2. Latest version, 30 August 2023

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.

Implementation	Type	Consistency	Report
Alfa (fully automated) 0.80.0	Automated tool	Partial
Alfa (semi-automated) 0.80.0	Semi-automated tool	Consistent
Axe DevTools Pro 4.37.1	Semi-automated tool	Consistent
QualWeb 3.0.0	Automated tool	Partial
SortSite 6.45	Automated tool	Consistent
Trusted Tester 5.1	Test methodology	Consistent

Useful Links

• Github issues related to this rule
• Open a new issue
• Propose a change to the rule