<abbr />-Element: aria-label 或 title 属性

Posted 2023-05-07

【中文标题】<abbr />-Element: aria-label 或 title 属性

【英文标题】：<abbr />-Element: aria-label or title attribute

【发布时间】：2015-12-29 13:16:02

【问题描述】：

虽然建议在 <abbr /> 元素上使用 title 属性，但这对屏幕阅读器没有影响（至少对 chromevox 没有影响）。

<abbr title="as soon as possible">ASAP</abbr>

有效的当然是aria-label 例如：

<abbr aria-label="as soon as possible">ASAP</abbr>

因此，为了在语义上正确并兼容屏幕阅读器，我需要同时标记两者：

<abbr aria-label="as soon as possible" title="as soon as possible">ASAP</abbr>

这似乎有点骇人听闻。为什么 chromevox 不直接读取 title 属性？

【问题讨论】：

老实说，这听起来像是 chromevox 中的一个错误。

其他屏幕阅读器是做什么的？

【参考方案1】：

简而言之：尽管有 WCAG 的一项建议，abbr 并不是向所有人解释缩写含义的完美解决方案，当您要宣布缩写的发音时，应使用 aria-label .

屏幕阅读器不应该读取title 属性，因为它不打算替换aria-label。另见 W3 警告： http://www.w3.org/TR/html/dom.html#attr-title

目前不鼓励依赖 title 属性，因为许多用户代理没有按照本规范的要求以可访问的方式公开该属性（例如，需要诸如鼠标之类的指点设备来显示工具提示，这不包括键盘-仅用户和仅触摸用户，例如拥有现代手机或平板电脑的任何人）。

我从不鼓励使用abbr 标签，原因有两个：

它不是可聚焦的元素

，因此您无法使用键盘浏览它来查看缩写的含义。如果您打算提供一个可发音的替代方案，那么aria-label 绝对是您所需要的。

例如，当缩写是语言的一部分时，你确实需要解释它，但你可以给出一个语音替代：

Director: <span aria-label="Mister">Mr</span> Smith

盲人确实懂缩写

，就像我们大多数人一样，

例如，下面这句话是盲人完全可以理解的：

北约的约翰·史密斯被 FBI 逮捕。

而下面的就更难理解了

北大西洋公约组织的约翰·史密斯被联邦调查局逮捕。

由于abbr 用于首字母缩略词和缩写，您应该使用CSS 属性speak:spell-out 来声明必须拼写一个元素。您可以使用abbr 标签在语义上指示它是缩写词或首字母缩略词，但不会对全局可访问性产生任何影响。

---

如果您确实认为缩写需要解释（针对所有人，而不仅仅是盲人），那么您应该完整地给出解释，而不需要用户将鼠标悬停在缩写上以查看小工具提示。

不好的例子，当缩写不利于可读性时：

<abbr title="Doctor">Dr.</abbr> Smith is located on Lincoln <abbr title="Drive">Dr.</abbr>

好例子（简单更好）：

史密斯医生位于林肯大道

WCAG 推广许多其他方法，而不是使用abbr 标签：

Providing the expansion or explanation of an abbreviation Providing the first use of an abbreviation immediately before or after the expanded form Linking to definitions

【讨论】：

chromevox 没有公布 ttitle 属性内容的问题可能是由于 chrome 中的 abbr 元素暴露了不正确的角色：错误提交code.google.com/p/chromium/issues/detail?id=538537 否则同意你的评估，我关于title 属性可能很有趣paciellogroup.com/blog/2013/01/…

是的，盲人用户理解缩写词，但屏幕阅读者会错误地阅读/发音。我假设标题和 aria-label 都存在的有效案例是 <abbr title="Structured Query Language" aria-label="sequel">SQL</abbr>

@user3351393 我不认为应该使用 aria-label 来放置不存在的单词，因为盲文终端可能会使用相同的单词。

@SteveFaulkner 感谢您的反馈。查看源代码后，chromevox 将 title 属性用作任何元素的后备（请参阅我的其他答案）。这是我对w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te 的理解，但这里rawgit.com/w3c/aria/master/html-aam/… 似乎有所不同。有什么提示吗？

@SteveFaulkner 我很好奇地发现您文章中的“tl;dr”具有标题属性；-) 我确定您是故意这样做的。而且，这是一篇非常好的文章！

【参考方案2】：

很抱歉添加另一个完全不同的答案，但我认为这两个答案不应该合并：

由于 ChromeVox 是开源的，我对您的问题有第二个现在是技术性的答案。 http://src.chromium.org/svn/trunk/src/chrome/browser/resources/chromeos/chromevox/common/dom_util.js

对于任何元素（缩写也不例外）如果节点中没有文本内容（node.textContent.length==0），ChromeVox 会回退到 title 属性

这里是代码中定义的优先顺序：

文本内容（如果是文本节点）。 aria-labelledby 咏叹调标签 alt（用于图像） 标题（仅当没有文本内容时） 标签（用于控件） 占位符（用于输入元素） 对孩子的递归调用

现在，情况有点混乱

在我看来，这个例子正确地读作“BBC”：

<abbr title="British Broadcasting Corporation">BBC</abbr>

这个宣布“英国广播公司”：这是对无效标记的正确回退

<abbr title="British Broadcasting Corporation"></abbr>

但是这个什么都没有读，因为节点文本长度不为空

<abbr title="British Broadcasting Corporation"> </abbr>

如果我们排除最后一个错误，它不是一个完美但相当一致的Text Alternative Computation实现

[F.否则，查看子树] G.否则，如果当前节点是 Text 节点，则返回其文本内容。 H.否则，如果当前节点有 tooltip 属性，则返回其值。

请注意，根据上面一条评论中引用的文档，title 属性（如果存在）现在应该由无障碍 api 使用，而不是文本内容：(http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#text-level-elements-not-listed-elsewhere)。我不确定这是不是一件好事，因为 title 属性以前是 W3 的 defined as the following。

title 属性表示元素的建议信息，例如适合工具提示的信息