SiteLint documentation and guidelines

Empty link element

Description

An empty <a> (anchor) element in HTML is a link that lacks any content or text between its opening and closing tags. This can create accessibility issues because users who rely on screen readers or other assistive technologies may not be able to discern the purpose of the link. Empty links can lead to confusion, a poor user experience, and a failure to meet accessibility standards.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers will not receive any information about the purpose or destination of an empty link, causing confusion.
  • Cognitive disabilities: users with cognitive disabilities may struggle to understand the function of an empty link, leading to navigation difficulties.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices may find it challenging to interact with empty links effectively.

Why it matters

Providing meaningful content within link elements ensures that all users, particularly those using assistive technologies, can understand and navigate web content effectively. Empty links create barriers to accessibility and can lead to a frustrating user experience. Ensuring that links have meaningful content improves the overall usability and accessibility of a webpage.

Coding problems and solutions

Common coding problems

  • Empty a tags: the link element is empty, containing no text or content.
  • Link content only in the title attribute: relying on the title attribute to provide link information, which is not a sufficient substitute for link text.
  • Invisible content: link content is present but visually hidden or inaccessible to screen readers.

How to fix it

Provide meaningful link text

Ensure that every <a> element contains descriptive text or content that conveys the purpose or destination of the link.

Incorrect example
<a href="https://example.com"></a>
Correct example
<a href="https://example.com">Visit Example</a>

Avoid using only title attribute

Do not rely solely on the title attribute to convey the purpose of the link.

Incorrect example
<a href="https://example.com" title="Learn more about Example"></a>
Correct example
<a href="https://example.com">Learn more about Example</a>

Ensure content is visible and accessible

Make sure that link content is not visually hidden or inaccessible to screen readers.

Incorrect example
<a href="https://example.com"><span style="display: none;">Example</span></a>
Correct example
<a href="https://example.com">Example</a>

Known limitations

  • Dynamic content: ensure that dynamically generated links also contain meaningful and accessible content.
  • Complex links: for links that include images or other elements, ensure that these elements have appropriate alt text or labels to provide context.
  • Testing across devices: test links across different devices and screen readers to ensure that they are accessible and provide the necessary information.

Resources