使用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 tag 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以获得更多参考/指导。

回复 Sumit表示的评论

在我们的应用中的“一小段话”就是“照片阳离子”本身。或者复制对我们的用户来说无关紧要？

正如我上面提到的，你的应用程序做错了。如果图片没有合适的标题，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>

Sumit说

还有，我的理解是图像人物更喜欢有role=presentation。出于某种原因，分组比演示更好吗？如果我在可访问性方面听起来太天真了，我很抱歉

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>
</>