SiteLint documentation and guidelines

A link to another location on the page does not have a corresponding target

Description

The accessibility issue A link to another location on the page does not have a corresponding target refers to situations where a hyperlink within a webpage is intended to navigate users to a specific part of the same page (often referred to as an anchor link), but the destination element (the target) either does not exist or is incorrectly identified. This can be problematic because users relying on screen readers or keyboard navigation may attempt to follow these links expecting to be taken to relevant content, only to find themselves lost or at the wrong location.

Disabilities impacted

  • Visual impairments: users with visual impairments often rely on screen readers to navigate web pages. If a link promises to take them to a specific section but fails due to missing or incorrect target identifiers, it can lead to confusion and frustration, making it harder for them to find the information they need.
  • Cognitive disabilities: individuals with cognitive disabilities may struggle with disorientation or difficulty in maintaining their place on a page. Links that do not work as expected can exacerbate these challenges, leading to a poor user experience and potentially causing them to abandon the site altogether.
  • Motor impairments: people with motor impairments often navigate web pages using keyboard shortcuts or assistive technologies. Broken anchor links can disrupt their navigation flow, forcing them to waste time and energy searching for content that should have been easily accessible.

Why it matters

Ensuring that all links, especially those meant to navigate within the same page, function correctly is crucial for maintaining a positive user experience across all disability types. It supports inclusivity by allowing everyone equal access to information and functionality, aligning with the principles of universal design.

Coding problems and solutions

Common coding problems

  • Missing ID attribute: the destination element lacks an id attribute that the anchor link references.
  • Typo in anchor link: a typo in the href attribute of the anchor link, such as href="#section1" pointing to an element with id="section2".
  • Dynamic content issues: in Single Page Applications, content loaded dynamically might not exist at the time the link is clicked, leading to broken navigation.

How to Fix It

Ensure correct ID usage

Make sure the destination element has an id attribute that matches the anchor link’s href.

Correct example
<a href="#section1">Go to Section 1</a>
...
<div id="section1">Section 1 content here</div>

Use ARIA roles and properties

For dynamic content, consider using ARIA roles and properties to manage focus and announce changes to screen reader users.

Correct example
<a href="#dynamicContent" aria-controls="dynamicContent">Load Content</a>
...
<div id="dynamicContent" aria-live="polite">Content loads here</div>

JavaScript solutions

For complex applications, JavaScript can be used to dynamically update links and targets, ensuring they always correspond correctly.

Known Limitations

While fixing broken anchor links improves accessibility, it’s important to note that relying solely on anchor links for navigation may not be sufficient for users who navigate primarily through headings, landmarks, or skip links. Ensuring a comprehensive approach to web accessibility that includes proper semantic HTML structure, alternative text for images, and keyboard navigability is essential.

Resources

Rule

  • ID: broken-same-page-link