2

我正在阅读WCAG 2.0 技术 H30

该程序说:

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

  1. 检查文本或非文本内容的替代文本是否包含在 a 元素中
  2. 如果 img 元素是 a 元素的唯一内容,请检查其替代文本是否描述了链接的目的
  3. 如果 a 元素包含一个或多个 img 元素并且 img 元素的替代文本为空,请检查链接的文本是否描述了链接的目的
  4. 如果 a 元素只包含文本,请检查文本是否描述了链接的目的

我专注于第 2 点:如果img有一个alt属性,但没有替代文本怎么办?

例如,以下代码是否满足该技术要求?

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

2 回答 2

3

我会说您的示例不满足该技术。

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

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

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

于 2013-05-26T13:26:52.217 回答
0

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

一个很好的参考是我找到的这个 Stack Overflow 答案。它有助于展示如何去做:

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

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

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

于 2013-05-24T15:46:14.863 回答