说我想制作一个可点击的图片(比如网站标志或其他),如下所示:
<a href="theblablasite.com"><img src="logo_or_whatever.png"></a>
如果我想要将其设为可访问,我应该使用aria-label
链接以及alt
来获取图片,还是只使用aria-label
?
此外,有很多关于使用title和alt一起使用或者不使用alt的意见,这样做的正确方法是什么以及为什么?
答案 0 :(得分:1)
alt
属性是强制性的
请注意,根据WCAG的H30 technique
当图像是链接的唯一内容时,图像的文本替代描述链接的唯一功能。
您可以使用aria-label
提供旨在供辅助技术使用的特定替代方案。
例如:
<a href="http://theblablasite.com/" target="_blank"
aria-label="Visit The Blabla Site Dot Com (opens in a new window)">
<img src="logo_or_whatever.png" alt="The Blabla site" /></a>
如果您有可视信息,title
属性可用于为鼠标用户提供工具提示。
<a href="http://theblablasite.com/" target="_blank"
title="opens in a new window"
aria-label="Visit The Blabla Site Dot Com (opens in a new window)">
<img src="logo_or_whatever.png" alt="The Blabla site" />
<i class="arrow"></i>
</a>
请注意,由于键盘仅供不使用任何辅助技术的用户无法访问此信息,因此只有在补充任何其他视觉提示时才能使用此信息(在此示例中,标题attribute
可以用于明确小箭头的含义。)
答案 1 :(得分:0)
必须为IMG指定alt属性
此外,我经常在制作中看到的是提供一个辅助文本元素,它隐藏了CSS用于视觉用户,但屏幕阅读器会大声朗读。更多相关内容https://www.w3.org/TR/WCAG20-TECHS/C7.html
因此,在您的示例中,您可能会这样做:
<a href="theblablasite.com"><img src="logo_or_whatever.png" alt="Relevant info here"><span class="assitive-text">Relevant info here...</span></a>
.assistive-text { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }
CSS来自上面的W3参考。