From 29e8a4e6e1a85e6a5463e9122c15c1cf2ea4526d Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 14 Jun 2023 18:25:11 +0100 Subject: [PATCH] Fix space not being read in visually hidden text On the GOV.UK search results page, the h1 heading contains the word "Search" followed by the visually hidden text, "all content". However, JAWS and NVDA on Chrome, Edge and IE11 are not announcing the space before "all content". This came up in user research, with the user saying that it was challenging the identify what was being announced with the space omitted. This is 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" (for some reason NVDA interprets the space correctly here). This bug is happening because the `govuk-visually-hidden` class uses `position: absolute` as a fallback for older browsers that don't support `clip-path`. When the visually hidden element is taken out of the page flow with absolute positioning, the space before the text gets removed as it's no longer relative to the text preceeding it. The white space being thus removed 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's " all content". 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 regression 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. --- app/assets/stylesheets/finder_frontend.scss | 15 +++++++++++++++ app/views/finders/_show_header.html.erb | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/finder_frontend.scss b/app/assets/stylesheets/finder_frontend.scss index 8cd8ad5c9..040e70e22 100644 --- a/app/assets/stylesheets/finder_frontend.scss +++ b/app/assets/stylesheets/finder_frontend.scss @@ -1,5 +1,20 @@ $app-colour-true-black: #000000; +.app-visually-hidden { + // The current .govuk-visually-hidden uses absolute positioning. This has the + // unintended consequence of removing any necessary whitespace before and + // after the visually hidden element, and potentially making screen reader + // announcements unintelligble. To fix this, insert a space character before + // and after the visually hidden element. + &:before { + content: "\00a0"; + } + + &:after { + content: "\00a0"; + } +} + .metadata-summary { @include govuk-font(19); margin-bottom: govuk-spacing(6); diff --git a/app/views/finders/_show_header.html.erb b/app/views/finders/_show_header.html.erb index 576a6350d..3fd23700a 100644 --- a/app/views/finders/_show_header.html.erb +++ b/app/views/finders/_show_header.html.erb @@ -26,7 +26,7 @@
<% if content_item.all_content_finder? %> <%= render "govuk_publishing_components/components/heading", { - text: sanitize("Search all content"), + text: sanitize("Search all content"), heading_level: 1, font_size: "xl", margin_bottom: 4