如何使 HTML link 显示为可访问的图标？
How to make an HTML link displayed as an icon accessible?
我有一些 link 仅显示为图标（没有任何文本）：
<a href="..." class="icon-link"></a>
.icon-link {
background-image: url(...);
}
如何让无法以视觉方式（使用屏幕阅读器）访问网站的人可以访问此 link？
我看到很少有可能的方法，但找不到任何资源，其中一个实际上是正确的，或者得到最好的支持：
- 在
<a> 上添加 aria-label 属性
- 在
<a> 上添加 title 属性
- 在
<a> 中添加文本，然后使用 CSS 以可视方式隐藏它
简答
使用视觉上隐藏的文本。
更长的答案
添加 title 对可访问性的影响很小。 Here is an interesting article on the subject，link需要更多信息。
考虑到这一点，将选项 1 和 3 保留为可行选项，但最好的兼容性是使用视觉上隐藏的文本。
您看到 support for aria-label is surprisingly low (scroll down the page to the aria-label section)，而使用下面示例的视觉隐藏文本将覆盖浏览器，一直到 IE6！
我在 中回答了视觉隐藏文本的最可靠方法（并解释了我为什么做每一项）。我复制了下面的内容，仅供参考。
对于您的用例，只需在 link 中添加一个带有视觉隐藏 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 */
}
<p>visible text <span class="visually-hidden">hidden text</span></p>
添加了视觉隐藏文本的奖励
正如@QuentinC 在评论中指出的那样，在其他方法中使用视觉隐藏文本还有另一个重要原因。
如果用户使用不支持 CSS 的浏览器（人们仍然使用一些纯文本浏览器），那么将显示文本。
始终重新考虑使用视觉上隐藏的文本。不是因为它不好，而是因为它导致错误的信念，即当只有一小部分人可以访问解决方案时，每个人都可以访问该解决方案。
使用隐藏文本不会帮助不使用屏幕阅读器的人了解 link 执行的操作，因为图像的含义可能很困难。屏幕阅读器用户是可访问性规则所针对的人群中的一小部分。
关于 title 属性，如果您将 link 执行的操作告知标准鼠标用户，则提高可访问性不会伤害任何人。它会帮助他们。如果 title 属性并不总是被推荐，您可以选择任何在元素被鼠标或键盘聚焦时显示文本的解决方案。
您还必须记住，不显示文字对使用语音导航或眼动追踪设备的人没有帮助。
使用 title 属性时，您必须始终考虑将其与 aria-label 属性结合使用，而不是将其替换为另一个。
编辑：简单示例
.icon-link {
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='20' font-size='20'></text></svg>");
content: '';
background-repeat: no-repeat;
width: 20px;
height: 30px;
display: inline-block;
}
#pizza {
position: absolute;
display:none;
background:white;
color: black;
margin-left: 20px;
}
a:focus #pizza, a:hover #pizza {
display: block;
}
<a href="#" class="icon-link" aria-labelledby="pizza"><div id="pizza">Pizza!</div></a>
我有一些 link 仅显示为图标（没有任何文本）：
<a href="..." class="icon-link"></a>
.icon-link {
background-image: url(...);
}
如何让无法以视觉方式（使用屏幕阅读器）访问网站的人可以访问此 link？
我看到很少有可能的方法，但找不到任何资源，其中一个实际上是正确的，或者得到最好的支持：
- 在
<a> 上添加 - 在
<a> 上添加 - 在
<a>中添加文本，然后使用 CSS 以可视方式隐藏它
aria-label 属性
title 属性
简答
使用视觉上隐藏的文本。
更长的答案
添加 title 对可访问性的影响很小。 Here is an interesting article on the subject，link需要更多信息。
考虑到这一点，将选项 1 和 3 保留为可行选项，但最好的兼容性是使用视觉上隐藏的文本。
您看到 support for aria-label is surprisingly low (scroll down the page to the aria-label section)，而使用下面示例的视觉隐藏文本将覆盖浏览器，一直到 IE6！
我在
对于您的用例，只需在 link 中添加一个带有视觉隐藏 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 */
}
<p>visible text <span class="visually-hidden">hidden text</span></p>
添加了视觉隐藏文本的奖励
正如@QuentinC 在评论中指出的那样，在其他方法中使用视觉隐藏文本还有另一个重要原因。
如果用户使用不支持 CSS 的浏览器（人们仍然使用一些纯文本浏览器），那么将显示文本。
始终重新考虑使用视觉上隐藏的文本。不是因为它不好，而是因为它导致错误的信念，即当只有一小部分人可以访问解决方案时，每个人都可以访问该解决方案。
使用隐藏文本不会帮助不使用屏幕阅读器的人了解 link 执行的操作，因为图像的含义可能很困难。屏幕阅读器用户是可访问性规则所针对的人群中的一小部分。
关于 title 属性，如果您将 link 执行的操作告知标准鼠标用户，则提高可访问性不会伤害任何人。它会帮助他们。如果 title 属性并不总是被推荐，您可以选择任何在元素被鼠标或键盘聚焦时显示文本的解决方案。
您还必须记住，不显示文字对使用语音导航或眼动追踪设备的人没有帮助。
使用 title 属性时，您必须始终考虑将其与 aria-label 属性结合使用，而不是将其替换为另一个。
编辑：简单示例
.icon-link {
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='20' font-size='20'></text></svg>");
content: '';
background-repeat: no-repeat;
width: 20px;
height: 30px;
display: inline-block;
}
#pizza {
position: absolute;
display:none;
background:white;
color: black;
margin-left: 20px;
}
a:focus #pizza, a:hover #pizza {
display: block;
}
<a href="#" class="icon-link" aria-labelledby="pizza"><div id="pizza">Pizza!</div></a>