Top Five Accessibility Issues: 3. Empty Links
Empty links
What it means
A link contains no text. It’s emptier than a movie theatre during lockdown. It is invisible to people viewing the page via eyesight (with or without corrective lenses) so it matters little to them – except that the link might be important and it is not going to receive any visits from this location.
Why it matters
For people using a screen reader, the link will be read to them. It’s a double whammy – for people using their own eyesight, they won’t even know the link existed in the first place; the people using a screen reader will know a link is there but they won’t know what the results of clicking the link might be. Either the link is important and so should be accessible to everyone, or it should be deleted so as to not confuse.
What to do
You first need to identify the empty links on your site. Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
Identifying empty links is a long and difficult task if tackled manually. You have to look at the page in the back end using the Text view. With dozens or hundreds of pages, it is almost impossible. If you request a scan for empty links from Web Services, we can help you pinpoint their exact location.
What does an empty link look like? In the text view (that is, the HTML code that creates the page) it would look something like this:
Read about Web Services<a href=”https://carleton.ca/webservices” target=”_blank”></a>
Emptier than… erm… my supply of metaphors to convey emptiness.
And what should it look like?
<a href=”https://carleton.ca/webservices” target=”_blank”>Read about Web Services</a>
You can see the text should sit inside the two halves of the code. In the example that doesn’t work, it sits outside the code. So the way to fix an empty link is to place code inside the two parts of the tag – after the <a href=””> and the </a>
Bonus material
While we are on the subject of placing text in hyperlinks, we wanted to also mention the wording of the text you use for links.
It is important that it is clear from the text what clicking on the link will achieve. Often you see links with text that just reads Click here. Out of context (e.g., if a link is separated in the code from the preceding text) telling someone accessing the page with assistance from screen reader to Click here is meaningless. With the text, you need to tell them exactly what the action will do. Some examples of good link text include:
- Register now
- Visit this page to apply
- Learn more
- Buy a copy of this book
For more information on empty links and hyperlinks, visit module 2 of our accessibility training: