loo*_*ade 8 html accessibility screen-readers wai-aria
虽然建议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属性？
Ada*_*dam 10
简而言之:尽管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>
很好的例子(简单就是更好):
史密斯医生位于林肯大道
WCAG推广了许多其他方法而不是使用abbr标签: