link 中 svg 的辅助功能
Accessibility for svg in link
Lighthouse highlights an accessibility issue called Links do not have a discernible name 以下 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.
鉴于我使用 svg 作为 link 的内容，有没有办法解决这个问题？
如果您的 <a> 不包含任何 HTML 文本节点、SVG <text> 元素（或带有文本节点的 <foreignObject> 元素），您可以添加一个 aria-label 属性，当锚点获得焦点时，它将为辅助技术提供一个可识别的名称。
解决此问题的两种方法，视觉上隐藏的文本或向您的 SVG 添加 <title>。
不要将 aria-label 用作 support is not great。
视觉隐藏文本（屏幕 reader 仅文本）
视觉上隐藏的文本在屏幕上不可见，但仍会被屏幕阅读 reader。
请使用下面的CSS class 因为它比 bootstrap sr-only class 和
有更好的兼容性]
.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>
向您的 SVG 添加 <title> 元素。
<title> 元素实际上与普通图像上的 alt 相同。使用它可以让屏幕 reader 宣布一些内容。
显然你会从中删除 aria-hidden="true" 以便它可以被屏幕读取 reader!
哪个更好？
寻找视觉上隐藏的文本。
它一直适用于早于 SVG 的 IE6！
它也可以在纯文本浏览器（不理解 CSS 的浏览器）中使用，因为它仍会显示。这是一个边缘案例，但仍然是视觉隐藏文本的胜利！
有多种解决方案可以解决此问题：
- 当您使用 svg 作为 link 或按钮内容时，您应该提供描述性文本。这可以通过 CSS 隐藏。 Fontawesome 提供了一个 CSS class 你可以使用：
<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>
- 如 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>
为了测试您的实施，我建议您使用免费屏幕 reader NVDA。我们用它来检查项目中的可访问性问题。
Lighthouse highlights an accessibility issue called Links do not have a discernible name 以下 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.
鉴于我使用 svg 作为 link 的内容，有没有办法解决这个问题？
如果您的 <a> 不包含任何 HTML 文本节点、SVG <text> 元素（或带有文本节点的 <foreignObject> 元素），您可以添加一个 aria-label 属性，当锚点获得焦点时，它将为辅助技术提供一个可识别的名称。
解决此问题的两种方法，视觉上隐藏的文本或向您的 SVG 添加 <title>。
不要将 aria-label 用作 support is not great。
视觉隐藏文本（屏幕 reader 仅文本）
视觉上隐藏的文本在屏幕上不可见，但仍会被屏幕阅读 reader。
请使用下面的CSS class 因为它比 bootstrap sr-only class 和
.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>
向您的 SVG 添加 <title> 元素。
<title> 元素实际上与普通图像上的 alt 相同。使用它可以让屏幕 reader 宣布一些内容。
显然你会从中删除 aria-hidden="true" 以便它可以被屏幕读取 reader!
哪个更好？
寻找视觉上隐藏的文本。
它一直适用于早于 SVG 的 IE6！
它也可以在纯文本浏览器（不理解 CSS 的浏览器）中使用，因为它仍会显示。这是一个边缘案例，但仍然是视觉隐藏文本的胜利！
有多种解决方案可以解决此问题：
- 当您使用 svg 作为 link 或按钮内容时，您应该提供描述性文本。这可以通过 CSS 隐藏。 Fontawesome 提供了一个 CSS class 你可以使用：
<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>
- 如 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>
为了测试您的实施，我建议您使用免费屏幕 reader NVDA。我们用它来检查项目中的可访问性问题。