Hidden link text, but is this accessible?

I get asked a lot of questions about whether something is or isn’t accessible this week’s questions were around the GOV.UK Check your answers pattern.

About half the time when I am asked a question the design system usually has either an example or guidance that helps to point people towards.

‘Change’ links contain hidden text to make them accessible to screen reader users. Update the hidden text to describe what each ‘change’ link is for.

This gives users the context of what each change link does, otherwise, we end up with a list of unhelpful links saying Change, Change, Change, Change, and Change.

What went wrong?

Often there seems to be a misunderstanding about screen readers and about how verbose you need to be, in the example of the dev code both read as ‘change, change your name’.

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

Some of this might be down to not understanding how a screen reader is going to read something out, or a developer mistyping some content.

If you are not comfortable with a screen you can use the accessibility inspector in Chrome to see how this would be joined together.

A good rule of thumb is if you read it out loud and it sounds bad? Probably needs to change!

Screen readers do have some quirks (like numbers and acronyms) but generally, they behave in a predictable, structured way.

What should we be doing?

Both services use the design systems which means we can use the summary list component — this gives us a structure around setting the hidden, like everything though we need to be mindful and check our text makes sense in a browser.

{{ 
govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    }
]})
}}

This will generate the following HTML output

<dl class="govuk-summary-list">
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">
            Name
          </dt>
          <dd class="govuk-summary-list__value">
            Sarah Philips
          </dd>
            <dd class="govuk-summary-list__actions">
                <a class="govuk-link" href="#">
                Change<span class="govuk-visually-hidden"> name</span>
            </a>
            </dd>
        </div>
<dl>

There are other options to convey meaning to like aria-label — however here it was best to align to the current pattern.