Focus obscured suggested changes #3266
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Attempt to add an additional section on considerations
slight tweaks for nuances
more tweaks
Section on openable persistent disclosures added.
Added additional note to address comments by Scott Ohara in the PR #3083 (comment) and recent comments in the issue starting at #2751 (comment)
Modifying the language, but not meaning of the existing note, to make it match the rewording of the second note (which previously existed in the draft of the Understanding document, but not of the guideline document).
Altering "would be" to "is" as per requests by Bruce in other new SCs
Updates to Understanding document to match the proposed notes.
Matched the latest feedback on wording and also attempted to add more context on persistent versus non-persistent content
Added a reference to a knowbility article
Added placeholders for possible future illustrations
Update focus-not-obscured-minimum.html
scottaohara
reviewed
Jul 10, 2023
scottaohara
reviewed
Jul 10, 2023
| <p>Some disclosure patterns provide a mechanism for the user to open additional content that remains open until intentionally closed by the user. Accordions are a simple example of such a pattern. Chatbots and expandable side navigation are more complex examples. All of these patterns can be implemented so they are not at risk of failing this SC. Some possible approaches are:</p> | ||
|
|
||
| <ul> | ||
| <li><strong>When the additional content appears, it displaces existing content.</strong> An accordion is an example of this. When an accordion is opened, the disclosed content shifts existing content further down the page. Since the new content does not obscure existing content, it cannot obscure the item with focus.</ br> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
scottaohara
reviewed
Jul 10, 2023
| </figure> | ||
| </li> | ||
|
|
||
| <li><strong>When the additional content appears, existing content reflows.</strong> The popout sidebar on the <a href="https://www.w3.org/TR/WCAG22/">WCAG standard</a> is an example of this pattern. When the side menu is activated, it discloses a new section of information along the left side of the page. The main content area is reduced horizontally to accommodate the new content, and the existing content reflows to fit in the thinner space. As a result, there is no overlapping content between the two sections; the item receiving focus, whether in the left navigation or in the main content, will not be obscured by the other section.</ br> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
scottaohara
reviewed
Jul 10, 2023
| <figcaption>Placeholder for future illustrations showing an abstract representation of a side panel where the tab ring is restricted to the panel</figcaption> | ||
| </figure> | ||
| </li> | ||
| <li><strong>The disclosure expands into an area of the page containing no other content.</strong> Many pages are designed with wide margins, providing significant white space into which new content can be disclosed. Many chatbots and toasters are designed to 'slide up' into the right unpopulated side of a page. Where authors are careful to ensure content is not obscured at each breakpoint in a responsive design, no obscuring of other operable content need occur.</ br> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
suggest "toast notifications" rather than "toasters"
re:
...into the right unpopulated side of a page...
maybe remove "the right" and replace with "an". I've seen it on both sides (i believe github even does lower left) - and i'd assume this not necessarily the typical location for right to left language pages.
scottaohara
reviewed
Jul 10, 2023
scottaohara
reviewed
Jul 10, 2023
|
|
||
| <p>In recognition of more complex applications, the note allows for <em>user-disclosed</em> content to obscure the item receiving focus, provided the user can bring the item with focus into view without actually altering the keyboard focus. Keyboard actions that may allow the item with focus to be revealled include: 1) using Esc to dismiss the disclosed content, 2) using keys to scroll the content in the viewport to reveal the item with focus, or 3) issuing a key to move between overlays. The rationale is that if a user opens a toolbar or chatbot, they have some context to understand why other content may be obscured by it.</p> | ||
|
|
||
| <p>It is important to emphasize two things. First, this note only applies to content that the user actively discloses. Content pre-positioned by the author (such as a sticky footer), or content that appears without direct user initiation, such as system warnings, must not prevent the item receiving focus from being immediately visible in the viewport. Second, this note is not intended to apply to disclosures that are by convention non-persistent. As discussed in the following sub-section, an open dropdown that does not close when no longer focused is not following convention. The note is not intended to excuse poor authoring practices.</p> |
There was a problem hiding this comment.
i'm finding this bit to be potentially problematic:
The note is not intended to excuse poor authoring practices.
as while i agree that common UI components such as listbox popups and menus should dismiss when tabbing away, there can be other types of informational popups which may not auto dismiss when focus leaves them - which was considered a design requirement in the creation of HTML's popover attribute behavior. I'm reading this text as potentially saying that would not be allowed, and I think that needs to be clarified.
There was a problem hiding this comment.
It should be saying that something which opens and does not dismiss could fail this SC.
What popovers should not auto-dismiss? I had thought that was the cross-over from modal to popover was that modals keep focus, popovers can be tabbed out of but should then close.
alastc
commented
Jul 11, 2023
alastc
commented
Jul 11, 2023
| <figcaption>Placeholder for future illustrations showing an abstract representation of a side panel where the tab ring is restricted to the panel</figcaption> | ||
| </figure> | ||
| </li> | ||
| <li><strong>The disclosure expands into an area of the page containing no other content.</strong> Many pages are designed with wide margins, providing significant white space into which new content can be disclosed. Many chatbots and toasters are designed to 'slide up' into the right unpopulated side of a page. Where authors are careful to ensure content is not obscured at each breakpoint in a responsive design, no obscuring of other operable content need occur.</ br> |
There was a problem hiding this comment.
Suggested change
| <li><strong>The disclosure expands into an area of the page containing no other content.</strong> Many pages are designed with wide margins, providing significant white space into which new content can be disclosed. Many chatbots and toasters are designed to 'slide up' into the right unpopulated side of a page. Where authors are careful to ensure content is not obscured at each breakpoint in a responsive design, no obscuring of other operable content need occur.</ br> | |
| <li><strong>The disclosure expands into an area of the page containing no other content.</strong> Many pages are designed with wide margins, providing significant white space into which new content can be disclosed. Many chatbots and toast notifications are designed to 'slide up' into the right unpopulated side of a page. Where authors are careful to ensure content is not obscured at each breakpoint in a responsive design, no obscuring of other operable content need occur.<br /> |
scottaohara
reviewed
Jul 11, 2023
scottaohara
reviewed
Jul 11, 2023
scottaohara
reviewed
Jul 11, 2023
scottaohara
reviewed
Jul 11, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A previously approved branch.
Preview of understanding doc.