Skip to content

Commit

Permalink
Move button inside navigation region
Browse files Browse the repository at this point in the history
Move the menu button inside the navigation region, so that it is
discoverable by screen reader users even when the nav is closed:

> Place mobile open/close buttons within the <nav> element and use them
  to toggle state of another child wrapper of the nav. This will ensure
  that the navigation landmark is still discoverable by screen readers,
  even if it is in a closed/hidden state.

https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-navigation-mobile

> Where a lot of people go wrong is by placing the button outside the
  region. This would mean screen reader users who move to the <nav>
  using a shortcut would find it to be empty, which isn’t very helpful.

https://inclusive-components.design/menus-menu-buttons/#placement

> For instance, a navigation on small screen devices may initially
  contain only a single toggle button. But that toggle button would
  reveal additional links and other navigational elements, when
  activated.

https://www.scottohara.me/blog/2018/03/03/landmarks.html#navigation
  • Loading branch information
36degrees committed Dec 1, 2021
1 parent aed4b3e commit 53a6c00
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions src/govuk/components/header/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,10 @@
</a>
{% endif %}
{% if params.navigation %}
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}">Menu</button>
<nav aria-label="{{ params.navigationLabel | default('Menu') }}">
<ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}">Menu</button>

<ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" >
{% for item in params.navigation %}
{% if item.text or item.html %}
<li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
Expand Down

0 comments on commit 53a6c00

Please sign in to comment.