mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
88a3e2ce7b
Deploy website version based on b81ed90c7ce2633d662910690d0d850d0d3013b1
333 lines
73 KiB
HTML
333 lines
73 KiB
HTML
<!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="Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS."/><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://reactnative.dev/"/><meta property="og:description" content="Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS."/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><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://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/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://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script type="text/javascript" src="/js/announcement.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/next/getting-started" target="_self">Docs</a></li><li class=""><a href="/docs/next/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/next/accessibilityinfo" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/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></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Inclusion</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">The Basics<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/getting-started">Introduction</a></li><li class="navListItem"><a class="navItem" href="/docs/next/intro-react-native-components">Core Components and Native Components</a></li><li class="navListItem"><a class="navItem" href="/docs/next/intro-react">React Fundamentals</a></li><li class="navListItem"><a class="navItem" href="/docs/next/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/next/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/next/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/next/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/next/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/next/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Environment setup<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/environment-setup">Setting up the development environment</a></li><li class="navListItem"><a class="navItem" href="/docs/next/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/next/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/next/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Workflow<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/next/fast-refresh">Fast Refresh</a></li><li class="navListItem"><a class="navItem" href="/docs/next/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/next/symbolication">Symbolicating a stack trace</a></li><li class="navListItem"><a class="navItem" href="/docs/next/testing-overview">Testing</a></li><li class="navListItem"><a class="navItem" href="/docs/next/libraries">Using Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/next/typescript">Using TypeScript</a></li><li class="navListItem"><a class="navItem" href="/docs/next/upgrading">Upgrading to new versions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Design<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/next/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/next/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/next/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/next/colors">Color Reference</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Interaction<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/next/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/next/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/next/gesture-responder-system">Gesture Responder System</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Inclusion<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem navListItemActive"><a class="navItem" href="/docs/next/accessibility">Accessibility</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Performance<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/performance">Performance Overview</a></li><li class="navListItem"><a class="navItem" href="/docs/next/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/next/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="navListItem"><a class="navItem" href="/docs/next/profiling">Profiling</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">JavaScript Runtime<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/next/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/next/hermes">Using Hermes</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Connectivity<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/next/security">Security</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Native Components and Modules<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/native-modules-setup">Native Modules Setup</a></li><li class="navListItem"><a class="navItem" href="/docs/next/direct-manipulation">Direct Manipulation</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (Android)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/next/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/next/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/next/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/next/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (iOS)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/next/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/next/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/next/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/next/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/next/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/next/app-extensions">App Extensions</a></li><li class="navListItem"><a class="navItem" href="/docs/next/publishing-to-app-store">Publishing to Apple App Store</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
var headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
var el = event.target;
|
||
while(el !== headings){
|
||
if (el.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
break;
|
||
} else{
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
}, 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 docsContainer"><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 id="__docusaurus" class="postHeaderTitle">Accessibility</h1></header><article><div><span><p>Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and TalkBack (Android). React Native has complementary APIs that let your app accommodate all users.</p>
|
||
<blockquote>
|
||
<p>Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||
</blockquote>
|
||
<h2><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</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessible"></a><a href="#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><code>accessible</code></h3>
|
||
<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-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">text one</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">text two</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></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>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilitylabel"></a><a href="#accessibilitylabel" 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><code>accessibilityLabel</code></h3>
|
||
<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-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableOpacity</span></span>
|
||
<span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Tap me!<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onPress<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
|
||
</code></pre>
|
||
<p>In the above example, the <code>accessibilityLabel</code> on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilityhint"></a><a href="#accessibilityhint" 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><code>accessibilityHint</code></h3>
|
||
<p>An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear 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-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableOpacity</span></span>
|
||
<span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Go back<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">accessibilityHint</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigates to the previous screen<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onPress<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Back</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></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>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilityignoresinvertcolors"></a><a href="#accessibilityignoresinvertcolors" 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><code>accessibilityIgnoresInvertColors</code> <div class="label ios">iOS</div></h3>
|
||
<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>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilityliveregion"></a><a href="#accessibilityliveregion" 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><code>accessibilityLiveRegion</code> <div class="label android">Android</div></h3>
|
||
<p>When components dynamically change, we want TalkBack to alert the end user. This is made possible by the <code>accessibilityLiveRegion</code> property. It can be set to <code>none</code>, <code>polite</code> and <code>assertive</code>:</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-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableWithoutFeedback</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>addOne<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>embedded<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Click me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableWithoutFeedback</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">accessibilityLiveRegion</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>polite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Clicked </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> times
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||
</code></pre>
|
||
<p>In the above example method <code>addOne</code> changes the state variable <code>count</code>. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its <code>accessibilityLiveRegion="polite"</code> property.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilityrole"></a><a href="#accessibilityrole" 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><code>accessibilityRole</code></h3>
|
||
<p><code>accessibilityRole</code> communicates the purpose of a component to the user of an assistive technology.</p>
|
||
<p><code>accessibilityRole</code> can be one of the following:</p>
|
||
<ul>
|
||
<li><strong>adjustable</strong> Used when an element can be "adjusted" (e.g. a slider).</li>
|
||
<li><strong>alert</strong> Used when an element contains important text to be presented to the user.</li>
|
||
<li><strong>button</strong> Used when the element should be treated as a button.</li>
|
||
<li><strong>checkbox</strong> Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.</li>
|
||
<li><strong>combobox</strong> Used when an element represents a combo box, which allows the user to select among several choices.</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>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
|
||
<li><strong>imagebutton</strong> Used when the element should be treated as a button and is also an image.</li>
|
||
<li><strong>keyboardkey</strong> Used when the element acts as a keyboard key.</li>
|
||
<li><strong>link</strong> Used when the element should be treated as a link.</li>
|
||
<li><strong>menu</strong> Used when the component is a menu of choices.</li>
|
||
<li><strong>menubar</strong> Used when a component is a container of multiple menus.</li>
|
||
<li><strong>menuitem</strong> Used to represent an item within a menu.</li>
|
||
<li><strong>none</strong> Used when the element has no role.</li>
|
||
<li><strong>progressbar</strong> Used to represent a component which indicates progress of a task.</li>
|
||
<li><strong>radio</strong> Used to represent a radio button.</li>
|
||
<li><strong>radiogroup</strong> Used to represent a group of radio buttons.</li>
|
||
<li><strong>scrollbar</strong> Used to represent a scroll bar.</li>
|
||
<li><strong>search</strong> Used when the text field element should also be treated as a search field.</li>
|
||
<li><strong>spinbutton</strong> Used to represent a button which opens a list of choices.</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>
|
||
<li><strong>switch</strong> Used to represent a switch which can be turned on and off.</li>
|
||
<li><strong>tab</strong> Used to represent a tab.</li>
|
||
<li><strong>tablist</strong> Used to represent a list of tabs.</li>
|
||
<li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li>
|
||
<li><strong>timer</strong> Used to represent a timer.</li>
|
||
<li><strong>toolbar</strong> Used to represent a tool bar (a container of action buttons or components).</li>
|
||
</ul>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilitystate"></a><a href="#accessibilitystate" 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><code>accessibilityState</code></h3>
|
||
<p>Describes the current state of a component to the user of an assistive technology.</p>
|
||
<p><code>accessibilityState</code> is an object. It contains the following fields:</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Description</th><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>disabled</td><td>Indicates whether the element is disabled or not.</td><td>boolean</td><td>No</td></tr>
|
||
<tr><td>selected</td><td>Indicates whether a selectable element is currently selected or not.</td><td>boolean</td><td>No</td></tr>
|
||
<tr><td>checked</td><td>Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.</td><td>boolean or 'mixed'</td><td>No</td></tr>
|
||
<tr><td>busy</td><td>Indicates whether an element is currently busy or not.</td><td>boolean</td><td>No</td></tr>
|
||
<tr><td>expanded</td><td>Indicates whether an expandable element is currently expanded or collapsed.</td><td>boolean</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>To use, set the <code>accessibilityState</code> to an object with a specific definition.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilityvalue"></a><a href="#accessibilityvalue" 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><code>accessibilityValue</code></h3>
|
||
<p>Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).</p>
|
||
<p><code>accessibilityValue</code> is an object. It contains the following fields:</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Description</th><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>min</td><td>The minimum value of this component's range.</td><td>integer</td><td>Required if <code>now</code> is set.</td></tr>
|
||
<tr><td>max</td><td>The maximum value of this component's range.</td><td>integer</td><td>Required if <code>now</code> is set.</td></tr>
|
||
<tr><td>now</td><td>The current value of this component's range.</td><td>integer</td><td>No</td></tr>
|
||
<tr><td>text</td><td>A textual description of this component's value. Will override <code>min</code>, <code>now</code>, and <code>max</code> if set.</td><td>string</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilityviewismodal"></a><a href="#accessibilityviewismodal" 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><code>accessibilityViewIsModal</code> <div class="label ios">iOS</div></h3>
|
||
<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>
|
||
<h3><a class="anchor" aria-hidden="true" id="accessibilityelementshidden"></a><a href="#accessibilityelementshidden" 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><code>accessibilityElementsHidden</code> <div class="label ios">iOS</div></h3>
|
||
<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="no-hide-descendants"</code>.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="importantforaccessibility"></a><a href="#importantforaccessibility" 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><code>importantForAccessibility</code> <div class="label android">Android</div></h3>
|
||
<p>In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The <code>importantForAccessibility</code> 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 <code>auto</code>, <code>yes</code>, <code>no</code> and <code>no-hide-descendants</code> (the last value will force accessibility services to ignore the component and all of its children).</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span>
|
||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'green'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">First layout</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span>
|
||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no-hide-descendants<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Second layout</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</code></pre>
|
||
<p>In the above example, the <code>yellow</code> layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="onaccessibilityescape"></a><a href="#onaccessibilityescape" 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><code>onAccessibilityEscape</code> <div class="label ios">iOS</div></h3>
|
||
<p>Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an <code>onAccessibilityEscape</code> function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="onaccessibilitytap"></a><a href="#onaccessibilitytap" 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><code>onAccessibilityTap</code></h3>
|
||
<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>
|
||
<h3><a class="anchor" aria-hidden="true" id="onmagictap"></a><a href="#onmagictap" 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><code>onMagicTap</code> <div class="label ios">iOS</div></h3>
|
||
<p>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 <code>onMagicTap</code> function, the system will traverse up the view hierarchy until it finds a view that does.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="accessibility-actions"></a><a href="#accessibility-actions" 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 Actions</h2>
|
||
<p>Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:</p>
|
||
<ul>
|
||
<li>Define the list of actions it supports via the <code>accessibilityActions</code> property.</li>
|
||
<li>Implement an <code>onAccessibilityAction</code> function to handle action requests.</li>
|
||
</ul>
|
||
<p>The <code>accessibilityActions</code> property should contain a list of action objects. Each action object should contain the following fields:</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>name</td><td>string</td><td>Yes</td></tr>
|
||
<tr><td>label</td><td>string</td><td>No</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Actions either represent standard actions, such as clicking a button or adjusting a slider, or custom actions specific to a given component such as deleting an email message. The <code>name</code> field is required for both standard and custom actions, but <code>label</code> is optional for standard actions.</p>
|
||
<p>When adding support for standard actions, <code>name</code> must be one of the following:</p>
|
||
<ul>
|
||
<li><code>'magicTap'</code> - iOS only - While VoiceOver focus is on or inside the component, the user double tapped with two fingers.</li>
|
||
<li><code>'escape'</code> - iOS only - While VoiceOver focus is on or inside the component, the user performed a two finger scrub gesture (left, right, left).</li>
|
||
<li><code>'activate'</code> - Activate the component. Typically this should perform the same action as when the user touches or clicks the component when not using an assistive technology. This is generated when a screen reader user double taps the component.</li>
|
||
<li><code>'increment'</code> - Increment an adjustable component. On iOS, VoiceOver generates this action when the component has a role of <code>'adjustable'</code> and the user places focus on it and swipes upward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume up button.</li>
|
||
<li><code>'decrement'</code> - Decrement an adjustable component. On iOS, VoiceOver generates this action when the component has a role of <code>'adjustable'</code> and the user places focus on it and swipes downward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume down button.</li>
|
||
<li><code>'longpress'</code> - Android only - This action is generated when the user places accessibility focus on the component and double tap and holds one finger on the screen. Typically, this should perform the same action as when the user holds down one finger on the component while not using an assistive technology.</li>
|
||
</ul>
|
||
<p>The <code>label</code> field is optional for standard actions, and is often unused by assistive technologies. For custom actions, it is a localized string containing a description of the action to be presented to the user.</p>
|
||
<p>To handle action requests, a component must implement an <code>onAccessibilityAction</code> function. The only argument to this function is an event containing the name of the action to perform. The below example from RNTester shows how to create a component which defines and handles several custom actions.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span>
|
||
<span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">accessibilityActions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'cut'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'cut'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'copy'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'copy'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'paste'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'paste'</span> <span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onAccessibilityAction</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>actionName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">case</span> <span class="token string">'cut'</span><span class="token operator">:</span>
|
||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'cut action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">case</span> <span class="token string">'copy'</span><span class="token operator">:</span>
|
||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'copy action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">case</span> <span class="token string">'paste'</span><span class="token operator">:</span>
|
||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'paste action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
</code></pre>
|
||
<h2><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</h2>
|
||
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="sending-accessibility-events"></a><a href="#sending-accessibility-events" 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 <div class="label android">Android</div></h2>
|
||
<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 set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are <code>typeWindowStateChanged</code>, <code>typeViewFocused</code> and <code>typeViewClicked</code>.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||
Platform<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>
|
||
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'android'</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>typeViewFocused
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="testing-talkback-support"></a><a href="#testing-talkback-support" 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 TalkBack Support <div class="label android">Android</div></h2>
|
||
<p>To enable TalkBack, go to the Settings app on your Android device or emulator. Tap Accessibility, then TalkBack. Toggle the "Use service" switch to enable or disable it.</p>
|
||
<p>P.S. Android emulator doesn’t have TalkBack by default. To install it:</p>
|
||
<ol>
|
||
<li>Download TalkBack file here: <a href="https://google-talkback.en.uptodown.com/android">https://google-talkback.en.uptodown.com/android</a></li>
|
||
<li>Drag the downloaded <code>.apk</code> file into the emulator</li>
|
||
</ol>
|
||
<p>You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.</p>
|
||
<p>To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.</p>
|
||
<p>Additionally, if you prefer, you can toggle TalkBack via command line with:</p>
|
||
<pre><code class="hljs css language-sh"><span class="token comment"># disable</span>
|
||
adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
|
||
|
||
<span class="token comment"># enable</span>
|
||
adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="testing-voiceover-support"></a><a href="#testing-voiceover-support" 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 <div class="label ios">iOS</div></h2>
|
||
<p>To enable VoiceOver, go to the Settings app on your iOS device (it's not available for simulator). 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 "Vision" and toggle the switch that appears at the top.</p>
|
||
<p>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.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="additional-resources"></a><a href="#additional-resources" 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>Additional Resources</h2>
|
||
<ul>
|
||
<li><a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">Making React Native Apps Accessible</a></li>
|
||
</ul>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/gesture-responder-system"><span class="arrow-prev">← </span><span>Gesture Responder System</span></a><a class="docs-next button" href="/docs/next/performance"><span>Performance Overview</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a><ul class="toc-headings"><li><a href="#accessible"><code>accessible</code></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#accessibilityhint"><code>accessibilityHint</code></a></li><li><a href="#accessibilityignoresinvertcolors"><code>accessibilityIgnoresInvertColors</code> <div class="label ios">iOS</div></a></li><li><a href="#accessibilityliveregion"><code>accessibilityLiveRegion</code> <div class="label android">Android</div></a></li><li><a href="#accessibilityrole"><code>accessibilityRole</code></a></li><li><a href="#accessibilitystate"><code>accessibilityState</code></a></li><li><a href="#accessibilityvalue"><code>accessibilityValue</code></a></li><li><a href="#accessibilityviewismodal"><code>accessibilityViewIsModal</code> <div class="label ios">iOS</div></a></li><li><a href="#accessibilityelementshidden"><code>accessibilityElementsHidden</code> <div class="label ios">iOS</div></a></li><li><a href="#importantforaccessibility"><code>importantForAccessibility</code> <div class="label android">Android</div></a></li><li><a href="#onaccessibilityescape"><code>onAccessibilityEscape</code> <div class="label ios">iOS</div></a></li><li><a href="#onaccessibilitytap"><code>onAccessibilityTap</code></a></li><li><a href="#onmagictap"><code>onMagicTap</code> <div class="label ios">iOS</div></a></li></ul></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events">Sending Accessibility Events <div class="label android">Android</div></a></li><li><a href="#testing-talkback-support">Testing TalkBack Support <div class="label android">Android</div></a></li><li><a href="#testing-voiceover-support">Testing VoiceOver Support <div class="label ios">iOS</div></a></li><li><a href="#additional-resources">Additional Resources</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/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="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 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>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["tags:next"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |