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 https://github.com/nhsuk/nhsuk-frontend/commit/e58d8856cb564395bbb6297bacae24335e73f951).

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