This presentation was created by Poonam Tathavadkar and Ted Drake for the San Diego React and React Native meetup to introduce mobile accessibility and how to use React Native's functions to build accessible Android and iOS applications.

1. ReactNative
Accessibility
Poonam Tathavadkar
Ted Drake

2. What is
Accessibility?
What does it mean to make an accessible product? It’s a combination of engineering, user experience design, customer support, and awareness. Let’s see how Tommy
Edison, the Blind Film Critic explains his experience with Instagram.

3. Tommy Edison, the blind film critic, explains how he uses Instagram with a screen reader. This is the most concise video to explain how a blind user can operate a phone,
take pictures, and add content with a screen reader.
https://www.youtube.com/watch?v=P1e7ZCKQfMA

4. Role
State
Value
Label
To be accessible we need to know an objects role, state, value, and label.
React Native makes it easy to define these values. This presentation will show you what they mean and how to implement them.

5. React Native Accessibility
• Shaky Beginning
• Quick Progress
• Great support for most major features.
• Work in Progress
• Contribute!
NOTES :-
A critical aspect of any product is its accessibility. As most of you might know, Accessibility refers to the design of products, devices, services, or environments for
people who experience disabilities.
Though my contribution and introduction to the field of accessibility has been just a while ago, I can say that the support that react native provides for accessibility is
pretty impressive. Though it was not something that existed right from the beginning of when the framework was launched, as the codebase grew, the foundation of this
became very strong.
Also, it is worth a mention here that they did triage and took care of PR’s that helped them build this faster. Very proudly, one of our teammates Jian Fang was a
contributor in this area. TouchableHighlight not able set the accessible flag
Intuit being a company that respects and cares for the needs of all their customers and strive to provide and excellent experience to one and all, this came as a big plus
and reduced the apprehensions of using a new technology.
Contributions are recognized and used to develop faster.

6. accessible={true}
React Native provides a set of properties to define your application’s accessibility. The accessible property needs a bit more clarification. It seems like you just say yes
and everything is complete, but that’s not the case. https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/

7. accessible={true}
iOS = isAccessibilityElement
Android = isFocusable
iOS uses isAccessibilityElement to define when an element is accessible
Android uses isFocusable
React native allows you to define this for both operating systems.

8. Photo Set Container: accessible={true}
Photo Set Row
Individual Photos
Typically you will not set accessible={true} on the container. This will block a user from entering the sub elements and all text will be announced as a
single, unnavigable string. But if you want this to act as a single actionable item, set this to true.
This is also commonly seen when a Webview is given focus instead of the website within it.

9. Photo Set Container
Photo Set Row: accessible={true}
Individual Photos
The default behavior for a uiTableViewCell in iOS is to have accessible=“true”.
Depending on your construction, this may also have isFocusable by default with Android.
The entire row/container will be focusable and actionable. Text will be concatenated.
But what if you want to treat each subitem as actionable?

10. Photo Set Container
Photo Set Row: accessible={false}
Individual Photos
If you want the user to access the individual elements, set the row to accessible={false}.
This allows focus to move down into the sub elements.
If those subelements are interactive, they should already be accessible by default.
You may need to give subelements accessible={true} if they are custom.

11. Primary Attributes
accessibilityLabel (iOS, Android)
• Label
• A user-friendly label for element
accessibilityTraits (iOS)
• Role, State
• Define the type or state of element selected
accessibilityLabel (iOS, Android) {LABEL}
ROLE STATE VALUE LABEL
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.
To use, set the accessibilityLabel property to a custom string on your View
accessibilityTraits (iOS)
https://developer.apple.com/reference/uikit/1657063-uiaccessibility/1657255-accessibility_traits
Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by
accessibilityTraits.
To use, set the accessibilityTraits property to one of (or an array of) accessibility trait strings:
none - Used when the element has no traits. (roles)
button - Used when the element should be treated as a button.
link - Used when the element should be treated as a link. (state) pressed or not

12. Accessibility & Automation
• Critical for Mobile automation (Appium)
• Android uses accessibilityLabel
• Automation vs Customer switch
• iOS uses testID
• Appium is a black box: React Native component
that goes in, might not be obvious what Appium
spits out.

13. Touchable Components
• React Native doesn’t expose components with
accessibility on by default.
• Created an overridable hack until updated
• No longer using the RN core Touchable
components
• The main component to create any sort of
button.
One of our developers had to extend that Touchable component with a small props change to make it work. A PR is sitting in facebooks github dormant for awhile until a
couple of weeks ago our same developer nudged facebook and then another contributor redid the PR with some small corrections and it was merged into FB about a
week ago. So that kind of shows the FB contributions pipeline a little bit.

14. Accessible and Label
<View accessible={true}
accessibilityLabel=”This is simple view”>
….
</View>
Poonam: does the accessibilityLabel overwrite the text nodes to screen readers?
What do you expect the screen reader to announce in this example?
Ted : It will just announce that it is a simple view. We are not trying to access Text elements here. I am getting rid of them since the focus in not on them right now.
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.

15. “This is a
simple view”

16. EXAMPLE 2
<TouchableOpacity
accessible={true}
accessibilityLabel={'Tap me!’}
accessibilityTrait=‘button’ …>
<View>
<Text style=…>Press me!</Text>
</View>
</TouchableOpacity>
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node
children separated by spaces.

17. “Button
Press Me”

18. iOS Specific
onAccessibilityTap
• Assign a custom function when someone
activates by double tapping when selected.
onMagicTap
• Assign a custom function called when someone
performs the "magic tap" gesture, which is a
double-tap with two fingers.
onAccessibilityTap (iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap
function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current
one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.

19. Android Specific
accessibilityComponentType
• Define the type of selected component
•‘button’, ‘radiobutton_checked’, …
Sending Accessibility Events
•Trigger an accessibility event on a UI component
accessibilityComponentType (Android)
If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must
specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and
so on.
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected).
Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.

20. Testing
photo: Testing Radioactive Source Tracking System (02813932) by
IAEA Imagebank on Flickr [CC] https://www.flickr.com/photos/iaea_imagebank/30592372832/

21. Install the Accessibility Scanner from the Google Play store
https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en

22. Accessibility Scanner introduces this floating button that sits above any active application. Tapping this will trigger the app’s audit

23. After starting the scan, it will run through the list of tests and store the results.

24. A screen shot is provided with an outline around challenged items

25. A list of errors is provided with links to additional information and suggestions for fixing the errors.

26. Results can be shared

27. Open the Inspector
Open Xcode 8
Go to Xcode / Open Developer Tool / Accessibility Inspector

28. Inspect on Device
After hooking up your iPhone, you can begin inspecting the elements

29. Inspect and then touch phone
After hooking up your iPhone, you can begin inspecting the elements

30. This video shows how the audit function works