From 5921f5f702bc05cfe568fa8495f06af97c689635 Mon Sep 17 00:00:00 2001 From: Alexsander Akers Date: Tue, 23 Jun 2015 15:15:18 -0400 Subject: [PATCH 1/4] Add docs page for accessibility support --- docs/Accessibility.md | 75 +++++++++++++++++++++++++++++++++++++++++++ docs/Animations.md | 2 +- 2 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 docs/Accessibility.md diff --git a/docs/Accessibility.md b/docs/Accessibility.md new file mode 100644 index 00000000000000..2c66b70c221f14 --- /dev/null +++ b/docs/Accessibility.md @@ -0,0 +1,75 @@ +--- +id: accesibility +title: Accessibility +layout: docs +category: Guides +permalink: docs/accessibility.html +next: nativemodulesios +--- + +# Accessibility + +Accessibility on iOS encompasses many topics, but for many, accessibility is synonymous with VoiceOver, a technology available since iOS 3.0. It acts as a screen reader, allowing people with visual impairments to use their iOS devices. Click [here](https://developer.apple.com/accessibility/ios/) to learn more. + +## Making Accessible Apps + +### Coding Accessibly + +#### accessible + +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. + +#### accessibilityLabel + +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, simply set the `accessibilityLabel` property to a custom string on your View: + +```javascript + + + Press me! + +``` + +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. + +#### accessibilityTraits + +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. +* **button** Used when the element should be treated as a button. +* **link** Used when the element should be treated as a link. +* **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar). +* **search** Used when the text field element should also be treated as a search field. +* **image** Used when the element should be treated as an image. Can be combined with button or link, for example. +* **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control. +* **plays** Used when the element plays its own sound when activated. +* **key** Used when the element acts as a keyboard key. +* **text** Used when the element should be treated as static text that cannot change. +* **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait. +* **disabled** Used when the control is not enabled and does not respond to user input. +* **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example. +* **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver. +* **adjustable** Used when an element can be "adjusted" (e.g. a slider). +* **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard). +* **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element. + +#### onAccessibilityTap + +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 + +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. + +### Testing VoiceOver Support + +To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver. + +To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top. + +At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button. diff --git a/docs/Animations.md b/docs/Animations.md index 191aab913c9b01..c1a7b2ba945d18 100644 --- a/docs/Animations.md +++ b/docs/Animations.md @@ -4,7 +4,7 @@ title: Animations layout: docs category: Guides permalink: docs/animations.html -next: nativemodulesios +next: accessibility --- Fluid, meaningful animations are essential to the mobile user From b28766670df249d2151dbe244aad79722e2080d8 Mon Sep 17 00:00:00 2001 From: Alexsander Akers Date: Tue, 23 Jun 2015 15:47:26 -0400 Subject: [PATCH 2/4] Fix "id" field --- docs/Accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Accessibility.md b/docs/Accessibility.md index 2c66b70c221f14..6b38db86bc7380 100644 --- a/docs/Accessibility.md +++ b/docs/Accessibility.md @@ -1,5 +1,5 @@ --- -id: accesibility +id: accessibility title: Accessibility layout: docs category: Guides From 4879d141a00130906199e14ebf1ee26e1f417fea Mon Sep 17 00:00:00 2001 From: Alexsander Akers Date: Tue, 23 Jun 2015 17:26:46 -0400 Subject: [PATCH 3/4] Code review from @brentvatne --- docs/Accessibility.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/Accessibility.md b/docs/Accessibility.md index 6b38db86bc7380..d40ba761f38fb6 100644 --- a/docs/Accessibility.md +++ b/docs/Accessibility.md @@ -17,20 +17,21 @@ Accessibility on iOS encompasses many topics, but for many, accessibility is syn #### accessible -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. +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. #### accessibilityLabel 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, simply set the `accessibilityLabel` property to a custom string on your View: +To use, set the `accessibilityLabel` property to a custom string on your View: ```javascript Press me! -``` + +``` 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. From d01dc1d47ef0cbe9be4d4ca770a07556033d824e Mon Sep 17 00:00:00 2001 From: Alexsander Akers Date: Thu, 25 Jun 2015 11:02:34 -0400 Subject: [PATCH 4/4] Note that magic tap traverses up the view hierarchy --- docs/Accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Accessibility.md b/docs/Accessibility.md index d40ba761f38fb6..891c931fbbcc31 100644 --- a/docs/Accessibility.md +++ b/docs/Accessibility.md @@ -65,7 +65,7 @@ Use this property to assign a custom function to be called when someone activate #### onMagicTap -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. +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. ### Testing VoiceOver Support