Header should support a single link without collapsing to a menu on mobile

[36degrees]

What

The header component should allow for a single navigation link that does not collapse in to a menu on mobile.

Why

This would help support, for example, “sign out” links. At the moment this is not a usable option and the single link collapses into a menu link when it doesn’t have to.

Who needs to know about this

Done when

• Decide whether we agree with this

[hannalaakso]

Some notes from team discussion on this:

• The menu button could disappear and the single link could be come up where the mobile navigation menu is
• We're not really sure if this is a thing (sign out link is a separate card), hence it's a COULD

[danlaceyhmrc]

Hi there, as a UI Developer doing some accessibility work with HMRC / VOA - we were advised by DAC that the menu would fail accessibility (level 'A' compliancy) as the link lacks context. Here is the full feedback from DAC:

---

There is a link present on the page that has non-descriptive link text. When it is read back to screen reader users it will be difficult for them to understand its purpose both in and out of context. This is only present in iOS. [By this Im assuming they are referring to all mobile devices]
Code ref(s):
<a href="#proposition-links" class="js-header-toggle menu">Menu</a>
Screen reader comments:
“There is a link present on the page ‘Menu black down pointing triangle’ that made no
sense to me when browsing both in and out of context.
Tested in VoiceOver for iOS.

---

Context would involve adding descriptive words to the before / after menu, however since we are only using the single sign out item in the menu, we have introduced a temporary fix to hide the menu and always show the sign out link:

.js-enabled .govuk-header__menu-button {
display: none;
}
.js-enabled .govuk-header__navigation {
display: block;
}

[hannalaakso]

Thanks for raising this @danlaceyhmrc. It seems that the code you've included is from GOV.UK template. GOV.UK Template is deprecated, and will only receive major bug fixes and security patches so there won't be a fix issued for this.

We would recommend migrating from GOV.UK Template to the Design System. We have published some guidance for this, including steps for migrating over gradually rather than in one go.

[edwardhorsford]

A 👍 from us. We've got a single link in the header (though have other nav below) and so the menu is an unnecessary extra click. We'll be disabling manually in the short term.

More details in this comment.

[CharlotteDowns]

Another user raised this on support 08/01/2024 after receiving this as usability feedback from the Digital Accessibility Centre (DAC).

Here is a copy of the feedback:

On the rest of the pages the menu collapses and has a ‘Sign out’ link inside an unordered list. Users might not find having a menu or the list necessary unless there are more elements inside it, as it can also be long and verbose if it only contains one element.

Current code ref(s): REST OF PAGES:
body > header > div > div.govuk-header_content > nav <nav aria-label="Menu" class="govuk-headernavigation single-item-navigation logged-in"> <button type="button" class="govuk-headermenu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" aria-expanded="true">Menu</button> <ul id="navigation" class="govuk-headernavigation-list"> <li class="govuk-headernavigation-item govuk-headernavigation-item--active"> <a class="govuk-header_link" href="/sign-out">Sign out</a> </li> </ul> </nav>
Screen reader user comments: “On exploring this page, I found that the navigation region read as menu navigation region. This was a problem because I could not understand why the navigation region read as menu navigation region for. It would be helpful if the menu could be removed from the navigation region and also removed from the navigation region end. I found this issue using JAWS, VoiceOver.”
Screen reader user comments: “Upon attempting to toggle the navigation menu, the state of the menu appears to correctly toggle, yet I was unable to ascertain a change in the document. This caused some surprise, as I was anticipating the menu to show/hide a menu. Upon consulting a Support Officer, it appeared that this behaviour is replicated visually, suggesting that a menu has not yet been added to the template. I would expect the visibility of links to toggle accordingly upon changing the state of the navigation menu. The issue affects TalkBack.”
Examples of additional instances:
Additional instances of this issue may exist on other pages throughout the service; wherever this issue occurs, they too will need to be resolved.

Solution:
On the other pages there is only one element inside the menu and the list the link ‘Sign out’ can be left in the header on its own.

Example: <nav aria-label="Menu" class="govuk-header_navigation single-item-navigation logged-in"> <button type="button" class="govuk-headermenu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" aria-expanded="true">Menu</button> <ul id="navigation" class="govuk-headernavigation-list"> <li class="govuk-headernavigation-item govuk-headernavigation-item--active"> <a class="govuk-header_link" href="/sign-out">Sign out</a> </li> </ul> </nav>

[romaricpascal]

This issue has a bit of overlap with the current work on navigation. The work on navigation is still in early stages, so it's probably worth fixing this while we consider navigation more thoroughly. However if this seems do build into a larger piece of work, we should probably make this part of the work for navigation.

[romaricpascal]

Another thought, around breaking changes: to avoid this being a breaking change, should we introduce this as specific option for the Header component (as well as something people can set when using the template directly?) rather than have the Header automaticly not render a menu when there's only one navigation item (which may cause unexpected changes for services which currently have only one item in their menu)?

[romaricpascal]

And finally, this may require:

• a little design look, especially for when the single menu item has long-ish text (or the user font-size is increased and the viewport already narrow)
• a little content look to describe the option on the component's page?

[36degrees]

Good questions!

Making it an option makes sense to me.

I'd been assuming that we would just hide the menu button and permanently show the menu that is normally toggled by it.

Effectively it'd make the header fall back to the no-JS experience? So the design should already be fine, although it's probably not ideal any further improvements would likely come from the navigation epic.

Maybe this is a js (and corresponding Nunjucks) config that just disables the changes the JS makes, and some corresponding guidance that says something like 'If you only have 1 link in your menu you can disable collapsing on mobile by…'?