选择替代文字

屏幕阅读器为视障用户和搜索引擎使用 Alt-text。因此，为图像编写好的替代文字非常重要。

即使用 alt 属性替换图像，文本也应该看起来正确。例如：

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

没有图像，这看起来像：

匿名用户头像匿名用户写道：

Lorem ipsum dolor sed。

编辑图标 / 删除图标

要纠正这个：

• 删除头像的替代文字。此图像为有视力的用户添加信息（一个易于识别的图标，表明用户是匿名的），但此信息已在文本中提供。 1
• 从图标的 alt-text 中删除图标。知道这将是一个图标，如果它在那里无助于传达其实际目的。

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

一位匿名用户写道：

Lorem ipsum dolor sed。

编辑 / 删除

脚注

1 包含空的 alt 属性和完全排除它之间存在语义差异。空的 alt 属性表示图像不是内容的关键部分（在这种情况下也是如此 - 它只是一个不需要理解其余部分的附加图像），因此可以从渲染中省略。但是，缺少 alt 属性表示图像是内容的关键部分，并且根本没有可用于呈现的文本等效项。