Bug - Accessibility - Menu button not part of navigation landmark

[gordcorp]

This issue was identified as part of the accessibility testing performed on the DTA website Jan 2017: https://drive.google.com/open?id=0B3SXZ9dr83v0Y2cwV21HdUZ1STQ

[6] Menu button not part of navigation landmark Applies: Menu button (mobile only) for global navigation in the header and menu button for main navigation on all content pages with level 2 navigation. Type: WCAG failure – 1.3.1 Info and Relationships Platform: Mobile Severity: Low

When in mobile view, the menu buttons for the global navigation and main navigation are located outside the <nav> (navigation) landmark. This landmark is intended to contain links for site or page navigation. Screen reader users can use shortcuts to quickly navigate to different landmarks.

Since the <nav> landmark is hidden from screen readers until the menu is opened, screen reader users can’t jump to the navigation landmark unless the menu button has already been opened.

Code snippet

<a href="#" class="nav-toggle" aria-
hidden="false">Menu</a>
<nav id="nav" ... aria-label="global navigation" aria-hidden="true" style="transition: max-height 284ms; position: absolute;">
... </nav>

Recommendation

Relocate the menu button within the navigation landmark.

Use the aria-hidden attribute to hide the navigation items, not the navigation landmark region.

Note that using CSS display:none hides information visually as well as from screen readers, and may be a better alternative than aria-hidden="true".

Code snippet based with better aria-hidden application

<nav aria-label="global navigation">
<a href="#" class="nav-toggle" aria- hidden="false">Menu</a>
 <ul aria-hidden=”false”>
     <li><a href="/what-we-do/">What we do</a></li>
     ...
  </ul>
</nav>