ReactNative AccessibilityPoonam Tathavadkar Ted Drake

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.

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

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.

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.

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/

accessible={true}

iOS = isAccessibilityElement Android = isFocusable

iOS uses isAccessibilityElement to define when an element is accessibleAndroid uses isFocusable

React native allows you to define this for both operating systems.

Photo Set Container: accessible={true}Photo Set RowIndividual 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.

Photo Set ContainerPhoto 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?

Photo Set ContainerPhoto 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.

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_traitsAccessibility 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

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.

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.

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.

“This is a simple view”

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.

“Button Press Me”

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.

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.

Testing

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

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

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

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

A screen shot is provided with an outline around challenged items

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

Results can be shared

Open the Inspector

Open Xcode 8

Go to Xcode / Open Developer Tool / Accessibility Inspector

Inspect on Device

After hooking up your iPhone, you can begin inspecting the elements

Inspect and then touch phone

After hooking up your iPhone, you can begin inspecting the elements

This video shows how the audit function works