From aabd16e2fd9f10635c007712f5c1fe550d824b06 Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 28 Apr 2023 16:16:13 -0400 Subject: [PATCH 01/16] Update focus-not-obscured-minimum.html --- understanding/22/focus-not-obscured-minimum.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 9557f44374..0e132ad8fe 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -1,12 +1,12 @@ - + Understanding Focus Not Obscured - + -

Understanding Focus Not Obscured

+

Understanding Focus Not Obscured (minimum)

Status

@@ -17,7 +17,7 @@

Status

-

Focus Not Obscured Success Criterion text

+

Focus Not Obscured (Minimum) Success Criterion text

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

From e416e3dc884f4a43ef0514e665ac9b853d3bf28b Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 28 Apr 2023 17:00:37 -0400 Subject: [PATCH 02/16] Update focus-not-obscured-minimum.html --- .../22/focus-not-obscured-minimum.html | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 0e132ad8fe..14d1e205a6 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -6,7 +6,7 @@ -

Understanding Focus Not Obscured (minimum)

+

Understanding Focus Not Obscured (Minimum)

Status

@@ -22,7 +22,7 @@

Focus Not Obscured (Minimum) Success Criterion text

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

If the interface is configurable so that the user can reposition content such as toolbars and non-modal dialogs, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.

-
+
@@ -30,7 +30,7 @@

Intent of Focus Not Obscured

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.

-

In recognition of the complex responsive designs common today, this AA criterion allows for the component receiving focus to be partially obscured by other author-created content. A partly obscured component can still be very visible, although the more of it that is obscured, the less easy it is to see. For that reason, authors should attempt to design interactions to reduce the degree and frequency with which the item receiving focus is partly obscured. For best visiblity, none of the component receiving focus should be hidden. This preferred outcome is covered by the AAA criterion Focus Not Obscured (Enhanced).

+

In recognition of the complex responsive designs common today, this AA criterion allows for the component receiving focus to be partially obscured by other author-created content. A partly obscured component can still be very visible, although the more of it that is obscured, the less easy it is to see. For that reason, authors should attempt to design interactions to reduce the degree and frequency with which the item receiving focus is partly obscured. For best visibility, none of the component receiving focus should be hidden. This preferred outcome is covered by the AAA criterion Focus Not Obscured (Enhanced).

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.

@@ -40,44 +40,43 @@

Intent of Focus Not Obscured

-
+

Benefits of Focus Not Obscured

    -
  • 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, onscreen keyboards, scanning software, and a variety of assistive technologies and alternate keyboards.
    • +
  • 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.
  • People with limited or low vision, who may primarily user 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 viewing portion of the screen.
  • People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
-
-

Examples of Focus Not Obscured

+
+

Examples of Focus Not Obscured (Minimum)

-
    -
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not hidden by the footer.
    • -
  • A page has a large (30% wide) cookie approval dialogue. The dialogue is modal, preventing access to the other controls in the page until it has been dismissed.
    • -
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification is dismissed when it loses focus so it does not obscure any other controls.
    • -
+
    +
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus.
    • +
  • A page has a large (30% wide) cookie approval dialogue. The dialogue is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the keyboard focus remains in the cookie approval banner until selections are made and submitted.
    • +
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus so it does not obscure any other controls.
    • +
  • A wide horizontal sticky banner uses scroll padding so that it does not overlap other content.
    • +
-
+
-

Resources

+

Resources

-
+
-

Techniques for Focus Not Obscured

+

Techniques for Focus Not Obscured (Minimum)

Sufficient Techniques

    -
  1. - C43 -
    2. +
  2. C43 Using CSS margin and scroll-margin to un-obscure content
@@ -91,7 +90,7 @@

Additional Techniques (Advisory)

Failures

  1. - + An interaction that causes content to appear over the keyboard focus, visually covering the entire component with keyboard focus. 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.
From 08a05df7dff8227472106e48416f281e5871e429 Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 28 Apr 2023 17:06:55 -0400 Subject: [PATCH 03/16] Update focus-not-obscured-minimum.html --- understanding/22/focus-not-obscured-minimum.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 14d1e205a6..57a6e81f80 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -76,7 +76,9 @@

Techniques for Focus Not Obscured (Minimum)

Sufficient Techniques

    -
  1. C43 Using CSS margin and scroll-margin to un-obscure content
    2. +
  2. + C43 Using CSS margin and scroll-margin to un-obscure content +
From 9f2fb4d1a60e7027b7dfad9a5a91c3480768438d Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 28 Apr 2023 17:09:43 -0400 Subject: [PATCH 04/16] Update focus-not-obscured-minimum.html --- understanding/22/focus-not-obscured-minimum.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 57a6e81f80..c4326d9593 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -77,7 +77,7 @@

Sufficient Techniques

  1. - C43 Using CSS margin and scroll-margin to un-obscure content + C43 Using CSS margin and scroll-margin to un-obscure content
From 3a70d43b5dd5e4b2a3b7ebab85cc063ce0d99cbe Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Fri, 5 May 2023 16:27:45 +0100 Subject: [PATCH 05/16] Combining two examples --- understanding/22/focus-not-obscured-minimum.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index c4326d9593..8d766aaada 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -55,10 +55,9 @@

Benefits of Focus Not Obscured

Examples of Focus Not Obscured (Minimum)

    -
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus.
    • -
  • A page has a large (30% wide) cookie approval dialogue. The dialogue is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the keyboard focus remains in the cookie approval banner until selections are made and submitted.
    • +
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
    • +
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the keyboard focus remains in the cookie approval banner until selections are made and submitted.
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus so it does not obscure any other controls.
    • -
  • A wide horizontal sticky banner uses scroll padding so that it does not overlap other content.
From 159d1618e29a2a714b08c9d3ea87246cd76b9a1e Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Fri, 5 May 2023 16:30:09 +0100 Subject: [PATCH 06/16] Update understanding/22/focus-not-obscured-minimum.html --- understanding/22/focus-not-obscured-minimum.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 8d766aaada..484a818e0e 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -55,7 +55,7 @@

Benefits of Focus Not Obscured

Examples of Focus Not Obscured (Minimum)

    -
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
    • +
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not completely hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the keyboard focus remains in the cookie approval banner until selections are made and submitted.
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus so it does not obscure any other controls.
From 6a04fd3acea0e9e3b7b5bd509d83ad53ffa788ad Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 5 May 2023 16:42:24 -0400 Subject: [PATCH 07/16] Update focus-not-obscured-minimum.html a bit more Added two more (minimum) parentheticals and made examples a little less strict. --- understanding/22/focus-not-obscured-minimum.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 484a818e0e..adc4c7a23a 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -2,7 +2,7 @@ - Understanding Focus Not Obscured + Understanding Focus Not Obscured (Minimum) @@ -41,10 +41,10 @@

Intent of Focus Not Obscured

-

Benefits of Focus Not Obscured

+

Benefits of Focus Not Obscured (Minimum)

    -
  • 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.
    • +
  • 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.
  • People with limited or low vision, who may primarily user 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 viewing portion of the screen.
  • People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
@@ -56,8 +56,8 @@

Examples of Focus Not Obscured (Minimum)

  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not completely hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
    • -
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the keyboard focus remains in the cookie approval banner until selections are made and submitted.
    • -
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus so it does not obscure any other controls.
    • +
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the major portion of the cookie approval dialog remains on screen (until selections are made and submitted), and some portion of the keyboard focus is visible.
    • +
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification, so at least some portion of the keyboard is in view. The notification disappears when it loses focus so it does not obscure any other controls, and leaves keyboard at least partially visible.
From b410948429d2796c69e8004dabf10573d33600f3 Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 5 May 2023 16:47:07 -0400 Subject: [PATCH 08/16] Update focus-not-obscured-minimum.html a bit more Added one more (Minimum) parenthetical, and softened intent. --- understanding/22/focus-not-obscured-minimum.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index adc4c7a23a..453c3c416f 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -26,9 +26,9 @@

Focus Not Obscured (Minimum) Success Criterion text

-

Intent of Focus Not Obscured

+

Intent of Focus Not Obscured (Minimum)

-

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.

+

The intent of this Success Criterion is to ensure that the item receiving keyboard focus is always partially 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.

In recognition of the complex responsive designs common today, this AA criterion allows for the component receiving focus to be partially obscured by other author-created content. A partly obscured component can still be very visible, although the more of it that is obscured, the less easy it is to see. For that reason, authors should attempt to design interactions to reduce the degree and frequency with which the item receiving focus is partly obscured. For best visibility, none of the component receiving focus should be hidden. This preferred outcome is covered by the AAA criterion Focus Not Obscured (Enhanced).

From f90d9a6ee7255b397cbed8397a338db9a9b8919c Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 5 May 2023 17:14:39 -0400 Subject: [PATCH 09/16] Update focus-not-obscured-enhanced.html Mostly copy/paste from recent work on Focus Not Obscured (Minimum) --- .../22/focus-not-obscured-enhanced.html | 150 ++++++++---------- 1 file changed, 62 insertions(+), 88 deletions(-) diff --git a/understanding/22/focus-not-obscured-enhanced.html b/understanding/22/focus-not-obscured-enhanced.html index 19a801c45c..20f19f2fc5 100644 --- a/understanding/22/focus-not-obscured-enhanced.html +++ b/understanding/22/focus-not-obscured-enhanced.html @@ -1,93 +1,67 @@ - + - - Understanding Focus Not Obscured (Enhanced) - + +Understanding Focus Not Obscured (Enhanced) + -

Understanding Focus Not Obscured (Enhanced)

- -
-

Status

-

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

-
- - -
- -

Focus Not Obscured Success Criterion text

-
-

When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

-
-
- -
- -

Intent of Focus Not Obscured (Enhanced)

- -

The purpose of this Success Criterion is to ensure that a component with keyboard focus is visible. This criterion is closely related to Focus Not Obscured (Minimum) but requires that the whole of the component is visible.

- -
- -
-

Benefits of Focus Not Obscured (Enhanced)

- -
    -
  • This Success Criterion helps anyone who relies on the keyboard to operate the page by letting them visually determine the component on which keyboard operations will interact at any point in time.
    • -
  • People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
    • -
- -
- -
-

Examples of Focus Not Obscured (Enhanced)

- -
    -
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not overlapped by the footer at all.
    • -
- -
- -
-

Resources

- -
- - -
-

Techniques for Focus Not Obscured (Enhanced)

- - -
-

Sufficient Techniques

- -
    -
  1. - C43 -
    2. -
  2. - CSS: Using scroll-padding to ensure a sticky header does not entirely obscure the focused item (Potential future technique). -
    3. -
- -
- -
-

Additional Techniques (Advisory)

- -
- -
-

Failures

-
    -
  1. - -
    2. -
-
- -
- +

Understanding Focus Not Obscured (Enhanced)

+
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+
+

Focus Not Obscured (Enhanced) Success Criterion text

+
+

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

+
+

If the interface is configurable so that the user can reposition content such as toolbars and non-modal dialogs, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.

+
+
+

Intent of Focus Not Obscured (Enhanced)

+

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.

+

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.

+

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 scroll padding 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.

+

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 entirely hidden such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance. 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.

+
+
+

Benefits of Focus Not Obscured (Enhanced)

+
    +
  • 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.
    • +
  • People with limited or low vision, who may primarily user 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.
    • +
  • 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.
    • +
+
+
+

Examples of Focus Not Obscured (Enhanced)

+
    +
  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not at all hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
    • +
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the cookie approval dialog remains on screen until selections are made and submitted.
    • +
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus and does not obscure any other controls, including the keyboard focus visible prior to the notification.
    • +
+
+
+

Resources

+
+
+

Techniques for Focus Not Obscured (Enhanced)

+
+

Sufficient Techniques

+
    +
  1. C43 Using CSS margin and scroll-margin to un-obscure content
    2. +
+
+
+

Additional Techniques (Advisory)

+
+
+

Failures

+
    +
  • An interaction that causes content to appear over the keyboard focus, visually covering part of the component with keyboard focus. 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.
    • +
  • 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 scroll padding.
    • +
+
+
- \ No newline at end of file + From b5777a3dd4e6e54a91c285f03a67f2abc603a097 Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 5 May 2023 17:34:46 -0400 Subject: [PATCH 10/16] Update focus-not-obscured-minimum.html yet a bit more Tweaking to allow more distinction between for (Enhanced) version. Also, left out the word "focus" with previous edit. --- understanding/22/focus-not-obscured-minimum.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 453c3c416f..97d9b08ecb 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -36,7 +36,7 @@

Intent of Focus Not Obscured (Minimum)

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 scroll padding 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.

-

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 "entirely hidden," such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance. 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.

+

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 entirely hidden, such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance. 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.

@@ -45,7 +45,7 @@

Benefits of Focus Not Obscured (Minimum)

  • 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.
    • -
  • People with limited or low vision, who may primarily user 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 viewing portion of the screen.
    • +
  • People with limited or low vision, who may primarily user 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.
  • People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
@@ -56,8 +56,8 @@

Examples of Focus Not Obscured (Minimum)

  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not completely hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
    • -
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the major portion of the cookie approval dialog remains on screen (until selections are made and submitted), and some portion of the keyboard focus is visible.
    • -
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification, so at least some portion of the keyboard is in view. The notification disappears when it loses focus so it does not obscure any other controls, and leaves keyboard at least partially visible.
    • +
  • A page has a full-width cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the major portion of the cookie approval dialog remains on screen (until selections are made and submitted), and so the major portion of the keyboard focus indicator remains visible.
    • +
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification so at least part of the focus indicator is in view. The notification disappears when it loses focus so it does not obscure any other controls, and part of the prior keyboard focus indicator is visible.
@@ -91,7 +91,7 @@

Additional Techniques (Advisory)

Failures

  1. - An interaction that causes content to appear over the keyboard focus, visually covering the entire component with keyboard focus. 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. + An interaction that causes content to appear over the component with keyboard focus, visually covering the keyboard 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.
From 9551c3bb56cc155887059a576e99a86eef0692ee Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Fri, 5 May 2023 17:52:29 -0400 Subject: [PATCH 11/16] Update focus-not-obscured-enhanced.html to better match minimum version Adjusting to make a little more distinct from focus not obscured (minimum) --- understanding/22/focus-not-obscured-enhanced.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/understanding/22/focus-not-obscured-enhanced.html b/understanding/22/focus-not-obscured-enhanced.html index 20f19f2fc5..bb0aeb10d0 100644 --- a/understanding/22/focus-not-obscured-enhanced.html +++ b/understanding/22/focus-not-obscured-enhanced.html @@ -23,7 +23,7 @@

Intent of Focus Not Obscured (Enhanced)

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.

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.

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 scroll padding 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.

-

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 entirely hidden such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance. 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.

+

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 causing the component to be partially hidden and such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance, such effects are not in scope for this criterion. 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.

Benefits of Focus Not Obscured (Enhanced)

@@ -37,8 +37,8 @@

Benefits of Focus Not Obscured (Enhanced)

Examples of Focus Not Obscured (Enhanced)

  • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not at all hidden by the footer because content in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
    • -
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the cookie approval dialog remains on screen until selections are made and submitted.
    • -
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus and does not obscure any other controls, including the keyboard focus visible prior to the notification.
    • +
  • A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the cookie approval dialog (including the focus indicator) remains on screen until selections are made and submitted.
    • +
  • A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus, and does not obscure any other controls (including the focus indicator visible prior to the notification).
@@ -58,7 +58,7 @@

Additional Techniques (Advisory)

Failures

    -
  • An interaction that causes content to appear over the keyboard focus, visually covering part of the component with keyboard focus. 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.
    • +
  • 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.
  • 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 scroll padding.
From 61dcd0c6face13c2581e32753f45815092334daa Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Tue, 9 May 2023 12:52:01 -0400 Subject: [PATCH 12/16] Move lightbox example into list of failures --- understanding/22/focus-not-obscured-enhanced.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-enhanced.html b/understanding/22/focus-not-obscured-enhanced.html index bb0aeb10d0..0238f3c4f4 100644 --- a/understanding/22/focus-not-obscured-enhanced.html +++ b/understanding/22/focus-not-obscured-enhanced.html @@ -23,7 +23,7 @@

Intent of Focus Not Obscured (Enhanced)

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.

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.

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 scroll padding 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.

-

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 causing the component to be partially hidden and such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance, such effects are not in scope for this criterion. 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.

+

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 entirely hidden, it is causing the component to be partially hidden and a failure of this Success Criterion. Such semi-opaque overlaps may also cause a failure of 2.4.11 Focus Appearance.

Benefits of Focus Not Obscured (Enhanced)

@@ -59,6 +59,7 @@

Additional Techniques (Advisory)

Failures

  • 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.
    • +
  • 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.
  • 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 scroll padding.
From 55ef9a3ceeda049438731a8f4def82674a9c49ca Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Tue, 16 May 2023 09:19:06 -0400 Subject: [PATCH 13/16] Update focus-not-obscured-enhanced.html typo user -> use --- understanding/22/focus-not-obscured-enhanced.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-enhanced.html b/understanding/22/focus-not-obscured-enhanced.html index 0238f3c4f4..4053887103 100644 --- a/understanding/22/focus-not-obscured-enhanced.html +++ b/understanding/22/focus-not-obscured-enhanced.html @@ -29,7 +29,7 @@

Intent of Focus Not Obscured (Enhanced)

Benefits of Focus Not Obscured (Enhanced)

  • 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.
    • -
  • People with limited or low vision, who may primarily user 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.
    • +
  • 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.
  • 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.
From 0441df5ff1a87c396cdcc618c2e3c6e2b7456506 Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Tue, 16 May 2023 09:31:16 -0400 Subject: [PATCH 14/16] Update focus-not-obscured-minimum.html typo user -> use --- understanding/22/focus-not-obscured-minimum.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 97d9b08ecb..ff8eb9922a 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -45,7 +45,7 @@

Benefits of Focus Not Obscured (Minimum)

  • 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.
    • -
  • People with limited or low vision, who may primarily user 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.
    • +
  • 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.
  • People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
From 93fdff2e9507dd47b48ad23e7daa513d767518d9 Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Tue, 16 May 2023 11:32:42 -0400 Subject: [PATCH 15/16] Update focus-not-obscured-enhanced.html to use SC text In `
` SC text for (Minimum) was used instead of (Enhanced). Correcting a copy/paste error (that would have been caught by publication scripting, but still nice to fix). --- understanding/22/focus-not-obscured-enhanced.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-enhanced.html b/understanding/22/focus-not-obscured-enhanced.html index 4053887103..85373b162b 100644 --- a/understanding/22/focus-not-obscured-enhanced.html +++ b/understanding/22/focus-not-obscured-enhanced.html @@ -14,7 +14,7 @@

Status

Focus Not Obscured (Enhanced) Success Criterion text

-

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

+

When a user interface component receives keyboard focus, no part of the component is by author-created content.

If the interface is configurable so that the user can reposition content such as toolbars and non-modal dialogs, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.

From ad2e3e63e701b8ddd9a51debe73e42a7a12c7a3d Mon Sep 17 00:00:00 2001 From: Bruce Bailey Date: Tue, 16 May 2023 11:34:58 -0400 Subject: [PATCH 16/16] Update focus-not-obscured-enhanced.html correct typo of missing word "hidden"" --- understanding/22/focus-not-obscured-enhanced.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/focus-not-obscured-enhanced.html b/understanding/22/focus-not-obscured-enhanced.html index 85373b162b..cfc97261d5 100644 --- a/understanding/22/focus-not-obscured-enhanced.html +++ b/understanding/22/focus-not-obscured-enhanced.html @@ -14,7 +14,7 @@

Status

Focus Not Obscured (Enhanced) Success Criterion text

-

When a user interface component receives keyboard focus, no part of the component is by author-created content.

+

When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

If the interface is configurable so that the user can reposition content such as toolbars and non-modal dialogs, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.