gov-au-ui-kit
gov-au-ui-kit copied to clipboard
Bug - Accessibility - Menu button not part of navigation landmark
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>