合并临近的链接相同资源的图片和文字

基于Techniques for WCAG 2.0 H2: Combining adjacent image and text links for the same resource

对于如何编写HTML,每个人可能都有自己的看法和理解,对于下面这样一个列表,很多人编写列表项的时候,分别为图片添加一个链接,为文字添加一个链接;也有很多人用一个链接包裹图片和文字。

图片和文字指向相同资源的列表项

在视觉上,大多数人都会感知为点击图片和文字会到达一个相同的资源,但是当利用鼠标或者键盘或者辅助技术聚焦的时候,会产生两个区域,这会使人感到困惑和冗余。当一个链接将图片和文字包裹在一起的时候,需要注意一点,如果没有必要,你应该将图片的alt值清空或者不应该与文字一样,因为大多数情况下,图片的目的是增强理解和视觉效果,他并不承载除文件之外的其他信息。

前两个是正确的例子,后三个是错误的例子

例子一

 <a href="products.html">
   <img src="icon.gif" alt="" />
   Products page
 </a>

例子二

<a href="foo.htm">
  <img src="house.gif" alt="home page icon"/>
  Go to the home page
</a>

例子三

<a href="products.html">
   <img src="icon.gif" alt="Products page" />
 </a>
 <a href="products.html">
   Products page
 </a>

例子四

<a href="products.html">
   <img src="icon.gif" alt="" />
 </a>
 <a href="products.html">
   Products page
 </a>

例子五

<a href="products.html">
  <img src="products.gif" alt="Products page"/>
  Products page
</a>

两步检查,第一,检查相邻的拥有链接图片和文字和他们的描述;第二,相同表格中类似的问题。

关于 rockywen

平等、美好、安逸、自由 Accessibility Strategist 你已经努力的创造了一个伟大的应用,不要错过这个让他能服务更多用户的机会。还有,这是一件对的事情。
此条目发表在 技术 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注