Accessibility VoiceOver issue: footer links text have surrounding whitespace

[irfan-mehmood]

Description of the issue

There are links in the footer (screenshot attached), which have whitespace surrounding the text content. If you use the VoiceOver screen reader with Google Chrome on MacOS. When you read the links, it also reads out the extra whitespace.

Steps to reproduce the issue

View issue in the Browser:

Referencing the screenshot attached below, viewing the source of the footer reveals the extra whitespace on the footer-links text.

VoiceOver reading issue in the Browser:

1. Go to the footer element.
2. Enable VoiceOver for screen reading.
3. Use ⌘+⌥+A to read out the content.
4. Let it read out the support links in the footer.

Actual vs Expected Behaviour

Expected Behaviour:

Whenever VoiceOver reads the footer-link text, it should only read the text.

Actual Behaviour:

Whenever VoiceOver reads the footer-link text, it reads out the text and whitespace.

Possible Solution

According to the Nunjucks documentation

Normally the template engine outputs everything outside of variable and tag blocks verbatim, with all the whitespace as it is in the file. Occasionally you don't want the extra whitespace, but you still want to format the template cleanly, which requires whitespace.

You can tell the engine to strip all leading or trailing whitespace by adding a minus sign (-) to the start or end block or a variable. This is applied in the screenshot attached below

Environment (where applicable)

• Operating system: MacOS Ventura 13.5
• Browser: Google Chrome
• Browser version: Version 115.0.5790.114 (Official Build) (x86_64)
• GOV.UK Frontend Version: 4.7.0

Screenshots

 

[github-actions[bot]]

Uh oh! @irfan-mehmood, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[owenatgov]

Hi @irfan-mehmood. Thanks for raising this issue. Sorry it's taken so long to respond.

Could you clarify the readout from VoiceOver when you get this issue? I wasn't able to replicate this in the environment specified. I did notice that VoiceOver announces the space around the visually hidden heading just before the list of links in the footer, which is intentional as per https://github.com/alphagov/govuk-frontend/pull/3836. I want to clarify you're not referring to this before we proceed.

[tom-napier]

I tested the design system page in Safari, Chrome and Firefox using Voice Over and couldn't reproduce this issue. It's possible that it's not longer present, as @irfan-mehmood's screenshot is showing that link as "accessibility", whereas it is now "accessibility statement" (so this content has had updates at some point).

Not to get sidetracked, but in testing, the spaces around the Support Links heading were announced in Safari and Chrome (still using Voice Over here - it announced "space, Support Links, level 1 space" ). I understand that this code change is intended to fix other issues noted in #3836, but the statement in that pull request is that "this is unlikely to block any users and the user numbers for MacOS VoiceOver are small compared to other assistive technologies".

Agreed with the first part, but do we have any evidence that suggests MacOS Voice Over users are comparatively small in number? If all we have to go on is the GOV.UK 2016 assistive technology survey or the WebAIM Screen Reader Survey, then that assertion might not hold up.