Make your links clear and accessible
Links are pretty straightforward, you put an
<a> with an
href attribute and you're good right? Yes, but often links lack readability due to poor phrasing. Try not using texts like more or click here outside of clear phrases, as they do not convey what's going to happen when you click. Try to have a different texts for each link.
If you can't use a more contextualized text, then add the
title attribute in the link with more context inside, and it will provide a tool-tip when the user hover on the link. You will also have to add an
aria-label attribute with the same contextualized text for screen readers.
Inside those attributes, don't use the work "link". It's not explicit, it doesn't convey meaning. Also because screen readers already say link, your screen readers visitors will hear Link, Link.
Last but not least: if you use
target="blank" to open to a new tab, you have to vocalize it using the same
aria-label attribute. Just add
(open in a new tab) at the end of your text so screen readers users know that the previous page is still open.
So the end result might look like this:
<a href="/home.html" title="Go to the home page" aria-label="Go to the home page (open in a new tab)" target="blank">here</a>
Knowing all this, it's often less work and trouble to just rephrase the link!
Next: When to use a button and a link
Generated: March 13th, 2022