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.
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:
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
<TouchableOpacity
accessible={true}
- accessibilityLabel={'Tap me!'}
+ accessibilityLabel="Tap me!"
onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
@@ -60,7 +60,55 @@
</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.
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
+To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacity
+ accessible={true}
+ accessibilityLabel="Go back"
+ accessibilityHint="Navigates to the previous screen"
+ onPress={this._onPress}>
+ <View style={styles.button}>
+ <Text style={styles.buttonText}>Back</Text>
+ </View>
+</TouchableOpacity>
+iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
+Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
+Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
+++Note: Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace
+accessibilityTraitsandaccessibilityComponentType, which will soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the accessibilityRole property to one of the following strings:
++Note: >
+accessibilityRoleandaccessibilityStatesare meant to be a cross-platform solution to replaceaccessibilityTraitsandaccessibilityComponentType, which will soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to selected or disabled or both:
To use, set the accessibilityState to an array containing either selected, disabled, or both.
+Note:
+accessibilityTraitswill soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
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:
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.
+Note: >
+accessibilityComponentTypewill soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). 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. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.
<TouchableWithoutFeedback accessibilityComponentType=”button”
onPress={this._onPress}>
@@ -155,7 +206,7 @@ _onPress: function
}
<CustomRadioButton
- accessibleComponentType={this.state.radioButton}
+ accessibilityComponentType={this.state.radioButton}
onPress={this._onPress}/>
In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.
diff --git a/docs/0.10/accessibility/index.html b/docs/0.10/accessibility/index.html index c5019835285..a28eee92ed3 100644 --- a/docs/0.10/accessibility/index.html +++ b/docs/0.10/accessibility/index.html @@ -49,10 +49,10 @@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.
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:
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
<TouchableOpacity
accessible={true}
- accessibilityLabel={'Tap me!'}
+ accessibilityLabel="Tap me!"
onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
@@ -60,7 +60,55 @@
</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.
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
+To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacity
+ accessible={true}
+ accessibilityLabel="Go back"
+ accessibilityHint="Navigates to the previous screen"
+ onPress={this._onPress}>
+ <View style={styles.button}>
+ <Text style={styles.buttonText}>Back</Text>
+ </View>
+</TouchableOpacity>
+iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
+Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
+Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
+++Note: Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace
+accessibilityTraitsandaccessibilityComponentType, which will soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the accessibilityRole property to one of the following strings:
++Note: >
+accessibilityRoleandaccessibilityStatesare meant to be a cross-platform solution to replaceaccessibilityTraitsandaccessibilityComponentType, which will soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to selected or disabled or both:
To use, set the accessibilityState to an array containing either selected, disabled, or both.
+Note:
+accessibilityTraitswill soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
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:
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.
+Note: >
+accessibilityComponentTypewill soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.
In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). 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. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.
<TouchableWithoutFeedback accessibilityComponentType=”button”
onPress={this._onPress}>
@@ -155,7 +206,7 @@ _onPress: function
}
<CustomRadioButton
- accessibleComponentType={this.state.radioButton}
+ accessibilityComponentType={this.state.radioButton}
onPress={this._onPress}/>
In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.
diff --git a/docs/0.10/building-for-apple-tv.html b/docs/0.10/building-for-apple-tv.html index 3885018a3c0..63ceeb8d1a7 100644 --- a/docs/0.10/building-for-apple-tv.html +++ b/docs/0.10/building-for-apple-tv.html @@ -1,4 +1,4 @@ -