WCAG 2.4.3 A: Illogical focus order when skip link activated (Issue 23)

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

Global issue – Left side navigation Digital Service Standard services | digital.gov.au (https://www.digital.gov.au/policy/digital-experience/digital-service-standard/services)

Observed outcome

When activating the "Skip to main content" link in the side navigation, focus moves to the correct target (#main-content), however, focus then moves back to the skip link and keyboard users are unable to bypass the navigation.

This is because the target of the skip link comes before the navigation list in the code.

Code used

<main class="ct-layout ct-theme-light ct-vertical-spacing--top " role="main">
<a id="main-content" tabindex="-1"></a>
.. 
<aside class="ct-layout__sidebar col-m-3 col-xxs-12" role="complementary">
<div class="ct-side-navigation ct-theme-light ct-secondary-navigation">
<div class="ct-skip-link ct-theme-light ">
<a class="ct-link ct-theme-light ct-skip-link__link ct-visually-hidden ct-focusable" href="#main-content" title="Skip to main content">
Skip to main content
</a>
</div>
<ul class="ct-menu ct-menu--level-0 ct-theme-light ct-side-navigation__menu " data-component-name="ct-menu">
<li class="ct-menu__item ct-menu__item--level-0 ct-menu__item--has-children ct-menu__item--active-trail " data-collapsible="true" data-collapsible-duration="0" aria-expanded="true">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/policy/digital-experience" title="Digital Experience Policy" aria-expanded="true">
Digital Experience Policy
</a>
</li>
... 
</ul>
... 
</div>
</aside>
... 
</main>

Why this matters

Keyboard-only users will be forced to navigate through all focusable elements within the side navigation each time they visit a new page.

This increases the number of tab stops, which can dramatically slow users down and cause frustration. It can be particularly problematic for those who experience pain while navigating or have limited dexterity.

Expected outcome

As the side navigation sits within the

landmark for the page, update the skip link target to the primary heading of the main content.

This heading comes after the navigation in the code, allowing keyboard users to effectively skip the navigation. The heading should be given a unique id attribute that is referenced in the href attribute of the skip link. The heading element should also be given a tabindex="-1" to ensure that the skip link works for users across various operating systems.

Preferably, update the link text to 'Skip navigation' so the link purpose is clear, and users can differentiate its purpose from the 'Skip to main content' link that appears at the top of the page.

Code example

<a class="ct-link ct-theme-light ct-skip-link__link ct-visually-hidden ct-focusable" href="#main-heading">
Skip navigation
</a>
<h2 id="main-heading" tabindex="-1">
Services covered by the Digital Service Standard
</h2>

civictheme / uikit