如何使HTML链接显示为可访问的图标？
我有一些只显示为图标的链接(没有任何文本)：
<a href="..." class="icon-link"></a>.icon-link {
background-image: url(...);
}我如何使这个链接的人没有访问该网站的视觉(使用屏幕阅读器)？
我认为很少有可行的方法，但无法找到任何资源，而这些资源实际上是正确的，或者是最受支持的：
- 在
aria-label上添加<a>属性 - 在
title上添加<a>属性 - 在
<a>中添加文本，然后用CSS直观地隐藏它。
回答 2
Stack Overflow用户
发布于 2020-07-02 19:27:26
简短回答
使用视觉上隐藏的文本。
较长答案
添加title在可访问性方面提供的功能很少。这里有一篇关于这一主题的有趣文章，它链接到更多的信息。
因此，考虑到这一点，将选项1和3作为可行的选项，但是最好的兼容性是使用视觉上隐藏的文本。
您可以看到(一节)，而使用下面的示例在视觉上隐藏的文本将覆盖所有返回到IE6的浏览器！
我回答了在此堆栈溢出响应中进行视觉隐藏文本的最健壮的方法(并解释了为什么要做每一项)。我抄写了下面的内容，仅供参考。
对于您的用例，只需在链接中添加一个带视觉隐藏类的span即可。
.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的浏览器(人们仍然只使用几个文本浏览器)，那么文本就会显示出来。
Stack Overflow用户
发布于 2020-07-03 06:04:38
始终重新考虑使用视觉上隐藏的文本。这并不是因为它是坏的，而是因为它导致了一种错误的信念，即当只有一小部分人口可以获得解决方案时，每个人都可以获得。
使用隐藏文本并不能帮助不使用屏幕阅读器的人知道链接所执行的操作，当图像的含义可能很难的时候。屏幕阅读器用户是可访问性规则所针对的人群中的一小部分。
关于title属性，如果将链接执行的操作通知标准鼠标用户，那么改进可访问性不会损害任何人。会对他们有帮助的。如果不总是建议使用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>
https://stackoverflow.com/questions/62703524
复制相似问题
腾讯云开发者
