使用 wai-aria 时 alt 标签有多重要

Question

如果图像标签必须在 a 标签内，并且有兄弟跨度，则显示的内容与 a/img 元素的 alt/title 标签中的内容相同。

不重复数据

如何使用 aria-labelledby 属性获得可访问性。

<a href="/project/image.jpg" title="photo caption" alt="photo caption">
 <img src="/image/thumb.jpg" alt="photo caption"/>
</a>

<span id="pc_1">photo caption</span>

我希望这个问题能帮助我了解 aria 特定属性和常规 html 属性如何在可访问性中发挥作用。 Alt 标记 vs aria-labelledby。

Answer 1

首先，您的 HTML 不正确。 alt 属性只在<img> 上有效，所以你把它放在锚点上是无效的。其次，我不建议使用title，因为不同的辅助技术处理它的方式不同。第三，alt 文字应该描述图像的含义。查看代码，此链接打开了某物的较大图像，因此alt 应该类似于查看更大版本的蒙娜丽莎。

如果您是用 HTML5 编写的，我会将其修改为：

<figure role="group">
 <a><img src="...." alt="Photo 1: view a larger version {a short phrase}" /></a>
 <caption>Photo 1: photo caption here</caption>
</figure>

您可以查看W3C's page on HTML5 techniques for text alternatives 以获取更多参考/指导。

回复 cmets 苏米特说

我们应用程序中的“一个简短的短语”是“照片阳离子”本身。或者这种重复对我们的用户来说并不重要？

如上所述，您的应用做错了。如果图像没有正确的标题，则 alt 应该描述图像。它的标题应该提供额外的上下文，例如：

<figure role="group">
 <a><img src="...." alt="Photo 1: view a larger version the Mona Lisa" /></a>
 <caption>Photo 1: Sumit posing in front of 
 the <em>Mona Lisa</em> by da Vinci </caption>
</figure>

或

<figure role="group">
 <a><img src="...." alt="Photo 1: view a larger version of a boy 
  holding a balloon" /></a>
 <caption>Photo 1: my son Johnny holding a red balloon from the 
  State Fair. It has to be 2' in diameter!</caption>
</figure>

萨米特说

另外，我的理解是图像人物更喜欢角色=演示。出于某种原因，小组比演示更好吗？如果我对辅助功能听起来太天真了，我很抱歉

role="presentation" 在这里不正确，因为它删除了语法。因此，在我的 Mona Lisa 示例中创建 role="presentation" 会使输出看起来像：

<>
 <a><img src="...." alt="Photo 1: view a larger version the Mona Lisa" /></a>
 <caption>Photo 1: Sumit posing in front of the
 <em>Mona Lisa</em> by da Vinci </caption>
</>