Question

如果图片标记必须位于标记内，并且具有兄弟范围，则显示的内容与/ 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>

我希望这个问题能帮助我理解咏叹调特定属性和常规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说

我们的应用程序中的“短语”是“照片阳离子”本身。或者重复对我们的用户无关紧要？

正如我上面提到的，你的应用做错了。如果图像没有合适的标题，则应该描述图像。它的标题应该提供额外的背景，例如：

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

OR

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

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

1 个答案: