Hidden link text on Check answers pattern omit space character in JAWS

[timpaul]

The ‘Change’ links have hidden text, like this:

<a class="govuk-link" href="#">
Change<span class="govuk-visually-hidden"> name</span>
</a>

But apparently JAWS sometimes ignores the opening space in the hidden text, so it would read out Changename in the above example.

We think one fix might be to use a non-breaking space character instead, so it'd look like this:

<a class="govuk-link" href="#">
Change<span class="govuk-visually-hidden">&nbsp;name</span>
</a>

[timpaul]

Thanks to Craig Abbot for reporting this issue.

[abbott567]

Thanks @timpaul - it was originally raised by @htmlandbacon: GOVUK Design System issue 1382

The reason for raising it again it because both HMRC and DWP have published guidance which uses a different mechanism for change links. It involves duplicating the content and using aria-hidden on one. For example:

<span aria-hidden="true">Change</span>
<span class="govuk-visually-hidden">Change Elizabeth Kean</span>

If the CSS were to not load, then the visible link on the screen would be: ChangeChange Elizabeth Kean, which is weird, but my main concern is that we have a separation of guidance from the GOVUK Design System, and I worry will be confusing for teams.

Links:

• DWP Design System guidance
• HMRC Design System guidance

[adamliptrot-oc]

I re-tested this in Feb 2021 I couldn’t hear the merging of content anymore in JAWS (tested 2019, 2020, 2021), although the merging is still evident in the links list dialog (though again not audible).

@abbott567 The original solution for the split copy included the use of a hidden attribute alongside the aria to prevent the dual inclusion when CSS did not load, which was then overridden by CSS. Looks like this didn't make it into the pattern.

[adamliptrot-oc]

Just checked and NVDA is also still removing the space between the visible and hidden copy in the dialogs, although again I cannot hear the words merging.

If we do find that the words are being audibly merged then another option was suggested by Andrew Arch Principal Accessibility Consultant at Intopia on the Govt Accessibility email list. This is using a capital letter for the first word of the hidden copy which might result in the non-honouring of the space to be negated by the screen-reader pronunciation of camelcased text eg ChangeName where the screen-reader will read out the words as individual words due to the casing. This does raise other issues however around implementation.

Of course with browser and AT support being so much better now, there is the other option of doing away with hidden copy on links and use aria-label instead. Whilst it goes against the general rules around aria (do it with html if possible), this would present a simpler solution as aria-label is now robustly supported on links.

With both the HMRC/DWP and aria-label patterns there needs to be guidance around potential label-in-name issues where the visible name is then not the first word in the accessible name and then causes issues for speech recognition.

[querkmachine]

We've started getting more reports of this happening lately, including in screen readers other than JAWS (at least NVDA, VoiceOver and TalkBack). We've also noticed this occurring whilst working on other components like the Exit this Page button.

These issues seem to happen (albeit inconsistently) regardless of if the space is inside or outside of the visually-hidden span.

We may want to investigate a more robust method of doing this in future, such as some of the suggestions made above. This could potentially be done in conjunction with removing the hardcoded visually-hidden span in summary list links (#2649).

[owenatgov]

Has this been solved by https://github.com/alphagov/govuk-frontend/pull/3836?

[owenatgov]

Have repeated Hanna's testing from #3836 and I'm confident we've solved this.