Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
f45339ccf31b0f35bc99a8f154fc4d75c939b190
react-native/docs/next/accessibility.html
T
Website Deployment Script f45339ccf3 Deploy website 
Deploy website version based on ae160480a84bbc1caff4506c2720965159b3044f
2019-01-04 09:08:24 +00:00

226 lines
63 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native/docs/next/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Guides</span></h2></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">The Basics</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/props">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/state">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/style">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/images">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/animations">Animations</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native/docs/next/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/building-for-apple-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-modules-setup">Native Modules Setup</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides (iOS)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/app-extensions">App Extensions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides (Android)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/signed-apk-android">Generating Signed APK</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/contributing">How to Contribute</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/maintainers">What to Expect from Maintainers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/building-from-source">Building React Native from source</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/testing">Testing your Changes</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/understanding-cli">Understanding the CLI</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Components</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/button">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/flatlist">FlatList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/image">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/imagebackground">ImageBackground</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/inputaccessoryview">InputAccessoryView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/listview">ListView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/maskedviewios">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/safeareaview">SafeAreaView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/sectionlist">SectionList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/text">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/view">View</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/virtualizedlist">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/webview">WebView</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">APIs</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/next/accessibilityinfo">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/alertios">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/backandroid">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/backhandler">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/listviewdatasource">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/share">Share</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/next/view-style-props">View Style Props</a></li></ul></div></div></section></div><script>
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
<p>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.</p>
<p>In addition to this documentation, you might find <a href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
<h4><a class="anchor" aria-hidden="true" id="accessible-ios-android"></a><a href="#accessible-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessible (iOS, Android)</h4>
<p>When <code>true</code>, 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.</p>
<p>On Android, <code>accessible={true}</code> property for a react-native View will be translated into native <code>focusable={true}</code>.</p>
<pre><code class="hljs css language-javascript"><span class="token operator">&lt;</span>View accessible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Text<span class="token operator">></span>text one<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span>Text<span class="token operator">></span>text two<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
</code></pre>
<p>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.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilitylabel-ios-android"></a><a href="#accessibilitylabel-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityLabel (iOS, Android)</h4>
<p>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.</p>
<p>To use, set the <code>accessibilityLabel</code> property to a custom string on your View, Text or Touchable:</p>
<pre><code class="hljs css language-javascript"><span class="token operator">&lt;</span>TouchableOpacity
accessible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
accessibilityLabel<span class="token operator">=</span><span class="token string">"Tap me!"</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">></span>Press me<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableOpacity<span class="token operator">></span>
</code></pre>
<p>In the above example, the <code>accessibilityLabel</code> on the TouchableOpacity element would default to &quot;Press me!&quot;. The label is constructed by concatenating all Text node children separated by spaces.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilityhint-ios-android"></a><a href="#accessibilityhint-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityHint (iOS, Android)</h4>
<p>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.</p>
<p>To use, set the <code>accessibilityHint</code> property to a custom string on your View, Text or Touchable:</p>
<pre><code class="hljs css language-javascript"><span class="token operator">&lt;</span>TouchableOpacity
accessible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
accessibilityLabel<span class="token operator">=</span><span class="token string">"Go back"</span>
accessibilityHint<span class="token operator">=</span><span class="token string">"Navigates to the previous screen"</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">></span>Back<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableOpacity<span class="token operator">></span>
</code></pre>
<p>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 <a href="https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint">iOS Developer Docs</a></p>
<p>Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilityignoresinvertcolorsios"></a><a href="#accessibilityignoresinvertcolorsios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityIgnoresInvertColors(iOS)</h4>
<p>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.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilityrole-ios-android"></a><a href="#accessibilityrole-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityRole (iOS, Android)</h4>
<blockquote>
<p><strong>Note:</strong> Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
</blockquote>
<p>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 <code>accessibilityRole</code> property to one of the following strings:</p>
<ul>
<li><strong>none</strong> Used when the element has no role.</li>
<li><strong>button</strong> Used when the element should be treated as a button.</li>
<li><strong>link</strong> Used when the element should be treated as a link.</li>
<li><strong>search</strong> Used when the text field element should also be treated as a search field.</li>
<li><strong>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
<li><strong>keyboardkey</strong> Used when the element acts as a keyboard key.</li>
<li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li>
<li><strong>adjustable</strong> Used when an element can be &quot;adjusted&quot; (e.g. a slider).</li>
<li><strong>imagebutton</strong> Used when the element should be treated as a button and is also an image.</li>
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
</ul>
<h4><a class="anchor" aria-hidden="true" id="accessibilitystates-ios-android"></a><a href="#accessibilitystates-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityStates (iOS, Android)</h4>
<blockquote>
<p><strong>Note:</strong> &gt; <code>accessibilityRole</code> and <code>accessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
</blockquote>
<p>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 <code>selected</code> or <code>disabled</code> or both:</p>
<ul>
<li><strong>selected</strong> Used when the element is in a selected state. For example, a button is selected.</li>
<li><strong>disabled</strong> Used when the element is disabled and cannot be interacted with.</li>
</ul>
<p>To use, set the <code>accessibilityStates</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilitytraits-ios"></a><a href="#accessibilitytraits-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityTraits (iOS)</h4>
<blockquote>
<p><strong>Note:</strong> <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
</blockquote>
<p>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 <code>accessibilityTraits</code>.</p>
<p>To use, set the <code>accessibilityTraits</code> property to one of (or an array of) accessibility trait strings:</p>
<ul>
<li><strong>none</strong> Used when the element has no traits.</li>
<li><strong>button</strong> Used when the element should be treated as a button.</li>
<li><strong>link</strong> Used when the element should be treated as a link.</li>
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
<li><strong>search</strong> Used when the text field element should also be treated as a search field.</li>
<li><strong>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
<li><strong>selected</strong> Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.</li>
<li><strong>plays</strong> Used when the element plays its own sound when activated.</li>
<li><strong>key</strong> Used when the element acts as a keyboard key.</li>
<li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li>
<li><strong>summary</strong> 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.</li>
<li><strong>disabled</strong> Used when the control is not enabled and does not respond to user input.</li>
<li><strong>frequentUpdates</strong> 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.</li>
<li><strong>startsMedia</strong> 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.</li>
<li><strong>adjustable</strong> Used when an element can be &quot;adjusted&quot; (e.g. a slider).</li>
<li><strong>allowsDirectInteraction</strong> Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).</li>
<li><strong>pageTurn</strong> Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li>
</ul>
<h4><a class="anchor" aria-hidden="true" id="accessibilityviewismodal-ios"></a><a href="#accessibilityviewismodal-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityViewIsModal (iOS)</h4>
<p>A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.</p>
<p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in the view <code>A</code>. On the other hand, if view <code>B</code> contains a child view <code>C</code> and you set <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>C</code>, VoiceOver does not ignore the elements in view <code>A</code>.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilityelementshidden-ios"></a><a href="#accessibilityelementshidden-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityElementsHidden (iOS)</h4>
<p>A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.</p>
<p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>accessibilityElementsHidden</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in the view <code>B</code>. This is similar to the Android property <code>importantForAccessibility=&quot;no-hide-descendants&quot;</code>.</p>
<h4><a class="anchor" aria-hidden="true" id="onaccessibilitytap-ios"></a><a href="#onaccessibilitytap-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>onAccessibilityTap (iOS)</h4>
<p>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.</p>
<h4><a class="anchor" aria-hidden="true" id="onmagictap-ios"></a><a href="#onmagictap-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>onMagicTap (iOS)</h4>
<p>Assign this property to a custom function which will be called when someone performs the &quot;magic tap&quot; 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 <code>onMagicTap</code> function, the system will traverse up the view hierarchy until it finds a view that does.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilitycomponenttype-android"></a><a href="#accessibilitycomponenttype-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityComponentType (Android)</h4>
<blockquote>
<p><strong>Note:</strong> &gt; <code>accessibilityComponentType</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
</blockquote>
<p>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’.</p>
<pre><code class="hljs css language-javascript"><span class="token operator">&lt;</span>TouchableWithoutFeedback accessibilityComponentType<span class="token operator">=</span>”button”
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">></span>Press me<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></span>
</code></pre>
<p>In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.</p>
<h4><a class="anchor" aria-hidden="true" id="accessibilityliveregion-android"></a><a href="#accessibilityliveregion-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityLiveRegion (Android)</h4>
<p>When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:</p>
<ul>
<li><strong>none</strong> Accessibility services should not announce changes to this view.</li>
<li><strong>polite</strong> Accessibility services should announce changes to this view.</li>
<li><strong>assertive</strong> Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li>
</ul>
<pre><code class="hljs css language-javascript"><span class="token operator">&lt;</span>TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_addOne<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>embedded<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Text<span class="token operator">></span>Click me<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></span>
<span class="token operator">&lt;</span>Text accessibilityLiveRegion<span class="token operator">=</span><span class="token string">"polite"</span><span class="token operator">></span>
Clicked <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token punctuation">}</span> times
<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
</code></pre>
<p>In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.</p>
<h4><a class="anchor" aria-hidden="true" id="importantforaccessibility-android"></a><a href="#importantforaccessibility-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>importantForAccessibility (Android)</h4>
<p>In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).</p>
<pre><code class="hljs css language-javascript"><span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>position<span class="token punctuation">:</span> <span class="token string">'absolute'</span><span class="token punctuation">,</span> left<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> top<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> right<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">'green'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> importantForAccessibility<span class="token operator">=</span>”yes”<span class="token operator">></span>
<span class="token operator">&lt;</span>Text<span class="token operator">></span> First layout <span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>position<span class="token punctuation">:</span> <span class="token string">'absolute'</span><span class="token punctuation">,</span> left<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> top<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> right<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">'yellow'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> importantForAccessibility<span class="token operator">=</span>”no<span class="token operator">-</span>hide<span class="token operator">-</span>descendants”<span class="token operator">></span>
<span class="token operator">&lt;</span>Text<span class="token operator">></span> Second layout <span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span>
</code></pre>
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.</p>
<h3><a class="anchor" aria-hidden="true" id="checking-if-a-screen-reader-is-enabled"></a><a href="#checking-if-a-screen-reader-is-enabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Checking if a Screen Reader is Enabled</h3>
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/react-native/docs/next/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
<h3><a class="anchor" aria-hidden="true" id="sending-accessibility-events-android"></a><a href="#sending-accessibility-events-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sending Accessibility Events (Android)</h3>
<p>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.</p>
<pre><code class="hljs css language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> UIManager<span class="token punctuation">,</span> findNodeHandle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
_onPress<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> radioButton <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>radioButton <span class="token operator">===</span> <span class="token string">'radiobutton_checked'</span> <span class="token operator">?</span>
<span class="token string">'radiobutton_unchecked'</span> <span class="token punctuation">:</span> <span class="token string">'radiobutton_checked'</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
radioButton<span class="token punctuation">:</span> radioButton
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>radioButton <span class="token operator">===</span> <span class="token string">'radiobutton_checked'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
UIManager<span class="token punctuation">.</span><span class="token function">sendAccessibilityEvent</span><span class="token punctuation">(</span>
<span class="token function">findNodeHandle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
UIManager<span class="token punctuation">.</span>AccessibilityEventTypes<span class="token punctuation">.</span>typeViewClicked<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span>CustomRadioButton
accessibilityComponentType<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>radioButton<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p>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.</p>
<h2><a class="anchor" aria-hidden="true" id="testing-voiceover-support-ios"></a><a href="#testing-voiceover-support-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing VoiceOver Support (iOS)</h2>
<p>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 make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p>
<p>To enable VoiceOver, tap on VoiceOver under &quot;Vision&quot; and toggle the switch that appears at the top.</p>
<p>At the very bottom of the Accessibility settings, there is an &quot;Accessibility Shortcut&quot;. You can use this to toggle VoiceOver by triple clicking the Home button.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/next/animations">← Animations</a><a class="docs-next button" href="/react-native/docs/next/improvingux">Improving User Experience →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:next"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink