Landmark is hidden with display:none which removes it from the accessibility tree

[wilsond-gds]

This issue was initially described by Anika Henke.

Users of mobile devices, screen magnification or with narrow viewports will not be able to access parts of the navigation through the landmark list view in assistive technologies.

To reproduce the issue

1. Navigate to the prototype
2. Turn on a screen reader
3. Resize the browser viewport to wider than 700px
4. Call up the list of landmarks in the screenreader. The landmark list should contain banner, GOV.UK One Login menu navigation, Name of example service menu navigation.
5. Dismiss the landmark list
6. Reduce the viewport to less than 600px
7. Call up the list of landmarks in the screenreader
8. The landmark list will contain banner, Name of example service menu empty navigation.

Possible cause

The issue seems to relate to this line of code and/or the positioning of the elements within the <nav>:

.toggle-enabled .one-login-header__nav {
    display: none;
}

display:none removes the nav and its content from the accessibility tree. The content in the navigation should be hidden but the landmark should remain in the tree – see this blog post on navigation landmark discoverability for more details.