Skip to content

Add notes to 2.4.3 understanding to try and address static content receiving focus and what does/doesn't constitute a focus order failure #1643

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.

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 23 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
417b9ff
Add notes to 2.4.3 understanding
patrickhlauke Feb 15, 2021
3d08ead
Tweak note about redundant focus stops
patrickhlauke Feb 15, 2021
d0138bd
Expand note to mention "card" component, give code example for nested…
patrickhlauke Feb 15, 2021
7cd188a
Remove the "redundant" part
patrickhlauke May 11, 2022
8be23bd
Remove "normatively"
patrickhlauke May 11, 2022
29dcb88
Tweak language based on suggestions from @alastc @mbgower @bruce-usab
patrickhlauke May 14, 2022
c3e0403
Fix spacing/indentation
patrickhlauke May 14, 2022
147b6fe
Tweak/expand the "western left-to-right" part
patrickhlauke May 19, 2022
0028075
Update focus-order.html
mbgower Aug 2, 2022
8667b31
Update focus-order.html
mbgower Aug 2, 2022
d0382d3
Update understanding/20/focus-order.html
patrickhlauke Jun 19, 2023
9f7feb7
Remove unnecessary "unnecessarily"
patrickhlauke Jun 27, 2023
083dbab
Update understanding/20/focus-order.html
alastc Jun 27, 2023
d841c2a
Tweaks/rewordings
patrickhlauke Jul 5, 2023
61fda92
Capitalisation
patrickhlauke Jul 6, 2023
116e230
"too many" > "unwarranted"
patrickhlauke Jul 7, 2023
aa6dcd8
Merge branch 'main' into patrickhlauke-understanding-focus-order-note
patrickhlauke Oct 31, 2023
3e33e78
Merge branch 'main' into patrickhlauke-understanding-focus-order-note
patrickhlauke Feb 15, 2024
14dc43e
Merge branch 'main' into patrickhlauke-understanding-focus-order-note
patrickhlauke Aug 29, 2024
df6eed7
Merge branch 'main' into patrickhlauke-understanding-focus-order-note
patrickhlauke Jan 22, 2025
42da714
Update understanding/20/focus-order.html
patrickhlauke Jan 22, 2025
ad8f4fb
Update understanding/20/focus-order.html
patrickhlauke Jan 22, 2025
dc8904c
Merge branch 'main' into patrickhlauke-understanding-focus-order-note
patrickhlauke Mar 28, 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
39 changes: 29 additions & 10 deletions understanding/20/focus-order.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ <h2>In brief</h2>
</dl>

</section>
<section id="intent">

<section id="intent">
<h2>Intent of Focus Order</h2>

<p>The intent of this Success Criterion is to ensure that when users navigate sequentially
Expand Down Expand Up @@ -62,30 +62,50 @@ <h2>Intent of Focus Order</h2>
sets of users and does not appear to either of them to jump around randomly.
</p>

<p>Focus order needs to allow the user to navigate focusable elements in a logical order,
and that order needs to preserve any meaning or operation that the page is conveying.
Focus order does not necessarily need to follow the visual layout of the web page,
as long as the order in which elements receive focus is logical, and the hierarchy and relationship
of content implied by the visual presentation is preserved. For instance, in a two-column
layout, the assumption in western left-to-right systems may be that focus moves through the elements in the
left-hand column first, from the top to the bottom of the column, and then proceed to the right-hand column.
However, if the two columns are independent of each other, and meaning/operation are not affected, it is not
a failure if elements in the right-hand column receive focus first, followed by the elements in the left-hand column.
As a best practice, though, make sure the focus order reinforces the reading order implied by the visual layout.
</p>

<div class="note">
<p>This requirement does not specify what should or should not receive focus, but rather assesses the order in which elements receive focus. This Success Criterion does not prohibit making non-operable content (e.g., static text) focusable, or programmatically moving focus to such content. However, it is a failure of Focus Order if items receive focus in an order that impedes the meaning or operation of content, or creates confusing or illogical focus orders — for example,
a control appearing to receive focus multiple times due to the use of nested focusable elements.</p>
<pre><code>&lt;div tabindex="0"&gt;&lt;button&gt;...&lt;/button&gt;&lt;/div&gt;</code></pre>
<p>As a best practice, avoid having unwarranted focusable elements which cannot be operated
or actioned, as these are likely to make operation tedious for keyboard users.</p>
</div>

<p>For clarity:</p>

<ul>

<li>Focusable components need to receive focus in an order that preserves meaning and
operability only when navigation sequences affect meaning and operability.
operability.
</li>

<li>In those cases where it is required, there may be more than one order that will preserve
meaning and operability.
</li>
<li>Focus order does not necessarily need to follow the visual presentation or layout.</li>

<li>If there is more than one order that preserves meaning and operability, only one of
them needs to be provided.
</li>

<li>Static/non-interactive elements can receive focus, as long as they don't
impede operation of the content.
</li>

</ul>



</section>
<section id="benefits">
<h2>Benefits of Focus Order</h2>


<p>These techniques benefit keyboard users who navigate documents sequentially and expect
the focus order to be consistent with the sequential reading order.
</p>
Expand Down Expand Up @@ -178,7 +198,6 @@ <h2>Examples of Focus Order</h2>
<section id="resources">
<h2>Resources for Focus Order</h2>


</section>

<section id="techniques">
Expand Down