Fix space not being read in visually hidden text

[hannalaakso]

What

On the GOV.UK search results page, the H1 contains the word "Search" followed by the visually hidden text, "all content". However, JAWS and NVDA on Chrome, Edge and IE11 announce it as "searchall content", with the space character prior to the visually hidden text not announced.

.govuk-visually-hidden uses position: absolute as a fallback for older browsers that don't support clip-path. The bug arises from the fact that when the visually hidden element taken out of the page flow with absolute positioning, the space before the text gets removed as the element is no longer relative to the rest of the page. The removal of the space can be seen visually in modern browsers, and by inspecting the accessibility tree: the value of the visually hidden content in the accessibility tree is "all content" (no whitespace), but without position: absolute it is " all content".

Why

This came up in user research, with the user saying that it was challenging to understand the JAWS announcement of the GOV.UK search page results heading. This is also a known issue which has previously been reported to JAWS: alphagov/reported-bugs#51. An equivalent bug also happens when the visually hidden text appears before the visible text, for instance on gov.uk/travel-advice. Here, JAWS announces the heading as "Countries starting withA" (although for some reason NVDA interprets the space correctly here).

The fix

To fix this, insert a space character using pseudo elements before and after the visually hidden text. 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.

This fix only addresses the issue in one place but we should also add it to the headings on gov.uk/travel-advice, or otherwise contribute the fix upstream to the GOV.UK Design System.

Before (JAWS 2023)

After (JAWS 2023)

Before (JAWS 2023)

After (JAWS 2023)

Testing results

Screen readers

✅ JAWS 2022 / Chrome
✅ JAWS 2023 / Chrome
✅ JAWS 2023 / IE 11
✅ JAWS 2023 / Edge
✅ NVDA / Firefox
✅ NVDA / Chrome
✅ NVDA / Edge
✅ Voiceover / Mac Safari
❎ Voiceover / iOS Safari
✅ Talkback / Chrome Android

iOS VoiceOver announces the heading as two items with all the different fixes tested (including the current live version), apart from the aria-label solution which fixes the issue but cannot be used as it has other issues as documented below. This iOS issue has previously been reported here - we might consider looking at this as a separate ticket or it might be something that's better worked on as part of the Design System.

Browsers and devices

I was testing that there is no visual difference in the element with the pseudo element space characters.

✅ Edge
✅ Firefox (Mac and Windows, and when user sets their own custom colours)
✅ Chrome (Mac and Windows)
✅ IE 11
✅ Safari Mac
Safari iOS
✅ Samsung Internet (Android)
✅ Firefox (Android)
✅ Chrome (Android)
Samsung Internet
✅ Firefox (Android)

Other modes tested

✅ Print styles
✅ Hidden and unhidden like govuk-visually-hidden when CSS fails to load

Full testing spreadsheet

Other fixes that were explored

I also looked into using opacity: 0 - 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 wouldn't fix the underlying problem but would be more of a manual fix which might also get removed by mistake by the next person working on the piece of code.

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).

I also checked whether just moving the current whitespace from being outside the visually hidden text (it's currently set as "Search " and "all content") to inside the visually hidden text (so "Search" and " all content") would fix the current issue but there was no difference in screen reader announcements.

Fixes https://trello.com/c/T9erwGTG/1661-a-space-is-not-included-between-some-words-which-means-they-may-not-be-pronounced-correctly-by-some-screen-reader-software-675-m

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

[hannalaakso]

I'm closing this PR as will be contributing the fix directly into the Design System: alphagov/govuk-frontend#3836