CODEWITHSUNDEEP
react-native
Junius L
Junius L

Reputation: 16152

How to set react native TextInput to be read by screen readers as cellphone number input

I'm trying to add accessibility to my TextInput in react native to be read as cellphone number instead of a number, like the following.

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

This is being read as number by android TalkBack and iOS VoiceOver. I have tried adding spaces between the numbers but still didn't work, accessibilityLabel={'26726855243'.split('').join(' ')}

Upvotes: 8

Views: 3822

Answers (1)

Peter B
Peter B

Reputation: 114

The CSS3 Speech Module provides support for this behavior: https://www.w3.org/TR/css3-speech/

For your specific example, you could create a "phone" class as follows:

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

Note that this behavior is currently only supported by VoiceOver, not by TalkBack.

For Talkback and most other screen readers, inserting commas rather than spaces will work (screen readers generally pause for commas, periods, semi-colons, exclamation marks and question marks, but not spaces):

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

However! I would encourage you to consider not trying to manage screen reader behavior in this way. Bear in mind that modern screen readers have a variety of user settings for handling number and acronym pronunciation. By trying to manage their pronunciation to this level on the developer side you may cause unexpected behavior for users.

Upvotes: 4

Related Questions