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

Question

虽然建议在 <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 属性？

Answer 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

Answer 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（用于图像）
• 标题（仅当没有文本内容时）
• 标签（用于控件）
• 占位符（用于输入元素）
• 对孩子的递归调用

现在，情况有点混乱

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

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

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

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

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

<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 属性表示元素的建议信息，例如适合工具提示的信息