1. Home
  2. Docs
  3. SiteLint
  4. Accessibility Rules
  5. missing-href-on-a

missing-href-on-a

Print this article

    Description

    This rule determines if a given HTML anchor <a> element has defined an attribute href.

    Purpose

    Attribute href defines an URL that the hyperlink points to. When it’s not defined then the user cannot navigate to this element using the keyboard.

    Additiontal information’s

    • For following code <a title="Title example">Link description example</a> Accessibility Tree exposes:
      Name: "Title example"
      Role: generic
    • For following code <a href="" title="Title example">Link description example</a> Accessibility Tree exposes:
      Name: "Link description example"
      Description: "Title example"
      Role: link
      Focusable: true
    • A note about smooth scrolling: be cautious about the use of smooth scrolling. If you use this make sure there is a way to switch it off as it may be distracting or disorientating for people with either motion disorders or anxiety disorders. One way you can do this is to use the CSS media query prefers-reduced-motion.

    How to fix it

    • Always define a non-empty attribute href for <a> element.
    • Avoid an empty value or value that points to nowhere, e.g. "#" or "javascript:void(0)". These values lead to unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g. screen readers).
    • Using href="#" is nearly always a sign that the wrong element is being used or it is being used incorrectly. In most cases, the anchor href="#" is used as a <button>. In that case a better option is to use <button type="button">Action</button>.

    Standard

    Accessibility, Best Practice

    Was this article helpful to you? Yes No