<abbr> -Element：aria-label或title属性

Question

虽然建议在title元素上使用<abbr />属性，但这对屏幕阅读器没有影响（至少在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

• 盲人确实理解缩写，就像我们大多数人一样，

例如，以下句子是盲人完全理解的内容：

  北约的约翰史密斯被联邦调查局逮捕。

以下一个不太容易理解

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

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

如果您确实认为缩写需要解释（适用于所有人而不仅仅适用于盲人），那么您应该用完整的单词来解释，而不要求用户将鼠标悬停在缩写上以查看小工具提示。

错误的例子，当缩写没有帮助可读性时：

  

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

很好的例子（简单就是更好）：

  

Doctor Smith位于Lincoln Drive

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

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

以下是代码中定义的优先顺序：

• 文本内容，如果它是文本节点。
• 咏叹调-labelledby
• 咏叹调标签
• alt（用于图片）
• 标题（仅当没有文字内容时）
• 标签（用于控件）
• 占位符（用于输入元素）
• 递送给孩子的电话

现在，这是一种有缺陷的情况

1. 在我看来，这个例子正确地读了＆＃34; BBC＆＃34;：

  

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

1. 这个宣布＆＃34;英国广播公司＆＃34;：，这是对无效标记的正确回退

  

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

1. 但是这个没有读取任何内容，因为节点文本长度不为空

  

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

如果我们除了上一个bug之外，它不是Text Alternative Computation

的完美但非常一致的实现

  

  
• [F。否则，请查看子树]
  
• -G。否则，如果当前节点是Text节点，则返回其文本内容。
  
• 小时。否则，如果当前节点具有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属性表示元素的建议信息，例如适用于工具提示