Digital Accessibility Knowledge Base

broken-skip-link

Ensure that all the internal page links has a valid corresponding target element

Who might be affected
Screen Reader
Keyboard

Description

Skip links are essential for keyboard users (including screen reader users) to skip repetitive elements such as a navigation menu to avoid tedious and inefficient user experience. However, broken skip links will provide an unpleasant user experience and may even result in loss of page orientation.

Quick Fixes

Ensure that there is an element with a corresponding “id” attribute for each of the internal links on the page. In cases where the target element is an anchor (i.e., <a>), you can also use the “name” attribute as a substitute for the “id”.

1✓ <a href="#main">Skip to main content</a>
2

3   <main id="main">
4    <!-- Main Content -->
5   </main>
1✓ <a href="#section-heading">Skip to section</a>
2   <!-- Content -->
3   <h2 id="section-heading">Heading text</h2>
1✓ <a href="#link-target">Skip to link</a>
2   <!-- Content -->
3   <a name="link-target" href="/path">Link target</a>

Note: The texts on examples 2 and 3 are not descriptive enough and will not meet a11y requirements. Ensure to always use clear and descriptive names/headings.

1✗ <a href="#main">Skip to main content</a>
2

3   <main name="main">
4    <!-- Main Content -->
5   </main>
1✗ <a href="#section-heading">Skip to section</a>
2   <!-- Content -->
3   <!-- The document does not contain an element with id value "section-heading" -->

How Users Are Affected

Keyboard users may find it hard and frustrating to navigate and use the page. Screen reader users may, in addition, lose their orientation in the UI.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.4.1 Bypass Blocks (A)