用于可访问用户的链接内的图像

时间:2016-02-04 13:50:54

标签: html accessibility wai-aria wcag wcag2.0

说我想制作一个可点击的图片(比如网站标志或其他),如下所示:

<a href="theblablasite.com"><img src="logo_or_whatever.png"></a>

如果我想要将其设为可访问,我应该使用aria-label链接以及alt来获取图片,还是只使用aria-label

此外,有很多关于使用title和alt一起使用或者不使用alt的意见,这样做的正确方法是什么以及为什么?

2 个答案:

答案 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)

HTML standard说:

  

必须为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参考。