Creating a Discernible Name for Icon Links

Having a discernible name for each link within your site is absolutely crucial for accessibility; without them, your links are ‑ for all intents and purposes ‑ entirely blank for your visitors using assistive technologies such as screen readers.

Usually, this is very simple and needs no input from the developer at all: a link will inherit its accessible name from the text content within it. For example, the link below would read 'Back to blog':

<a href="https://johnkavanagh.co.uk/writing/">  Back to blog</a>

Links Without Text Content

Where the complications arise, is when your link contains no notable text; for example, a link that just contains an icon or an image. In these instances, Lighthouse will raise it as an issue titled 'Links do not have a discernible name', and ding your accessibility rating:

Google tends to be very good at explaining these things simply:

“

Link text (and alternative text for images, when used as links) that is discernible, unique and focusable improves the navigation experience for screen reader users. Learn more.

A11y will of course raise a very similar issue. So what you need to do, is add a name to your link. Easy.

Links with Just Images

Perhaps the most common cause of this issue is images within links, without alt text. As alt text is an absolute tenet of accessibility in web development, omitting it is tantamount to missing a significant portion of your development altogether.

If you have a link which only contains an image then the solution is as simple as ensuring that your alt text exists, and that it contains descriptive text:

<a href="https://johnkavanagh.co.uk/writing/">  <img src="/back-button.gif" alt="Back to blog" /></a>

alt text provides context for visitors using assistive technology, and even those where the image simply does not load or is otherwise blocked. Never mind the fact that you also gain some SEO value from including it (and lose some for not). It is important though, to not be tempted to use the alt attribute as a way of keyword‑stuffing: it doesn't work, and it makes your user experience demonstrably worse.

Links That Just Contain Svgs

As above, if your link contains just an SVG, then you need to find a way of adding textual data to it. There are two ways of embedding SVGs, the first is via img, in which case you can simply use alt as described above:

<a href="https://johnkavanagh.co.uk/writing/">  <img src="/back-button.svg" alt="Back to blog" role="image" /></a>

Note that in this use case, you should also add role="image" to get around a Safari VoiceOver bug which otherwise skips over the element altogether.

The other way of embedding SVG is directly into the markup, most commonly via something like svg‑react‑loader. This allows you to import SVGs as a React component and then use inline:

import BackButton from '../../assets/back-button.svg';return (  <a href='https://johnkavanagh.co.uk/writing/'>    <BackButton />  </a>);

In this use case the contents of your SVG will be output directly into the markup on the page so in order to add contextual text, the easiest approach is to edit the SVG itself to include a <title>:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 309.72 524.31">  <title>Back to blog</title>  <!-- the rest of the SVG... --></svg>

Links with No Content at All

Where you have a link without any content whatsoever ‑ for example where you are using a CSS technique to display an image or icon in its place (coincidentally: not an approach that I would recommend now), you can use the aria‑label attribute on the anchor:

<a  href="https://johnkavanagh.co.uk/writing/"  aria-label="Back to blog"></a>

It is worth mentioning that ‑ much like above with alt tags on images ‑ the title in an SVG should be considered an essential aspect of asset management and development: every SVG should have one.

Links with Non‑Textual Content

Similar to the above, you may be using something like Font Awesome to display webfont‑based icons within a link. Coincidentally, this is also not an approach I necessarily recommend any longer. In this instance, the solution is the same as above: add an aria‑label attribute to the anchor:

<a  href="https://johnkavanagh.co.uk/writing/"  aria-label="Back to blog">  <i class="fad fa-long-arrow-alt-left"></i></a>

Fin.