Check your answers pattern: Hidden text

[htmlandbacon]

Figured I'd gather some thoughts before raising a PR, this follows on from some JAWS (the latest versions of both Edge and JAWS 2020) testing.

With the Check your answers pattern we noticed a couple of quirks with the hidden text

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

With this user the space isn't respected so the screen reader reads "changename" what I've found with VoiceOver + Safari 12.1.2 is that the order is flipped, so it would read name Change.

<dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#" aria-label="Change name">
                Change
            </a>
          </dd>

Changing to aria label makes this more consistent across the tools I've got access to, but I figured it was worth opening up to see if we can validate this a little bit more.

Having a non-breaking space in the also gives the correct text on JAWS.

[36degrees]

@htmlandbacon it might be worth reading alphagov/govuk-frontend#1643 for some of the context.

In terms of 'name change', I believe that was addressed in alphagov/govuk-frontend#1096, which was released in GOV.UK Frontend v2.5.0 – can you confirm what version of GOV.UK Frontend you're seeing this in?

[abbott567]

I've also found when testing the Change links with voice recognition software, the hidden text can make it harder to use.

For example, if you have two change links on the page:

<a ...>Change <span class="govuk-visually-hidden">name</span></a>
<a ...>Change <span class="govuk-visually-hidden">address</span></a>

When I would say click change - it wouldn't find anything as it needed me to say, verbatim, click change name but of course you wouldn't know that as the text is hidden. It didn't highlight anything, as click change is probably too vague for what it believes to be the link text on the page.

I found by changing to the aria-label solution you outlined above that when you then say click change it highlights both of the links due to the fact the tag only contains the word change so it gets a direct match, and it then allows you to select which one you want by saying the corresponding number.

In NVDA and Voiceover there was no difference in how the link behaved. It still read out the full link and displayed the full link in the rotor, but it definitely made it better for voice recognition.

I was using Windows Speech Recognition on Windows 10, maybe it's ok with Dragon. But defo interesting.

[htmlandbacon]

@htmlandbacon it might be worth reading alphagov/govuk-frontend#1643 for some of the context.

In terms of 'name change', I believe that was addressed in alphagov/govuk-frontend#1096, which was released in GOV.UK Frontend v2.5.0 – can you confirm what version of GOV.UK Frontend you're seeing this in?

I'll have a read, clearly my search skills are failing today!

In terms of version, I tested it here - but limited access to tooling right now https://design-system.service.gov.uk/patterns/check-answers/default/index.html

[36degrees]

@htmlandbacon what browser and version of macOS are you using there? I can't reproduce in Safari 14 / macOS 10.15.7.

[htmlandbacon]

@htmlandbacon what browser and version of macOS are you using there? I can't reproduce in Safari 14 / macOS 10.15.7.

It is 12.1.2, checked in 13.1.1 and it is fine 👍🏻