What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native?

Question

What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native? React native documentation is not enough to understand. Examples would be more appreciated.

Answer 1

accessible - the flag set to true will enable the view or component to be an accessibility element that can be read by VoiceOver for people with disabilities.

accessibilityLabel - When the VoiceOver goes over the accessibility element if there is no label given it will just read as a textfield, label or button. Instead you can make it read as "username field", "password field", "Login button" etc

accessibilityHint - This is used to inform the user what will be the action performed on tapping or interacting with that UI element.

For example if you've a "Login button" when the user clicks on it. You want to inform the user the action that will be performed after that some like - "When you tap on this login button. Your username and password will be validated and on successfull login you will be taken to the dashboard screen"

Also please refer this section of the ReactNative documentation. It is very thorough with some code examples https://facebook.github.io/react-native/docs/accessibility.

I hope this should help.

Answer 2

Get truth from the source: https://reactnative.dev/docs/accessibility:

accessible When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.

accessibilityHint An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.

Hints are only necessary for elements that are uncertain, and primarily intended for interactive elements, not text. Login buttons don't need hints. You know you are logging in. But maybe selecting text plays a song. What? That is not expected, so the accessibilityHint for that would be something simple and direct, like "plays this song". Notice the verb is not a command. And it's not a long sentence like @Hasseb here suggested. Also note that this interactive example is a button because it performs an action. Code it as a button with accessibilityRole="button".

accessibilityLabel When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.

The example in ReactNative of stating "Tap me" when a button has text saying "Press me!" is not good; text is already there and the suggested label is a different word. That's straight up confusing! AccessibilityLabel is more intended for icons like info icons; or a settings menu (whether shaped like a hamburger menu, person outline, or a gear, it's still settings); or images that are tappable. The accessibilityLabel for settings is AccessibilityLabel="settings". Until you label that icon, it's just "button".

There are quiet a few more ReactNative APIs. Learn them, it will help your career.