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:
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>
Hope you found this post useful. It was published (and was last revised ). Please show your love and support by sharing this post.