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