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

<abbr />-Element: aria-label or title attribute

虽然建议在 <abbr /> 元素上使用 title 属性,但这对屏幕 readers 没有影响(至少对 chromevox 没有影响)。

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

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

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

所以为了既语义正确又屏幕兼容 reader 我需要同时标记:

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

这似乎有点乱七八糟。为什么 chromevox 不直接读取标题属性?

简而言之:尽管有 WCAG 建议,abbr 并不是向所有人解释缩写含义的完美解决方案,当您使用 aria-label想宣布缩写的发音。

屏幕阅读器不应阅读 title 属性,因为它无意取代 aria-label。另见 W3 警告: http://www.w3.org/TR/html/dom.html#attr-title

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

我从不鼓励使用 abbr 标签,原因有二:

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

例如,当缩写是语言的一部分时,您确实需要对其进行解释,但您可以提供替代语音:

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

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

比如下面这句话,盲人完全可以看懂:

John Smith of the NATO was arrested by the FBI.

而下面的就更难理解了

John Smith of the North Atlantic Treaty Organization was arrested by the Federal Bureau of Investigation.

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


如果您确实认为缩写词需要解释(适用于所有人,而不仅仅是盲人),那么您应该用完整的文字给出解释,而不需要用户将鼠标悬停在缩写词上以查看小工具提示。

糟糕的例子,当缩写不利于可读性时:

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

好例子(越简单越好):

Doctor Smith is located on Lincoln Drive

WCAG 提倡使用 abbr 标签以外的许多其他方法:

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

由于 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
  • aria-label
  • alt(对于图像)
  • 标题(仅当没有文字内容时)
  • 标签(用于对照)
  • 占位符(用于输入元素)
  • 递归调用 children

现在,这是一个错误的情况

  1. 这个例子,在我看来,正确的读法是"BBC":

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

  1. 这个宣布 "British Broadcasting Corporation": 这是对无效标记的正确回退

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

  1. 但是这个什么也读不到,因为节点文本长度不为null

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

如果我们排除最后一个错误,它不是 Text Alternative Computation

的完美但相当一致的实现
  • [F. Otherwise, look in the subtree]
  • G. Otherwise, if the current node is a Text node, return its textual contents.
  • H. Otherwise, if the current node has a tooltip attribute, return its value.

请注意,根据上面一条评论中引用的文档,title 属性(如果存在)现在应该由辅助功能 api 使用,而不是文本内容:(http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#text-level-elements-not-listed-elsewhere). I'm not sure it's a good thing as the title attribute was previously and is still defined as the following 由 W3 .

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip