使用wai-aria时alt标签有多重要-Java 学习之路

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

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's page on HTML5 techniques for text alternatives以获取更多参考/指导 .

Replies to comments 苏米特说

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

正如我上面提到的，你的应用程序做错了 . 如果图像没有合适的 Headers ，则应该描述图像 . 它的 Headers 应该提供额外的背景，例如：
```
<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>
</>
```
回复于 2024-04-26T17:48:56+08:00

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

1 回答

相关问题