Port visually hidden whitespace announcement improvement #4027
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
Absolute positioning has the unintended consequence of removing any whitespace before or after visually hidden text from the accessibility tree. This can lead to unintelligible screen reader announcements, such as the GOV.UK search results heading being announced as "Searchall content", instead of "Search all content".
Insert a space character before and after visually hidden text using pseudo elements to ensure correct screen reader announcements of visually hidden text with surrounding whitespace. This tests well in all screen readers, regardless of whether the whitespace is before the visually hidden text ("Search all content"), after the visually hidden text ("Countries starting with A") or where the heading text is only made up visually hidden text ("Navigation menu"). The only slight issue I found is that Mac VoiceOver in Safari explicitly announces the inserted spare characters when navigating by headings - but this is unlikely to block any users and the user numbers for Mac VoiceOver are small compared to other assistive technologies.
I also looked into using `opacity: 0`, without `position: absolute` - this tested well in all screen readers and browsers, with the text visually hidden but accessible to assistive technologies. However, as it doesn't remove the element from the page flow, long visually hidden text would end up wrapping and pushing other elements down the page. Another alternative, also explored on the original ticket would be to use a non-breaking space . This also tested well, but would require always to be inserted in the markup along the visually hidden text, making it more of a manual fix which might also get accidentlaly removed by the next person working in the file. Another alternative would have been to use aria-label with "Search all content" but this doesn't get announced at all by JAWS and Mac VoiceOver (even though it fixes the iOS VoiceOver issue and seems to be allowable content on headings).
owenatgov
force-pushed
the
port-visually-hidden-whitespace-improvement
branch
from
2b933b9 to
2d24e73
Compare
colinrotherham
approved these changes
Jul 31, 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.
Ports #3836 from
support/4.xtomain. More details of the change can be found on the original pull request.Part of #3775