html – -Element：aria-label或title属性

虽然建议在< abbr />上使用title属性.元素,这对屏幕阅读器没有影响(至少不对chromevox有影响).

< abbr title =“尽快”> ASAP< / abbr>

有效的东西当然是咏叹调标签,例如：

< abbr aria-label =“尽快”> ASAP< / abbr>

因此,为了兼顾语义和屏幕阅读器,我需要标记两者：

< abbr aria-label =“尽快”title =“尽快”> ASAP< / abbr>

这看起来有点像黑客.为什么chromevox只是不读取title属性？

解决方法

简而言之：尽管WCAG建议之一,abbr并不是解释每个人缩写意义的完美解决方案,但是当你想宣布缩写的发音时,应该使用咏叹调标签.

屏幕阅读器不应该读取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标签有两个原因：

>它不是一个可聚焦元素,因此您无法使用键盘浏览它以查看缩写的含义.如果您打算提供明显的替代品,那么咏叹调标签绝对是您所需要的.

例如,当缩写是语言的一部分时,您需要解释它,但您可以提供一个替代语言：

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标签：

> 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

原文地址：https://www.jb51.cc/html/226172.html