12

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

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

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

我认为屏幕阅读器用户习惯于将电话号码听成大数字（至少我谈过的人是这样期望的），但这并不意味着我们不能让它变得更好。如果我向其中一个人询问他们的电话号码，他们不会使用大数字，而是使用单个数字。

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

我能想到的就是围绕它进行编码，方法是使用一个视觉隐藏的 <span>，其中包含作为单独数字的数字 <span id='foo'>1 2 3</span>，然后使用 <input aria-labelledby= '富'>。

有没有更好的办法？

4

2 回答 2

9

由于浏览器支持有限，您可以尝试 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 属性

于 2015-12-04T15:42:45.460 回答
4

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

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

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

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

但是，这很麻烦而且很烦人，我认为屏幕阅读器应该做得更好，因此需要的更多。

于 2015-12-04T15:32:50.093 回答