0

如果图像标签必须在 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 标签与 aria-labelledby。

4

1 回答 1

6

对于初学者来说，您的 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 的 HTML5 技术页面以获取更多参考/指导。

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

苏米特说

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

role="presentation"此处不正确，因为它删除了语法。因此，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>
</>
于 2013-06-27T16:44:36.743 回答