WAVE错误:链接的图像缺少备用文本

此定位标记中的图像在WAVE accessibility checker中引发“链接图像缺少替代文本”错误:

<a href="www.google.com" title="google link"><img src="google.jpg" alt="" /></a>
leikai945 回答:WAVE错误:链接的图像缺少备用文本

您不能让装饰性图像成为链接的唯一元素。该图像是链接,不是装饰性的。

<a href="www.google.com" title="google link"><img src="google.jpg" alt="" /></a>

当图像是链接内唯一的内容时,其替代内容应包含链接目标描述。

在其他情况下,添加role="presentation"就足以明确声明您愿意得到装饰性图像,在这里不是这种情况

,

屏幕阅读器和其他辅助技术对title属性的支持非常有限;对于视力不佳的键盘用户来说,它也没有用。

例如,

如果链接仅包含图像而不包含文本,则alt属性的内容构成链接的“链接文本”,即当链接器获得焦点时,屏幕阅读器将宣布该内容。因此,在这种情况下,alt属性不能为空。您需要以下内容:

 <a href="https://www.google.com/"><img src="google.jpg" alt="Google" /></a>

如果在图像旁边添加实际文本,如以下示例所示,可以将alt属性保留为空:

 <a href="https://www.google.com/"><img src="google.jpg" alt="" />Google</a>

在最后一个示例中,由于存在正确的链接文本,因此可以将图像视为装饰性图像。如果字符串Google被包含在alt属性中,则屏幕阅读器会宣布两次。

为链接添加title属性并不是一个好主意,原因如下:

  1. 对于无法将鼠标指针悬停在链接上的有眼力的键盘用户来说,这是没有用的。
  2. 屏幕阅读器对title属性的支持并不完全一致,从测试结果A "click here" link with TITLE attribute: Screen reader compatibility中可以看出(最新更新于2019年4月)。在上面的示例中添加属性title="google link"只会导致实际上支持链接上该属性的那些屏幕阅读器和浏览器组合中不必要的重复。
本文链接:https://www.f2er.com/2883509.html

大家都在问