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>
@@ -56,6 +56,20 @@
</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>
+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
Note: Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace
diff --git a/docs/next/accessibility/index.html b/docs/next/accessibility/index.html index c9e34a6d979..03dd5a6b949 100644 --- a/docs/next/accessibility/index.html +++ b/docs/next/accessibility/index.html @@ -45,10 +45,10 @@accessibilityTraitsandaccessibilityComponentType, which will soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.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
+accessibilityLabelproperty to a custom string on your View:To use, set the
accessibilityLabelproperty 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> @@ -56,6 +56,20 @@ </TouchableOpacity>In the above example, the
+accessibilityLabelon the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.accessibilityHint (iOS)
+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
+accessibilityHintproperty 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> +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
accessibilityRole (iOS, Android)
Note: Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace
diff --git a/docs/next/text.html b/docs/next/text.html index cb69dc34db0..624224ad744 100644 --- a/docs/next/text.html +++ b/docs/next/text.html @@ -199,6 +199,8 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);accessibilityTraitsandaccessibilityComponentType, which will soon be deprecated. When possible, useaccessibilityRoleandaccessibilityStatesinstead ofaccessibilityTraitsandaccessibilityComponentType.Props
- +
selectable- +
accessibilityHintaccessibilityLabelaccessibleellipsizeMode- @@ -231,6 +233,28 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
nativeID
++
accessibilityHintAn 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.
++ +
++ + + Type Required + + string No
++
accessibilityLabelOverrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the
+Textnodes separated by space.+ +
++ + + Type Required + + node No
accessibleWhen set to
true, indicates that the view is an accessibility element. The default value for aTextelement istrue.See the Accessibility guide for more information.
diff --git a/docs/next/text/index.html b/docs/next/text/index.html index cb69dc34db0..624224ad744 100644 --- a/docs/next/text/index.html +++ b/docs/next/text/index.html @@ -199,6 +199,8 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);Props
- +
selectable- +
accessibilityHintaccessibilityLabelaccessibleellipsizeMode- @@ -231,6 +233,28 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
nativeID
++
accessibilityHintAn 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.
++ +
++ + + Type Required + + string No
++
accessibilityLabelOverrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the
+Textnodes separated by space.+ +
++ + + Type Required + + node No
accessibleWhen set to
true, indicates that the view is an accessibility element. The default value for aTextelement istrue.See the Accessibility guide for more information.
diff --git a/docs/next/touchablewithoutfeedback.html b/docs/next/touchablewithoutfeedback.html index 202a2658b18..6fb1a4a32c2 100644 --- a/docs/next/touchablewithoutfeedback.html +++ b/docs/next/touchablewithoutfeedback.html @@ -35,12 +35,14 @@
hitSlop- +
accessibilityComponentType- +
accessibilityHint- +
accessibilityLabelaccessibilityTraitsaccessibledelayLongPressdelayPressIndelayPressOut- -
disabledaccessibilityTraitsonLayoutonLongPress- @@ -76,6 +78,38 @@
onPress
++
accessibilityHintAn 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.
++ +
++ + + Type Required + + string No
++
accessibilityLabelOverrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the
+Textnodes separated by space.+ +
++ + + Type Required + + node No
++
accessibilityTraits+ +
++ + + Type Required + + AccessibilityTraits, ,array of AccessibilityTraits No
accessible@@ -130,16 +164,6 @@
--
accessibilityTraits- -
-- - - Type Required - - AccessibilityTraits, ,array of AccessibilityTraits No
onLayoutInvoked on mount and layout changes with
diff --git a/docs/next/touchablewithoutfeedback/index.html b/docs/next/touchablewithoutfeedback/index.html index 202a2658b18..6fb1a4a32c2 100644 --- a/docs/next/touchablewithoutfeedback/index.html +++ b/docs/next/touchablewithoutfeedback/index.html @@ -35,12 +35,14 @@
{nativeEvent: {layout: {x, y, width, height}}}
hitSlop- +
accessibilityComponentType- +
accessibilityHint- +
accessibilityLabelaccessibilityTraitsaccessibledelayLongPressdelayPressIndelayPressOut- -
disabledaccessibilityTraitsonLayoutonLongPress- @@ -76,6 +78,38 @@
onPress
++
accessibilityHintAn 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.
++ +
++ + + Type Required + + string No
++
accessibilityLabelOverrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the
+Textnodes separated by space.+ +
++ + + Type Required + + node No
++
accessibilityTraits+ +
++ + + Type Required + + AccessibilityTraits, ,array of AccessibilityTraits No
accessible@@ -130,16 +164,6 @@
--
accessibilityTraits- -
-- - - Type Required - - AccessibilityTraits, ,array of AccessibilityTraits No
onLayoutInvoked on mount and layout changes with
diff --git a/docs/next/view.html b/docs/next/view.html index 15a294ae0d1..09a8b3fcf29 100644 --- a/docs/next/view.html +++ b/docs/next/view.html @@ -72,6 +72,7 @@
{nativeEvent: {layout: {x, y, width, height}}}
onStartShouldSetResponder- +
accessibilityLabelaccessibilityHinthitSlopnativeID- @@ -117,6 +118,17 @@
onAccessibilityTap
++
accessibilityHintAn 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.
++ +
++ + + Type Required + + string No
accessibilityLabelOverrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the
Textnodes separated by space.diff --git a/docs/next/view/index.html b/docs/next/view/index.html index 15a294ae0d1..09a8b3fcf29 100644 --- a/docs/next/view/index.html +++ b/docs/next/view/index.html @@ -72,6 +72,7 @@
onStartShouldSetResponder- +
accessibilityLabelaccessibilityHinthitSlopnativeID- @@ -117,6 +118,17 @@
onAccessibilityTap
++
accessibilityHintAn 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.
++ +
++ + + Type Required + + string No
accessibilityLabelOverrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the
Textnodes separated by space.diff --git a/movies.json b/movies.json index bbe6ed55a95..b6337cbc2c3 100644 --- a/movies.json +++ b/movies.json @@ -2,11 +2,10 @@ "title": "The Basics - Networking", "description": "Your app fetched this from a remote endpoint!", "movies": [ - { "id": "1", "title": "Star Wars", "releaseYear": "1977"}, - { "id": "2", "title": "Back to the Future", "releaseYear": "1985"}, - { "id": "3", "title": "The Matrix", "releaseYear": "1999"}, - { "id": "4", "title": "Inception", "releaseYear": "2010"}, - { "id": "5", "title": "Interstellar", "releaseYear": "2014"} + { "id": "1", "title": "Star Wars", "releaseYear": "1977" }, + { "id": "2", "title": "Back to the Future", "releaseYear": "1985" }, + { "id": "3", "title": "The Matrix", "releaseYear": "1999" }, + { "id": "4", "title": "Inception", "releaseYear": "2010" }, + { "id": "5", "title": "Interstellar", "releaseYear": "2014" } ] } -