Skip to main link adds a focus ring to the H1

[Cooperwd01]

We've had a few services in for DAC audits and it's coming back with failures due to the focus ring that's applied around the H1 when a user hits the 'skip to main content' link. DAC auditors are reporting that they only expect focus on interactive elements and find the focus on the h1 to be confusing

It looks like the focus style is added with JS, would it be an easy fix to remove it? Or should the skip to main link just hit main rather than the H1?

[andymantell]

An interesting, related point of difference compared to govuk-frontend is that we place focus on the first h1 in the page whereas govuk-frontend places focus on the main wrapper.

They then have a class like this which is added by the JS, to remove the outline:

.govuk-skip-link-focused-element {
  &:focus {
    // Remove the native visible focus indicator when the element is programmatically focused.
    //
    // We set the focus on the linked element (this is usually the <main> element) when the skip
    // link is activated to improve screen reader announcements. However, we remove the visible
    // focus indicator from the linked element because the user cannot interact with it.
    //
    // A related discussion: https://github.com/w3c/wcag/issues/1001
    outline: none;
  }
}

While ours is hardcoded to the h1, the govuk-frontend one is more flexible and allows skip links that go to other places in the page. We have a couple of pages with more than one skip link on 111 online so this flexibility would be a useful addition.

My tendency would be to align ourselves with govuk-frontend here and drop their component in wholesale, but we would need to bottom out why the decision was made to focus the h1 instead of the main element. I had a look through the git history and seems to have always been this way since 2018 (See e58d885).

@mcheung-nhs what are your thoughts? Is the h1 behaviour significant, or just an arbitrary difference?

[edwardhorsford]

It feels like it would be good to align to GOV.UK here:

• Well tested
• Allow for more flexibility as h1 may not always be the first thing on the page.

[Cooperwd01]

We recently had some feedback from screen reader users that after hitting the skip link, they'd expect all the content in main to be announced unless they stopped it. Currently, as the focus jumps to the H1, the H1 is announced and then it stops, none of the other the content is read unless a user manually moves to the next part of the content. The users found it was unexpected and slightly confusing.

[mcheung-nhs]

Standard screen reader behaviour after a focus shift is non-continuation of reading. This lets the user decide whether to proceed reading or navigating, i.e. giving the user control. Even if we were able to make the screen reader continue reading having skipped to the main content, this would be non-standard behaviour and could also cause confusion.

[Cooperwd01]

@mcheung-nhs That's interesting and makes sense, thanks for the reply. The feedback we received from a few NVDA users was that they would expect the content to continue reading and that they found it was confusing to land directly on the H1.

If you use NVDA or JAWS on a GOV.UK service and skip to main does the content continue to announce for you? I just had a look and another difference with the GOV.UK skip link is when you click 'skip to main' a tabindex="-1" is added to the main tag.

Thanks for the help!

[colinrotherham]

Fixed by #1173