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.

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

3193 Update Understanding Focus Not Obscured #3194

Merged
merged 9 commits into from May 23, 2023
9 changes: 4 additions & 5 deletions understanding/22/focus-not-obscured-enhanced.html
Expand Up @@ -21,15 +21,15 @@ <h2>Focus Not Obscured (Enhanced) Success Criterion text</h2>
<section id="intent">
<h2>Intent of Focus Not Obscured (Enhanced)</h2>
<p>The intent of this Success Criterion is to ensure that the item receiving keyboard focus is always visible in the user's viewport. For sighted people who rely on a keyboard (or on a device that operates through the keyboard interface, such as a switch or voice input), knowing the current point of focus is critical. The component with focus signals the interaction point on the page. Where users cannot see the item with focus, they may not know how to proceed, or may even think the system has become unresponsive.</p>
<p>Typical types of content that can overlap focused items are sticky footers, sticky headers, and non-modal dialogs. As a user tabs through the page, these layers of content can obscure the item receiving focus, along with its focus indicator.</p>
<p>A notification implemented as sticky content, such as a cookie banner, will fail this Success Criterion if it partially obscures a component receiving focus. Ways of passing include making the banner modal so the user has to dismiss the banner before navigating through the page, or using <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding">scroll padding</a> so the banner does not overlap other content. Notifications that do not require user action could also meet this criterion by closing on loss of focus.</p>
<p>Another form of obscuring can occur where light boxes or other semi-opaque effects overlap the item with focus. While less than 100 percent opacity is not <q>entirely hidden</q>, it is causing the component to be <q>partially hidden</q> and a failure of this Success Criterion. Such semi-opaque overlaps may <em>also</em> cause a failure of <a href="../understanding/focus-appearance.html">2.4.11 Focus Appearance</a>.</p>
<p>Typical types of content that can overlap focused items are sticky footers, sticky headers, and non-modal dialogs. As a user tabs through the page, these layers of content can hide the item receiving focus, along with its focus indicator.</p>
<p>A notification implemented as sticky content, such as a cookie banner, will fail this Success Criterion if it partially covers a component receiving focus. Ways of passing include making the banner modal so the user has to dismiss the banner before navigating through the page, or using <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding">scroll padding</a> so the banner does not overlap other content. Notifications that do not require user action could also meet this criterion by closing on loss of focus.</p>
<p>Another form of obscuring can occur where light boxes or other semi-opaque effects overlap the item with focus. This form of obscuring is <em>not</em> in scope for this Success Criterion. While less than 100 percent opacity is not causing the component to be <q>hidden</q>, such semi-opaque overlaps may cause a failure of <a href="../understanding/focus-appearance.html">2.4.11 Focus Appearance</a>. When a focus indicator can be covered by a semi-opaque component, the the focus indicator should be assessed against 2.4.11. The intention in both situations is that the component receiving focus should never be obscured to the point a user cannot tell which item has focus.</p>
</section>
<section id="benefits">
<h2>Benefits of Focus Not Obscured (Enhanced)</h2>
<ul>
<li>Sighted users who rely on a keyboard interface to operate the page will be able to see the component which gets keyboard focus. Such users include those who rely on devices which use the keyboard interface, including speech input, sip-and-puff software, on-screen keyboards, scanning software, and a variety of assistive technologies and alternate keyboards.</li>
<li>People with limited or low vision, who may primarily use a pointer for screen orientation and repositioning, nonetheless benefit from a fuller visible indication of the current point of keyboard interaction, especially where magnification reduces the overall viewing portion of the screen.</li>
<li>People with limited or low vision but who rely upon a pointing device (for viewport orientation and repositioning) benefit from a clearly visible indication of the current point of keyboard interaction, especially where magnification reduces the overall useable portion of content.</li>
<li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to more easily discover where the focus is located.</li>
</ul>
</section>
Expand Down Expand Up @@ -59,7 +59,6 @@ <h3>Additional Techniques (Advisory)</h3>
<h3>Failures</h3>
<ul>
<li>An interaction that causes content to appear over the component with keyboard focus, visually covering part of the focus indicator. This behavior might be encountered with advertising or promotional material meant to provide more information about a product as the user navigates through a catalogue.</li>
<li>A light box or other semi-opaque effect that overlaps the focus indicator. The obscuring may triggered by a component receiving focus or from other interation, but is a failure regardless.</li>
<li>A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page, a focused item is partially hidden by the footer because content in the viewport scrolls without sufficient <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding" rel="nofollow">scroll padding</a>.</li>
</ul>
</section>
Expand Down
8 changes: 4 additions & 4 deletions understanding/22/focus-not-obscured-minimum.html
Expand Up @@ -46,17 +46,17 @@ <h2>Intent of Focus Not Obscured (Minimum)</h2>

<p>A notification implemented as sticky content, such as a cookie banner, will fail this Success Criterion if it entirely obscures a component receiving focus. Ways of passing include making the banner modal so the user has to dismiss the banner before navigating through the page, or using <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding">scroll padding</a> so the banner does not overlap other content. Notifications that do not require user action could also meet this criterion by closing on loss of focus.</p>

<p>Another form of obscuring can occur where light boxes or other semi-opaque effects overlap the item with focus. While less than 100 percent opacity is not causing the component to be <q>entirely hidden</q>, such semi-opaque overlaps may cause a failure of <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html">2.4.11 Focus Appearance</a>. When a focus indicator can be covered by a semi-opaque component, the ability of the focus indicator to pass 2.4.11 should be evaluated (and pass) while the focus indicator is under the semi-opaque component. The intention in both situations is that the component receiving focus should never be obscured to the point a user cannot tell which item has focus.</p>
<p>Another form of obscuring can occur where light boxes or other semi-opaque effects overlap the item with focus. While less than 100 percent opacity is not causing the component to be <q>entirely hidden</q>, such semi-opaque overlaps may cause a failure of <a href="../understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. When a focus indicator can be covered by a semi-opaque component, the ability of the focus indicator to pass 1.4.11 should be evaluated (and pass) while the focus indicator is under the semi-opaque component. The intention in both situations is that the component receiving focus should never be obscured to the point a user cannot tell which item has focus.</p>

</section>

<section id="benefits">
<h2>Benefits of Focus Not Obscured (Minimum)</h2>

<ul>
<li>Sighted users who rely on a keyboard interface to operate the page will be able to see part of the component which gets keyboard focus. Such users include those who rely on devices which use the keyboard interface, including speech input, sip-and-puff software, on-screen keyboards, scanning software, and a variety of assistive technologies and alternate keyboards.</li>
<li>People with limited or low vision, who may primarily use a pointer for screen orientation and repositioning, nonetheless benefit from a visible indication of the current point of keyboard interaction, especially where magnification reduces the overall viewable portion of the content.</li>
<li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.</li>
<li>Sighted users who rely on a keyboard interface to operate the page will be able to see the component which gets keyboard focus. Such users include those who rely on devices which use the keyboard interface, including speech input, sip-and-puff software, on-screen keyboards, scanning software, and a variety of assistive technologies and alternate keyboards.</li>
<li>People with limited or low vision but who rely upon a pointing device (for viewport orientation and repositioning) benefit from a visible indication of the current point of keyboard interaction, especially where magnification reduces the overall usable portion of content.</li>
<li>People with attention limitations, short term memory limitations, or limitations in executive processes &mdash; by being able to more easily discover where the focus is located.</li>
</ul>

</section>
Expand Down