From eee3e3bd66fa34db61417ef1aef517bc370ac417 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Mon, 14 Mar 2016 15:33:46 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/accessibility.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/releases/next/docs/accessibility.html b/releases/next/docs/accessibility.html index 955fd0afb61..547d42d8364 100644 --- a/releases/next/docs/accessibility.html +++ b/releases/next/docs/accessibility.html @@ -1,6 +1,6 @@ Accessibility – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Accessibility #

Edit on GitHub

Native App Accessibility (iOS and Android) #

Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

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}’.

<View accessible={true}> <Text>text one</Text> - <Text >text two</Text> + <Text>text two</Text> </View>

In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

accessibilityLabel (iOS, Android) #

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:

<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}> <View style={styles.button}> <Text style={styles.buttonText}>Press me!</Text>