具有 alt 属性但没有文本的 img 是否满足 WCAG 2.0：技术 H30？答案

【问题标题】：Does an img with an alt attribute but no text satisfy WCAG 2.0: Technique H30?具有 alt 属性但没有文本的 img 是否满足 WCAG 2.0：技术 H30？
【发布时间】：2022-02-25 05:19:26
【问题描述】：

我正在阅读WCAG 2.0 Technique H30。

程序说：

对于使用此技术的内容中的每个链接：

检查文本或非文本内容的替代文本是包含在 a 元素中

如果 img 元素是 a 元素的唯一内容，请检查其替代文本描述了链接

如果 a 元素包含一个或多个 img 元素并且文本 img 元素的替代项为空，检查文本链接的描述链接的目的

如果 a 元素只包含文本，请检查文本是否描述链接的目的

我专注于第 2 点：如果 img 具有 alt 属性，但没有替代文本怎么办？

例如，以下代码是否满足该技术要求？

<a href="http://www.mystite.com"> 
  <img src="http://www.mystite.com/myimage.jpg" alt="Description of the image" />
</a>

【问题讨论】：

我同意 unor。 alt 应该是 return home 或只是 home，而不是 an icon of a house indicating home

标签： html accessibility wai-aria wcag2.0

【解决方案1】：

我会说你的例子不满足技术。

您的 a 元素仅包含一个 img 元素。根据 H30，此图像的alt 属性应包含有关链接目标的信息，而不是有关图像本身的信息。

http://www.w3.org/TR/WCAG20-TECHS/H30.html#H30-description:

当图片是链接的唯一内容时，图片的替代文本描述了链接的独特功能。

【讨论】：

【解决方案2】：

据我了解，alt 属性是描述图像的文本“alt”。这就是将鼠标悬停在图像上时显示的内容，并且如果没有呈现图像或用户正在使用文本到语言的翻译器，则会显示出来。所以是的，你给出的那个例子确实符合规则。

我找到了一个很好的参考是this Stack Overflow answer。它有助于展示如何去做：

我是一名屏幕阅读器用户，我将使用 Stack Overflow 作为好与坏的示例。

Alt 标记应简短且具有描述性。例如，Stack Overflow 用于支持投票和反对投票选项的 alt 标签很不错，因为它们不需要很长时间即可阅读并快速进入主题。错误的 alt 标签的例子是让这个问题成为最爱并接受这个答案。两个标签都不是描述性的，最喜欢的标签只是“*”，接受答案标签是“检查”我知道它们是什么的唯一方法是阅读源代码或让有人看到让我知道它们是什么为。

就标题属性而言，我真的没有太多建议。我的屏幕阅读器默认不阅读它们，所以我通常不使用它们。可能有用的一个例子是附加信息。例如，我接受的答案率如此低的原因是因为我无法判断我是否接受了某个问题的答案。如果接受此答案图形上的标题属性会显示类似“单击以接受此答案”（如果答案未被接受）和“单击以将此答案作为接受的答案”（如果它是已接受的答案）的话，那就太好了.

【讨论】：