WCAG 1.3.1 A: Navigation not marked up (Issue 5)

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

digital.gov.au beta | digital.gov.au (https://www.digital.gov.au/policy/digital-experience)

Observed outcome

The list of links in the site header have been visually styled so that it is clear that they represent the global site navigation; however, they have not been marked up in the code as a navigation region.

Code used

<div class="ct-navigation ct-theme-light ct-navigation--drawer ct-primary-navigation ct-justify-content-end">
<div class="ct-navigation__items">
<ul class="ct-menu ct-menu--level-0 ct-theme-light ct-navigation__menu " data-component-name="ct-menu">
<li class="ct-menu__item ct-menu__item--level-0 ct-menu__item--has-children ct-navigation__has-dropdown ct-navigation__dropdown-columns--4 " data-collapsible="true" data-collapsible-collapsed="" data-collapsible-group="navigation" data-collapsible-duration="250">
<a class="ct-link ct-theme-light ct-menu__item__link" href="" title="Explore" data-collapsible-trigger="">
Explore
<svg class="ct-icon ct-collapsible__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
..
</svg>
</a>
<div class="ct-menu__sub-menu__wrapper ct-menu__sub-menu__wrapper--level-1" data-collapsible-panel="">
…
<li class="ct-menu__item ct-menu__item--level-0 ">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/about" title="About">
About
</a>
</li>
<li class="ct-menu__item ct-menu__item--level-0 ">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/contact" title="Contact">
Contact
</a>
</li>
</div>
</li>
</ul>
</div>
</div>

Why this matters

Landmark regions are a common navigational shortcut used by screen reader users, which can assist in quickly locating page sections and content. They also provide important semantic information on page structure and the purpose of content. The main navigation is generally the primary means of navigation around a site.

When lists of links that function as navigation are not marked up as such in the code, screen reader users may not understand the relationship of the links. Additionally, the list will not be included in the screen reader shortcuts to navigate via landmarks, which may slow users down in finding the content they are looking for.

Expected outcome

Ensure that navigation lists are marked up semantically within a <nav> element.

When there is more than one <nav> element on a page it is recommended to add an aria-label attribute with a unique value.

This will help screen reader users differentiate it from other navigation landmarks on the page. This attribute does not need to contain the word 'navigation' as the role will already be announced by screen readers.

Code example

<nav aria-label="main">
<ul>
<li>
<a class="ct-link ct-theme-light ct-menu__item__link" href="" title="Explore" data-collapsible-trigger="">
Explore
</a>
… 
</li>
</ul>
</nav>

Related issues

For other issues related to this component, please refer to:

• Issue 9 – List not nested • Issue 10 – Current page shown with presentation alone

civictheme / uikit