链接的图像缺少替代文本-波形错误

Question

Wave辅助功能检查器中的定位标记中的图像抛出“链接的图像缺少替代文本”错误：

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

Answer 1

您不能将装饰性图像作为链接的唯一元素。此图像是链接，不是装饰性的。

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

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

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

Answer 2

对屏幕阅读器和其他辅助技术中对title属性的支持非常有限；对于有视力的屏幕阅读器用户来说，它也没有用。

例如，请参阅

• Don't Rely on the Title Attribute for Accessibility（2016）
• Using the HTML title attribute – updated（2013）

如果链接仅包含图像而不包含文本，则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"添加到上述示例中，只会导致实际上支持链接上该属性的那些屏幕阅读器和浏览器组合中不必要的重复。