屏幕阅读器如何读取<abbr>标记？

Question

我了解到，屏幕阅读器应该以其title属性在屏幕阅读器读取时替换其内容的方式来解释<abbr>标记。然而，当我尝试时，MacOS (火狐和Safari) Voiceover和NVDA (Windows10，Edge和Firefox)都不能以这种方式工作。下面是相关的代码部分：

... bla bla bla <abbr title="nervus">N.</abbr> peronaeus ...

(这是一种医学表达)

我想这应该读作"... bla nervus peronaeus ..."，但它被读成"... bla N."，然后长时间的沉默(或者屏幕阅读器甚至在它之前停止)，显然是因为圆点，然后是"peronaeus ...“-没有"nervus"...

我是否正确地使用了语法，或者我是否遗漏了什么？或者，如果这是正确的:是否有任何WAI-ARIA代码或类似的代码，我可以添加，使它的工作方式，它被认为是在大多数屏幕阅读器？

Answer 1

您不能真的依赖于用户听到元素的title属性。Here's a good resource on how screen readers process HTML elements，对于abbr，该条目如下：

​

​

如您所见，屏幕阅读器通常只读出元素内容。因为N.包含句点，所以它只读出"N"，然后对句点做句号。您可以设置屏幕阅读器来读取title内容，但这是一个可选的设置，因此您不应该依赖它。实际上没有办法用title来设置屏幕阅读器的内容。

Answer 2

abbr标记只是误导性的。

在您的情况下，您不希望只向盲人用户提供信息，而是向忽略似乎是常见的医学缩写术语的人提供信息。不使用屏幕阅读器的非盲人用户需要此信息。

相反，使用盲文显示器的盲人确实喜欢使用缩写。很多。

如果你想要一种非常有效的方法来处理缩写，可以使用术语表：

 <a href="/glossary/nervus-peronaeus"
        aria-label="Nervus peronaeus"
        title="Nervus peronaeus" class="glossary">N. Peronaeus</a>

aria-label对链接有很好的支持，title属性可以用来给非屏幕阅读器用户一个提示。

例如，词汇表可以插入页面内部的底部。

 <a href="#nervus-peronaeus"
        aria-label="Nervus peronaeus"
        title="Nervus peronaeus" class="glossary">N. Peronaeus</a>

我首选的处理缩写的方法是不使用它们。

Nervus Peronaeus

安全。简洁。这看起来似乎微不足道，但当你认为一个缩写应该得到解释时，这是对每个人(运动、视觉、认知障碍)最好的方式。

当然，对于缩写语言的一部分，您不需要解释它们(联邦调查局，北约，...)。在一个面向专业人员的医学网站上，只有"N。peronaeus“这一术语可能是目标公众语言的一部分。

Answer 3

另一种方法是:在页面的第一个实例中使用完整的术语加上括号中的缩写，然后只使用缩写。维基百科：“超文本标记语言是用于创建网页和web应用程序的标准标记语言。”https://en.wikipedia.org/wiki/HTML