你可以强制屏幕阅读器将数字作为单独的数字读取吗？

Question

电话号码通常都是数字,忽略了parens,破折号,加号等,因此电话号码的输入字段通常是数字.

当屏幕阅读器遇到数字输入字段时,它会将值读作整数.例如,如果我有一个美国电话号码的三个输入字段,第一个是区号(3位数),那么交换(3位数),然后是行(4位数),如果字段有123,456 ,7890(分别),我们通常认为这个数字是"一二三","四五六","七,八,九,零"的方式.

但是当屏幕阅读器遇到那些领域时,它会说"一百二十三","四百五十六","七千八百九十".

我认为屏幕阅读器用户习惯于将电话号码视为大数字(至少是我曾经说过的那些人),但这并不意味着我们无法让它变得更好.如果我向其中一个人询问他们的电话号码,他们就不会使用大数字而是使用个别数字.

我尝试了各种<input>类型,并查看了所有角色,状态和属性,但没有看到内置任何可以强制读取数字的内容.

我所能想到的是通过将视觉上隐藏的<span>包含数字作为单独的数字,<span id ='foo'> 1 2 3 </ span>,然后使用<input aria-labelledby =来编码它'富'>.

有没有更好的办法？

Answer 1

由于浏览器支持有限，您可以尝试 CSS3 属性：

speak:spell-out;

最好的方法是使用aria-label足够的停顿来提供方便的阅读格式：

<span aria-label="1 2 3. 4 5 6. 7 8 9 0">123 456 7890</span>

您还可以使用可以被某些技术解释的hCard 微格式，并使用国际格式的电话号码（其他人可以使用）与前面的方法结合使用

<p class="h-card">
  <span class="p-tel" aria-label="1 2 3. 4 5 6. 7 8 9 0">+123 456 7890</span>
</p>

TL;DR：使用国际格式aria-label、hCard 微格式和speak:spell-outCSS 属性

根据 2020 年的这篇文章，任何浏览器都不支持 `speak` 和 `speak-as`。可惜了，本来会有用的。https://css-tricks.com/almanac/properties/s/speak/ (2认同)

Answer 2

我认为您的基本责任是以正常方式显示您所在区域的电话号码（即显示美国电话号码与英国号码不同。）

与其他网站的做法保持一致（即使不是最佳）将为屏幕阅读器用户带来最少的努力。它有点像那些自动将您切换到下一个字段的输入。好主意，但人们已经习惯了次优方法，所以无论如何都要按 Tab 键。

您不想妨碍复制粘贴或其他基本操作，但作为增强功能，您可以使用 aria-label，如本答案所示：ARIA 属性用于读取 HTML 中的替代文本（例如罗马数字）

例如 <span aria-label="One, Two, Three"><span aria-hidden="true">123</span></span>

然而，这是相当老套且烦人的，我认为这超出了需要，因为屏幕阅读器应该做得更好。