问题描述
电话号码通常都是数字，忽略括号、破折号、加号等，因此电话号码的输入字段通常是数字.
Phone numbers are typically all digits, ignoring parens, dashes, pluses, etc., so input fields for phone numbers are typically numeric.
当屏幕阅读器遇到数字输入字段时，它会将值作为整数读取.例如，如果我有一个美国电话号码的三个输入字段，第一个是区号(3 位数)，然后是交换机(3 位数)，然后是线路(4 位数)，如果这些字段有 123、456, 7890(分别)，我们通常所说的数字是一二三"、四五六"、七、八、九、零".
When a screen reader encounters a numeric input field, it'll read the value as a whole number. For example, if I had three input fields for a US phone number, with the first being the area code (3 digits), then the exchange (3 digits), then the line (4 digits), if the fields have 123, 456, 7890 (respectively), the way we'd normally say that number is "one two three", "four five six", "seven, eight, nine, zero".
但是当屏幕阅读器遇到这些字段时，它会显示一百二十三"、四百五十六"、七千八百九十".
But when a screen reader encounters those fields, it says "one hundred twenty-three", "four hundred fifty-six", "seven thousand eight hundred ninety".
我认为屏幕阅读器用户习惯于将电话号码视为大数字(至少我交谈过的人是这样期望的)，但这并不意味着我们不能做得更好.如果我向这些人中的一个人询问他们的电话号码，他们不会使用大数字，而是使用单个数字.
I think screen reader users are used to hearing phone numbers as big numbers (at least the guys I've talked to expect that), but that doesn't mean we can't make it better. If I were to ask one of these guys for their phone number, they wouldn't use big numbers but rather individual digits.
我尝试了各种 <input> 类型并查看了所有角色、状态和属性，但没有看到任何可以强制读取数字的内置内容.
I tried various <input> types and looked through all the roles, states, and properties but don't see anything built in that can force digits to be read.
我能想到的就是围绕它编码，通过视觉上隐藏的 <span> 包含数字作为单独的数字，<span id='foo'>1 2 3</span>，然后使用 <;输入 aria-labelledby='foo'>.
All I can think of is to code around it by having a visually hidden <span> that contains the number as separate digits, <span id='foo'>1 2 3</span>, then having <input aria-labelledby='foo'>.
有更好的方法吗?
推荐答案
由于浏览器支持有限，可以试试CSS3属性:
With limited browser support, you can try CSS3 property:
speak:spell-out;
最好的方法是使用 aria-label 提供一个方便的阅读格式，并有足够的停顿:
Best way is to use aria-label to give a convenient reading format with the sufficient pause:
<span aria-label="1 2 3. 4 5 6. 7 8 9 0">123 456 7890</span>
您还可以使用可以解释的 hCard 微格式通过一些技术并使用国际格式的电话号码(可以被其他人使用)结合前面的方法
You can also use a hCard microformat which can be interpreted by some technologies and use a phone number in international format (which can be used by other) combined with the previous method
<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 属性
TL;DR: use international format, aria-label, hCard microformat and speak:spell-out CSS property
这篇关于您可以强制屏幕阅读器将数字读取为单个数字吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！