你能强制屏幕阅读器将数字读作单个数字吗？

Question

电话号码通常都是数字，忽略括号、破折号、加号等符号，因此电话号码的输入字段通常是数字。

当屏幕阅读器遇到数字输入字段时，会将该值作为整数读取。例如，如果我有三个用于美国电话号码的输入字段，第一个是区号（3位数字），然后是交换机号码（3位数字），最后是线路号码（4位数字），如果这些字段的值分别是123、456、7890，我们通常说出那个号码的方式是“一 二 三”，“四 五 六”，“七 八 九 零”。

但是，当屏幕阅读器遇到这些字段时，它会说“一百二十三”，“四百五十六”，“七千八百九十”。

我认为屏幕阅读器用户习惯于将电话号码视为大数值（至少我与之交谈过的人都是这样期望的），但这并不意味着我们不能做得更好。如果我要求其中一个人给出他们的电话号码，他们不会使用大数值，而是使用单个数字。

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

我所能想到的唯一办法是通过使用可视隐藏的<span>，其中包含单独的数字，<span id='foo'>1 2 3</span>，然后使用<input aria-labelledby='foo'>。

有更好的方法吗？

- slugolicious

---

为什么需要这样做？屏幕阅读器具有允许用户按字符检查的功能。 - MobA11y

可能是电话号码和屏幕阅读器的重复问题。 - unor

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">[phone]</span>
</p>

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

- Adam

---

根据这篇2020年的文章，speak和speak-as在任何浏览器中都不受支持。太糟糕了，它会很有用。https://css-tricks.com/almanac/properties/s/speak/ - Steve

Answer 2

我认为您的基本职责是以本地化的方式显示电话号码（例如，显示美国电话号码与英国号码不同）。与其他网站保持一致（即使不太优秀）将为屏幕阅读器用户带来最小的努力。这有点像自动制表符输入到下一个字段。这是个好主意，但人们已经习惯了次优的方法，所以仍然按Tab键。您不想妨碍复制粘贴或其他基本操作，但作为改进，您可以使用aria-label，就像在此回答中一样：ARIA attributes for reading alternative text (e.g. Roman Numerals) in HTML

例如：<span aria-label="One, Two, Three"><span aria-hidden="true">123</span></span> 但是，这种做法相当烦琐和麻烦，我认为这不是必需的，因为屏幕阅读器应该做得更好。

- AlastairC