您可以强制屏幕阅读器将数字读取为单个数字吗？

Posted 2023-05-07

【中文标题】您可以强制屏幕阅读器将数字读取为单个数字吗？

【英文标题】：Can you force a screen reader to read numbers as individual digits?

【发布时间】：2016-03-09 11:59:45

【问题描述】：

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

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

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

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

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

我能想到的就是围绕它进行编码，方法是使用一个视觉隐藏的 ，其中包含作为单独数字的数字 1 2 3，然后使用 。

有没有更好的办法？

【问题讨论】：

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

Telephone numbers and screen readers的可能重复

【参考方案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 microformat，它可以被某些技术解释，并使用国际格式的电话号码（其他人可以使用）结合以前的方法

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

【讨论】：

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

【参考方案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>

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