SiteLint documentation and guidelines

A link needs a destination to function properly

Description

A link without a defined href attribute is an empty link that doesn’t function properly. This attribute is essential for a link to work correctly, as it specifies the URL of the page the link should direct to. Without it, the link is unable to perform its intended action, causing issues for users who rely on assistive technologies or have certain disabilities. It also prevents from getting the focus.

Disabilities impacted

  • Visual impairments: screen readers may announce the link, but when a user tries to activate it, the link won’t work, causing confusion.
  • Cognitive disabilities: users with cognitive disabilities may struggle to understand the purpose of the link or why it’s not working, leading to frustration.
  • Motor impairments: users who rely on keyboard navigation may have difficulty accessing the link or understanding its purpose, as the link won’t receive focus.

Why it matters

It’s essential to include the href attribute in links to ensure they function correctly and provide a clear purpose. This attribute helps:

  • Screen readers announce the link and its destination.
  • Users understand the link’s purpose.
  • Keyboard users navigate to the link and activate it.
  • Search engines crawl and index the linked content.

Coding problems and solutions

Common coding problems include:

  • Forgetting to include the href attribute.
  • Using an empty string or # as the href value.
  • Using a non-existent or broken URL as the href value. Examples of problematic code: <a>Linktext</a>, <a href="#">Link text</a>. To fix these issues:
    • Always include the href attribute with a valid URL.
    • Use a meaningful URL that directs to the intended content.
    • Avoid using empty strings or “#” as the “href” value. Example of corrected code: <a href="https://www.example.com">Link text</a>.

Known limitations

While including the href attribute is crucial, there may be cases where a link is intentionally empty, such as when using JavaScript to handle the link’s behavior. However, in these cases, it’s essential to provide alternative text or a clear indication of the link’s purpose to ensure accessibility.

Resources

Rule

  • Audit: Accessibility.
  • Standard: SiteLint.
  • Level: Best Practices.
  • Success Criteria: Not applicable.
  • ID: missing-href-on-a