链接中 svg 的可访问性

Question

Lighthouse 突出显示以下 HTML 的一个名为 Links do not have a discernible name 的可访问性问题。

<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>

可识别、独特且可聚焦的链接文本（以及图像的替代文本，当用作链接时）可改善屏幕阅读器用户的导航体验。

鉴于我使用 svg 作为链接的内容，有没有办法解决这个问题？

Answer 1

解决此问题的方法有两种，视觉上隐藏的文本或向 SVG 添加 <title>。

不要将aria-label 用作support is not great。

视觉隐藏文本（仅屏幕阅读器文本）

视觉上隐藏的文本在屏幕上不可见，但屏幕阅读器仍会阅读。

请使用下面的 CSS 类，因为它比 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>

将<title> 元素添加到您的 SVG。

<title> 元素实际上与普通图像上的alt 相同。使用它可以让屏幕阅读器宣布一些内容。

显然，您可以从中删除aria-hidden="true"，以便屏幕阅读器可以阅读！

哪个更好？

寻找视觉上隐藏的文本。

它一直可以追溯到早于 SVG 的 IE6！

它也适用于纯文本浏览器（不理解 CSS 的浏览器），因为它仍会显示。这是一个边缘案例，但仍然是视觉隐藏文本的胜利！

Answer 2

有多种解决方案可以解决此问题：

1. 当您使用 svg 作为链接或按钮内容时，您应该提供描述性文本。这可以通过 CSS 隐藏。 Fontawesome 提供了一个可以使用的 CSS 类：

<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>

1. 如Font Awesome documentation 中所述，您也可以将标题标签添加到 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>

为了测试你的实现，我推荐使用免费的屏幕阅读器NVDA。我们使用它来检查项目中的可访问性问题。

Answer 3

如果您的 <a> 不包含任何 HTML 文本节点、SVG <text> 元素（或带有文本节点的 <foreignObject> 元素），您可以为其添加 aria-label 属性，这将为主播获得焦点时的辅助技术。