Skip to content
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

Jump to bottom

Add notes to 2.4.3 understanding #1643

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Add notes to 2.4.3 understanding #1643

Changes from 11 commits
Commits
Show all changes
18 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
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
63 changes: 42 additions & 21 deletions understanding/20/focus-order.html
View file
Open in desktop
Expand Up @@ -8,11 +8,9 @@
<body>
<h1>Understanding Focus Order</h1>


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


<p>The intent of this Success Criterion is to ensure that when users navigate sequentially
through content, they encounter information in an order that is consistent with the
meaning of the content and can be operated from the keyboard. This reduces confusion
Expand Down Expand Up @@ -55,6 +53,28 @@ <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 also does not need to follow the visual presentation 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 elements in the
left-hand column would receive focus first – and, more generally, that focus order proceeds across lines,
from components in the top-left corner of the viewport to the bottom-right corner.
However, if meaning and operation are not affected, in this case it is not a failure if elements in the right-hand
column receive focus first. As a best practice, though, make sure the focus order reinforces the reading order.
</p>

<div class="note">
<p>It is not a failure of this success criterion if static/non-interactive content
receives focus. Making an element that does not act as an actionable user interface component
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
focusable, or programmatically moving focus to such an element, does not necessarily constitute
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
a failure of this success criterion. This situation is a failure if these additional focus stops
impede the operation of the content, or create 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 focusable elements which cannot be operated
or actioned, as these are likely to make operation unnecessarily tedious for keyboard users.</p>
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
</div>

<p>For clarity:</p>

<ol>
Expand All @@ -63,6 +83,8 @@ <h2>Intent of Focus Order</h2>
operability only when navigation sequences affect meaning and operability.
</li>

<li>Focus order does not need to follow visual presentation or layout.</li>
Copy link
Member

Choose a reason for hiding this comment

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

I don't think that I agree with this statement. The issue is that the interpretation of the visual presentation is subjective.

Copy link
Member Author

Choose a reason for hiding this comment

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

does not necessarily need to follow visual presentation, perhaps? i've seen extreme cases where auditors gleefully fail things if they're not exactly in the same order as the visual, with things like three little icon-based buttons that receive focus right-to-left instead of left-to-right (because the author used CSS floats that effectively reversed the order) ... but where the meaning was not impacted and it was not really a problem.

there must be some way we can somehow make that clear...

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, add "necessarily".

Copy link
Member Author

Choose a reason for hiding this comment

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

wonder if it's too handwavy though. maybe best to expand this, or add some more words that reflect what @awkawk rightly says...that it's subjective?

Copy link
Member

Choose a reason for hiding this comment

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

Who is deciding what is the visual presentation order? Shouldn't the tab order follow whatever that is decided to be?

Copy link
Member Author

Choose a reason for hiding this comment

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

or adding "as long as meaning/operation are not affected"

Copy link
Member Author

Choose a reason for hiding this comment

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

"Who is deciding what is the visual presentation order?" not sure i follow...is this rhetorical? the author/designer will work on the visual/layout, but for various reasons the focus order may be slightly different. the point is that as long as meaning/operation aren't affected (and it's...subjectively...not too haphazard jumping all over the place) it's not necessarily a failure if the focus order doesn't strictly follow the western top-to-bottom/left-to-right (in left-to-right writing cultures)

alastc marked this conversation as resolved.
Show resolved Hide resolved

<li>In those cases where it is required, there may be more than one order that will preserve
meaning and operability.
</li>
Expand All @@ -71,14 +93,16 @@ <h2>Intent of Focus Order</h2>
them needs to be provided.
</li>

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

</ol>


</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 @@ -110,7 +134,6 @@ <h2>Benefits of Focus Order</h2>
<section id="examples">
<h2>Examples of Focus Order</h2>


<ol>

<li>On a web page that contains a tree of interactive controls, the user can use the up
Expand Down Expand Up @@ -176,7 +199,6 @@ <h2>Examples of Focus Order</h2>
<section id="resources">
<h2>Resources for Focus Order</h2>


</section>

<section id="techniques">
Expand All @@ -190,11 +212,11 @@ <h3>Sufficient Techniques for Focus Order</h3>
<ol>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G59" class="general">Placing the interactive elements in an order that follows sequences and relationships
within the content
</a>

</li>

<li>
Expand All @@ -206,9 +228,9 @@ <h3>Sufficient Techniques for Focus Order</h3>
<ul>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C27" class="css">Making the DOM order match the visual order</a>

</li>

<li>
Expand All @@ -234,23 +256,23 @@ <h3>Sufficient Techniques for Focus Order</h3>
<ul>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR26" class="script">Inserting dynamic content into the Document Object Model immediately following its
trigger element
</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR37" class="script">Creating custom dialogs in a device independent way</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR27" class="script">Reordering page sections using the Document Object Model</a>

</li>

</ul>
Expand All @@ -269,23 +291,22 @@ <h3>Additional Techniques (Advisory) for Focus Order</h3>
<section id="failure">
<h3>Failures for Focus Order</h3>


<ul>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F44" class="failure">Failure of 2.4.3 due to using tabindex to create a tab order that does not preserve
meaning and operability
</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F85" class="failure">Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent
to their trigger control in the sequential navigation order
</a>

</li>

</ul>
Expand Down