Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

react-native

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(' ')}

like image 518
Junius L. Avatar asked Jul 27 '18 18:07

Junius L.


People also ask

How to auto focus text input in React Native App?

By default when react native app starts then there is no TextInput component will be focus but we can manually-dynamically focus any TextInput present in react native app using autoFocus = {true} prop. This prop would allow us to automatically focus/selects any TextInput on application starts time.

How to work with textinput elements in React Native?

In this chapter, we will show you how to work with TextInput elements in React Native. The Home component will import and render inputs. We will define the initial state. After defining the initial state, we will create the handleEmail and the handlePassword functions.

What are the downsides of immediate correction in React Native textinput?

The downside to immediate correction is to ensure correct feedback is given to the user as to prevent confusion as to what happened to his value React Native TextInput provides keyboardType props with following possible values : default number-pad decimal-pad numeric email-address phone-pad

How to make a text input only accept numbers?

so for your case you can use keyboardType='number-pad' for accepting only numbers. This doesn't include '.' <TextInput style= {styles.textInput} keyboardType = 'number-pad' onChangeText = { (text)=> this.onChanged (text)} value = {this.state.myNumber} />


1 Answers

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.

like image 129
Peter B Avatar answered Oct 17 '22 23:10

Peter B