Accessibility for svg in link

Question

Lighthouse highlights an accessibility issue called Links do not have a discernible name for the following HTML.

<a target="_blank" rel="nofollow noopener noreferrer" href="https://www.youtube.com/test">
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
        </path>
    </svg>
</a>

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

Is there a way to address this issue, given that I am using an svg as the link's content?

brennanyoung · Answer 1 · 2020-07-10T12:56:04.993

3

If your <a> does not contain any HTML text nodes, SVG <text> elements (or <foreignObject> elements with text nodes), you can add an aria-label attribute to it, which will provide a discernible name to assistive tech when the anchor gets focus.

edited Jul 10 '20 at 12:56

answered Jul 10 '20 at 09:09

brennanyoung

6,243
3
26
44

GrahamTheDev · Accepted Answer · 2020-07-10T09:33:22.580

Two ways to address this, visually hidden text or by adding a <title> to your SVG.

Do not use aria-label as support is not great.

Visually Hidden text (screen reader only text)

Visually hidden text is not visible on the screen but will still be read by a screen reader.

Please use the CSS class below as it has better compatibility than bootstrap sr-only class as explained in this answer I gave

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<a target="_blank" rel="nofollow noopener noreferrer" href="https://www.youtube.com/test">
  <span class="visually-hidden">Visit our YouTube channel (opens in new tab)</span>
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
        </path>
    </svg>
</a>

Add a `<title>` element to your SVG.

The <title> element is effectively the same as alt on a normal image. Using this gives the screen reader something to announce.

Obviously you would then remove the aria-hidden="true" from it so it can be read by a screen reader!

Which is better?

Go for visually hidden text.

It works all the way back to IE6 which predates SVG!

It also works in a text only browser (one that does not understand CSS) as it will still be displayed. It is an edge case but still a win for visually hidden text!

Thank you, I have decided to use the second method, adding a `` element to the `svg`. Since I am using React Font Awesome, I discovered that adding the `title` attribute to the font awesome icon component takes care of this automatically: `<fontawesomeicon icon='{["fab",' title="Subscribe on YouTube (opens in new tab)"></fontawesomeicon>` This resolves the Lighthouse issue. — Ben, Jul 10 '20 at 11:42
Just to confirm that this adds `` to the SVG and doesn't add `title=""` to the `<svg>` element itself? If it adds a title attribute it isn't accessible. Probably fine but as I don't know the library wanted to check!</svg> — GrahamTheDev, Jul 10 '20 at 12:05
I can confirm that it adds a `` element inside the `<svg>` element.</svg> — Ben, Jul 10 '20 at 19:01
Support for aria-label on `` is reliable. The caveat about aria-label applies to mostly to non-operable elements or elements without a role that supports naming. https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/ — brennanyoung, Jun 02 '23 at 05:38

score 1 · Answer 3 · answered Jul 10 '20 at 09:15

There are multiple solutions to fix this issue:

When you use a svg as link or button content you should provide a descriptive text. This can be hidden via CSS. Fontawesome provides a CSS class you can use:

<a target="_blank" rel="nofollow noopener noreferrer" href="https://www.youtube.com/test">
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
    </svg>
    <span class="sr-only">View on YouTube</span>
</a>

As described in the Font Awesome documentation you could alternatively add a title tag to the svg:

<a target="_blank" rel="nofollow noopener noreferrer" href="https://www.youtube.com/test">
    <svg aria-labelledby="my-youtube-title" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <title id="my-youtube-title">View on YouTube</title>
        <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
    </svg>
</a>

To test your implementation i can recommend to use the free screen reader NVDA. We use it to check for accessibility issues in our projects.

Accessibility for svg in link

3 Answers3

Visually Hidden text (screen reader only text)

Add a <title> element to your SVG.

Which is better?

Add a `<title>` element to your SVG.