Skip to content

[DRAFT] Element in sequential focus order has visible focus [oj04fd] - Added examples + review expectation #2369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

[DRAFT] Element in sequential focus order has visible focus [oj04fd] - Added examples + review expectation #2369

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4be4a94
Update sequentially-focusable-element-has-visible-focus-oj04fd.md
giacomo-petri Oct 30, 2025
b9be9d6
Update sequentially-focusable-element-has-visible-focus-oj04fd.md
giacomo-petri Oct 30, 2025
92f8ed3
Update sequentially-focusable-element-has-visible-focus-oj04fd.md
giacomo-petri Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 144 additions & 0 deletions _rules/sequentially-focusable-element-has-visible-focus-oj04fd.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,43 @@ Each of these three [focusable][] elements has a blue square in front of it when
<span id="indicator-final" class="indicator solid"></span>
```

#### Passed Example 5

Each of these three [focusable][] elements uses a `::before` pseudo-element with a black arrow as its `content`, which appears in front of the element when it is [focused][]. The arrow's `hsl` value (`hsl(0, 0%, 0%)`) is different to the `hsl` value of the background (`hsl(0, 0%, 100%)`) over which the arrow appears.

```html
<style>
body {
background: white;
}
ul {
list-style-type: none;
}
a {
display: inline-block;
color: black;
text-decoration: none;
padding: 4px 6px;
outline: none;
}

a:focus::before {
content: "→ ";
}
</style>
<ul>
<li>
<a href="#">ACT Rules</a>
</li>
<li>
<a href="#">WCAG</a>
</li>
<li>
<a href="#">WAI-ARIA</a>
</li>
</ul>
```

### Failed

#### Failed Example 1
Expand All @@ -143,6 +180,113 @@ The [focusable][] element does not have any pixel changing color when it is [foc
<a class="no-focus-default" href="https://act-rules.github.io/">ACT rules</a>
```

#### Failed Example 2

The [focusable][] element does not have any pixel changing color when it is [focused][] because the focus indicator's color matches the background's color, making the outline imperceptible.

```html
<style>
body {background: white;}
a:focus {outline-color: white;}
Comment on lines +189 to +190
Copy link
Member

@WilcoFiers WilcoFiers Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look like Prettier was run on it. Would you mind doing that?

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

#### Failed Example 3

The [focusable][] element does not have any pixel changing color when it is [focused][] because the focus indicator's is covered by another element.
Copy link
Member

@WilcoFiers WilcoFiers Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We talked this through in the CG call today. We think this passes the rule, and probably the success criterion too. WCAG does not require different elements to have different focus indicators. There's a comment about this point in the background section:

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.

We also felt this is enough of an edge case that it isn't worth trying to address.

Copy link
Collaborator Author

@giacomo-petri giacomo-petri Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I'm following. Are we referring to point 3? When you run the example, nothing changes in the visual appearance of the page when the element receives focus. Can you please explain a bit more?


```html
<style>
body {
background: white;
box-sizing: border-box;
}
body * {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
ul.nav {
background: #ccc;
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
position: relative
}
ul.nav > li {
display: inline-block;
}
a {
display: inline-block;
color: black;
text-decoration: none;
padding: 20px 20px;
outline: none;
border-bottom: 2px solid #ccc;
}
a:focus {
border-bottom: 2px solid #000;
}
.fly-out {
display: none;
position: absolute;
top: calc(100% - 2px);
left: 0;
background: #f4f4f4;
border: 1px solid #ccc;
padding: 0.5rem;
width: 100%;
}
li:focus-within .fly-out {
display: block;
}
</style>

<ul class="nav">
<li>
<a href="#">ACT Rules</a>
<div class="fly-out">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</li>
<li>
<a href="#">WCAG</a>
<div class="fly-out">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</li>
<li>
<a href="#">WAI-ARIA</a>
<div class="fly-out">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</li>
</ul>
```

#### Failed Example 4

The [focusable][] element does not have any pixel changing color when it is [focused][] because the element size is equal to the [scrolling area][] of the [viewport][].

```html
<div tabindex="0" style="width: 100vw; height: 100vh;">ACT rules</div>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down