如何设置react本机TextInput作为手机号码输入供屏幕阅读器读取

Question

我正在尝试将可访问性添加到我的TextInput中，将其作为手机号码(而不是数字)进行本机阅读，如下所示。

<TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    editable={false}
    accessibilityLabel={'26726855243'}
    value={'26726855243'}
  />

这个数字正被android TalkBack和iOS VoiceOver解读为数字。我试过在数字之间添加空格，但仍然不起作用，accessibilityLabel={'26726855243'.split('').join(' ')}

Answer 1

CSS3语音模块提供对此行为的支持：https://www.w3.org/TR/css3-speech/

对于特定的示例，您可以创建一个"phone“类，如下所示：

​

<style>
  .phone {speak: digits;}
</style>

​

请注意，此行为目前仅由VoiceOver支持，而不受TalkBack支持。

对于Talkback和大多数其他屏幕阅读器，插入逗号而不是空格(屏幕阅读器通常会暂停使用逗号、句号、分号、感叹号和问号，而不是空格)：

​

accessibilityLabel={'26726855243'.split('').join(',')}

​

不过！我鼓励您考虑不要试图以这种方式管理屏幕阅读器的行为。请记住，现代屏幕阅读器有各种各样的用户设置来处理数字和缩略语发音。通过尝试在开发人员端将他们的发音管理到这个级别，您可能会给用户带来意想不到的行为。