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(' ')}
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.
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.
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
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} />
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With