Question

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

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

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

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

我尝试了各种＆lt; input＆gt;类型并浏览所有角色，状态和属性，但没有看到内置任何可以强制读取数字的内容。

我能想到的就是通过视觉隐藏＆lt; span＆gt;来编码它。包含数字作为单独的数字，＆lt; span id ='foo'＆gt; 1 2 3＆lt; / span＆gt ;,然后有＆lt;输入aria-labelledby ='foo'＆gt;。

有更好的方法吗？

Answer 1

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

与其他网站如何做到这一点（即使是次优的）将为屏幕阅读器用户创造最少的努力。它有点像那些自动标记你到下一个字段的输入。好主意，但人们习惯了次优方法，所以无论如何都要按标签。

您不希望妨碍复制粘贴或其他基本功能，但作为增强功能，您可以像在此答案中使用aria-label：ARIA attributes for reading alternative text (e.g. Roman Numerals) in HTML

E.g。 <span aria-label="One, Two, Three"><span aria-hidden="true">123</span></span>

然而，这非常令人讨厌并且令人讨厌，我会考虑更多，因为屏幕阅读器应该做得更好。

Answer 2

如果浏览器支持有限，您可以尝试使用CSS3属性：

speak:spell-out;

最好的方法是使用 aria-label ，在充足的停顿时提供方便的阅读格式：

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

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

<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-out CSS属性