Patterns: Improve the screenreader announcements for category navigation #52017
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
carolinan
added
[Feature] Patterns
|
Size Change: +56 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in d8e6cc4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5785034790
|
|
cc @afercia |
afercia
reviewed
Jun 29, 2023
packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
Outdated
Show resolved
Hide resolved
afercia
reviewed
Jun 29, 2023
| return ( | ||
| <SidebarNavigationItem | ||
| { ...linkInfo } | ||
| icon={ icon } | ||
| suffix={ <span>{ count }</span> } | ||
| aria-current={ isActive ? 'true' : undefined } | ||
| aria-label={ ariaLabel } |
There was a problem hiding this comment.
This aria-label would make the accessible name pretty different from the visible text. While this adds contextual information for screen reader users, it would not help much speech recognition software users. For example:
VIsible text: Footers 1
Accessible name: Footers (template part), 1 item
Will detaile a bit better in a comment.
|
Besides the issue with the translatable string (See inline comment) I'm a bit worried that altering the accessible name by the means of an aria-label will introduce a barrier for speech recognition software users. The visible text and the actual accessible name would be pretty different. This would introduce a problem to issue appropriate voice commands. This problem is in part already present in the current implementation. Testing with macOS Safari + Voice Control: Before this PR: 
accessible name: Footers 1 As a speech recognition software user, I'd first try a voice command like: Instead, after this patch: As a spech recognition software user, I'd try voice commands that match the visible text, as in the example above:
Both commands will fail because the actual accessible name is now very different. As a sighted user, I wouldn't have a clue what the accessible name is. For this reason, we should always be very careful when altering the accessible name of a control. In this case, I'd suggest to keep the accessible name unchanged and:
In this way, the items would provide more context for screen reader users anyways and the visible text would match the accessible name. Technically, an item would have:
Screen readers (with default settings) would read both, with the description being announced after a short delay: |
|
The only screen reader that would be effected by this is Voiceover. Voiceover exposes
I think having the category and count as description text really does not fit the bill here and needs to be a main label somehow. Just not sure how we please everyone. Sigh. |
|
I keep coming back to wanting to separate patterns and template parts in the main menu again. Even when knowing that separating them is temporary. I don't disagree with any of the things said here as part of the reviews, I was merely trying to work with what we have. |
|
Maybe, the number of items is not actually needed, -I don't believe that empty categories are listed. |
|
@carolinan Sounds good. I think excluding number of items here is likely fine. |
|
@carolinan Are you still working on this for 6.3 or does this still need design input? |
|
It still needs a new accessible design. |
|
As long as the needs design label is there, you can consider it as needing design. |
carolinan
changed the title
aristath
approved these changes
Jul 19, 2023
priethor
added
[Focus] Accessibility (a11y)
|
How can we bring attention to this accessibility bug so that it is fixed for the next minor WP release? |
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.
What?
Updated 11th of July 2023.
Closes #52005
When the original issue was opened, the Site Editor patterns page did not include information about if a category was for a pattern or a template part. The original PR aimed to address that.
Now, the patterns page has visible h2 headings above the different categories. These headings are not focusable but are announced by screen readers when reading the full content of the sidebar (navigation mode).
The updated PR attempts to implement the suggestion from the comment below:
Testing Instructions for Screen readers
Make sure that your WordPress install has some synced block patterns.
Activate a block theme, and the screen reader.
Open the Patterns page via the WordPress admin area > Appearance > Editor > Patterns.
Use the tab key to navigate past the initial links and buttons until you have passed the "Create pattern" button.
Using VoiceOver, navigating with tab key: Announces "My patterns, button.... more content available", Opening the more content menu announces "1" - the number of items in the category.
Pressing the tab key again will skip past the non-focusable heading for the template parts, and announce:
"Header, button .... more content available". Opening the more content menu announces "1" - the number of items in the category.
Using Voiceover, reading the full content of the sidebar:
Announces "My patterns, My patterns, button, 1" followed by "Heading level 2, Template parts, list, 3 items, Header, current item, Header, button, 2".
So in this case, there is a lot of repetition.