Link tags such as <a href> should not be empty, there should be content specified within such as a hashtag (#) or javascript or an URL path. Although the empty links will not be visible on the page, they will be apparent to some users such as those using a screen reader and cause confusion when it is being read out.
I cannot see the issue in browser view
This checkpoint looks at links that are empty. When a link is empty it may not be visible when the webpage is opened. This is an issue because even if the link is not visible in the browser it will still be visible in the source code of the page which can be seen by screen readers or search engine crawlers. If you cannot find the issue in browser view switch to source code view to find where the issue is in the source code.
How can I resolve this issue?
We would recommend reviewing the link if it is necessary. There are cases where the link was forgotten in the source code and is no longer needed, in these cases the link needs to be removed. For cases where the link is used but CSS is generating content, we would recommend changing this so that there is text in between the link instead.
What topics do this checkpoint affect?
- Accessibility (WCAG 2.1 Level A, 2.4.4)
- SEO
Can you explain how this checkpoint works?
This checkpoint examines the page and reports an error if any link tags (such as <a href>) are empty, if a hashtag (#) or javascript is found, this will not be flagged.
References
