时间戳

首页 > 解决方案 > 如何将反应本机TextInput设置为由屏幕阅读器读取为手机号码输入

react-native - 如何将反应本机TextInput设置为由屏幕阅读器读取为手机号码输入

问题描述

我正在尝试为我TextInput的 in react native 添加可访问性，以将其读取为手机号码而不是数字，如下所示。

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

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

标签： react-native

解决方案

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

对于您的具体示例，您可以创建一个“电话”类，如下所示：

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

请注意，目前只有 VoiceOver 支持此行为，TalkBack 不支持。

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

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

然而！我鼓励您考虑不要尝试以这种方式管理屏幕阅读器行为。请记住，现代屏幕阅读器具有各种用于处理数字和首字母缩写词发音的用户设置。通过尝试在开发人员方面将他们的发音管理到这个级别，您可能会导致用户出现意外行为。

推荐阅读