How to Create a Discernible Name for Icon and Image Links?

Accessible / discernible links are great for accessibility — they improve the navigation experience for screen readers and other assistive technologies. Normally, a link would get its accessible name from its text content. For example, in the following link, "Twitter" is the accessible name:

<a href="https://twitter.com/designcise">Twitter</a>

You can use the lighthouse tool for example, to check if the links on your website are accessible or not (along with other useful things).

As you can see it's quite straightforward when you have link with text content, but what if your link has no text content or is empty? How do you add an accessible name in such cases? Let's review some of such possibilities.

Add Discernible Name to Links With No Content

For links that have no content (i.e. they're empty; for example the link might styled as a shape, icon, etc. for screen media), you can add the link description using the aria-label attribute. Consider, for example, the following:

<a href="https://twitter.com/designcise" aria-label="Twitter"></a>

Add Discernible Name to Links With Icons or Other Non-Textual Content

For non-textual content, such as the i tag (for adding icons), span, or any other tag without text content, adding the aria-label attribute to the link should be enough to make the it accessible. For example:

<a href="https://twitter.com/designcise" aria-label="Twitter">
    <i class="icon icon-twitter"></i>
</a>

Add Discernible Name to Links With Images

For a link containing only an image, adding the alt attribute to the img tag should be sufficient as the alt attribute becomes the accessible name in such a case. For example:

<a href="https://twitter.com/designcise">
    <img src="img/twitter.png" alt="Twitter" />
</a>