mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
47 lines
96 KiB
HTML
47 lines
96 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
|
||
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
||
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
||
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Accessibility · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Accessibility · React Native"><meta data-react-helmet="true" 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 data-react-helmet="true" 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 data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/accessibility"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/accessibility"><link rel="stylesheet" href="/styles.654d26b0.css">
|
||
<link rel="stylesheet" href="/main.c541a094.css">
|
||
<link rel="preload" href="/styles.cc2cf098.js" as="script">
|
||
<link rel="preload" href="/runtime~main.4e76c8f1.js" as="script">
|
||
<link rel="preload" href="/main.259a8b48.js" as="script">
|
||
<link rel="preload" href="/1.55a8a1b3.js" as="script">
|
||
<link rel="preload" href="/2.8585ac8b.js" as="script">
|
||
<link rel="preload" href="/1f391b9e.8301d553.js" as="script">
|
||
<link rel="preload" href="/939.3c971b89.js" as="script">
|
||
<link rel="preload" href="/ee5b3385.4adebc95.js" as="script">
|
||
<link rel="preload" href="/17896441.6dff1a67.js" as="script">
|
||
<link rel="preload" href="/07bdfcc3.b0fed09c.js" as="script">
|
||
</head>
|
||
<body>
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/accessibility">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/accessibility">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/accessibility">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/accessibility">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/accessibility">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/accessibility">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/accessibility">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/accessibility">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/accessibility">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/accessibility">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/upgrading">Upgrading to new React Native versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/profiling">Profiling</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/removing-default-permissions">Removing Default Permissions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/app-extensions">App Extensions</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Accessibility</h1></header><div class="markdown"><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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibility-properties"></a>Accessibility properties<a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibility-properties" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessible"></a><code>accessible</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessible" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessible</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript boolean" style="color:#ff8b50">true</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">text one</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">text two</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div></div></div><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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilitylabel"></a><code>accessibilityLabel</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilitylabel" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessible</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript boolean" style="color:#ff8b50">true</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessibilityLabel</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Tap me!</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">onPress</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">button</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">buttonText</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Press me</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div></div></div><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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilityhint"></a><code>accessibilityHint</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilityhint" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessible</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript boolean" style="color:#ff8b50">true</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessibilityLabel</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Go back</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessibilityHint</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Navigates to the previous screen</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">onPress</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">button</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">buttonText</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Back</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div></div></div><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" target="_blank" rel="noopener noreferrer">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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilityignoresinvertcolors-ios"></a><code>accessibilityIgnoresInvertColors</code> <div class="label ios">iOS</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilityignoresinvertcolors-ios" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilityliveregion-android"></a><code>accessibilityLiveRegion</code> <div class="label android">Android</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilityliveregion-android" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">TouchableWithoutFeedback</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">addOne</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">embedded</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Click me</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">TouchableWithoutFeedback</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessibilityLiveRegion</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">polite</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Clicked </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">count</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> times</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div></div></div><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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilityrole"></a><code>accessibilityRole</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilityrole" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilitystate"></a><code>accessibilityState</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilitystate" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilityvalue"></a><code>accessibilityValue</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilityvalue" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilityviewismodal-ios"></a><code>accessibilityViewIsModal</code> <div class="label ios">iOS</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilityviewismodal-ios" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibilityelementshidden-ios"></a><code>accessibilityElementsHidden</code> <div class="label ios">iOS</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibilityelementshidden-ios" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="importantforaccessibility-android"></a><code>importantForAccessibility</code> <div class="label android">Android</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#importantforaccessibility-android" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">container</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">layout</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> backgroundColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'green'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">importantForAccessibility</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">yes</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">First layout</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">layout</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> backgroundColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'yellow'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">importantForAccessibility</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">no-hide-descendants</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Second layout</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div></div></div><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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="onaccessibilityescape-ios"></a><code>onAccessibilityEscape</code> <div class="label ios">iOS</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#onaccessibilityescape-ios" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="onaccessibilitytap"></a><code>onAccessibilityTap</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#onaccessibilitytap" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="onmagictap-ios"></a><code>onMagicTap</code> <div class="label ios">iOS</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#onmagictap-ios" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessibility-actions"></a>Accessibility Actions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessibility-actions" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessible</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript boolean" style="color:#ff8b50">true</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">accessibilityActions</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> name</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'cut'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> label</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'cut'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> name</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'copy'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> label</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'copy'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> name</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'paste'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> label</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'paste'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onAccessibilityAction</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript parameter" style="color:#fc929e">event</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">switch</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript" style="color:#fc929e">event</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">nativeEvent</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">actionName</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">case</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'cut'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> Alert</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">alert</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript string" style="color:#8dc891">'Alert'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'cut action success'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">;</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">break</span><span class="token tag script language-javascript punctuation" style="color:#657b83">;</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">case</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'copy'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> Alert</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">alert</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript string" style="color:#8dc891">'Alert'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'copy action success'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">;</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">break</span><span class="token tag script language-javascript punctuation" style="color:#657b83">;</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">case</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'paste'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> Alert</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">alert</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript string" style="color:#8dc891">'Alert'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'paste action success'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">;</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">break</span><span class="token tag script language-javascript punctuation" style="color:#657b83">;</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"></span><span class="token tag punctuation" style="color:#657b83">/></span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="checking-if-a-screen-reader-is-enabled"></a>Checking if a Screen Reader is Enabled<a aria-hidden="true" tabindex="-1" class="hash-link" href="#checking-if-a-screen-reader-is-enabled" title="Direct link to heading">#</a></h2><p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/docs/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="sending-accessibility-events-android"></a>Sending Accessibility Events <div class="label android">Android</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sending-accessibility-events-android" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Platform</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> UIManager</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> findNodeHandle</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">Platform</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">OS</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">===</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'android'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> UIManager</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">sendAccessibilityEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">findNodeHandle</span><span class="token punctuation" style="color:#657b83">(</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> UIManager</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">AccessibilityEventTypes</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">typeViewFocused</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="testing-talkback-support-android"></a>Testing TalkBack Support <div class="label android">Android</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#testing-talkback-support-android" title="Direct link to heading">#</a></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" target="_blank" rel="noopener noreferrer">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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"># disable</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1"># enable</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="testing-voiceover-support-ios"></a>Testing VoiceOver Support <div class="label ios">iOS</div><a aria-hidden="true" tabindex="-1" class="hash-link" href="#testing-voiceover-support-ios" title="Direct link to heading">#</a></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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="additional-resources"></a>Additional Resources<a aria-hidden="true" tabindex="-1" class="hash-link" href="#additional-resources" title="Direct link to heading">#</a></h2><ul><li><a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/" target="_blank" rel="noopener noreferrer">Making React Native Apps Accessible</a></li></ul></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.63/accessibility.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/gesture-responder-system"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Gesture Responder System</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/performance"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Performance Overview »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#accessibility-properties" class="table-of-contents__link">Accessibility properties</a><ul><li><a href="#accessible" class="table-of-contents__link"><code>accessible</code></a></li><li><a href="#accessibilitylabel" class="table-of-contents__link"><code>accessibilityLabel</code></a></li><li><a href="#accessibilityhint" class="table-of-contents__link"><code>accessibilityHint</code></a></li><li><a href="#accessibilityignoresinvertcolors-ios" class="table-of-contents__link"><code>accessibilityIgnoresInvertColors</code> <div class="label ios">iOS</div></a></li><li><a href="#accessibilityliveregion-android" class="table-of-contents__link"><code>accessibilityLiveRegion</code> <div class="label android">Android</div></a></li><li><a href="#accessibilityrole" class="table-of-contents__link"><code>accessibilityRole</code></a></li><li><a href="#accessibilitystate" class="table-of-contents__link"><code>accessibilityState</code></a></li><li><a href="#accessibilityvalue" class="table-of-contents__link"><code>accessibilityValue</code></a></li><li><a href="#accessibilityviewismodal-ios" class="table-of-contents__link"><code>accessibilityViewIsModal</code> <div class="label ios">iOS</div></a></li><li><a href="#accessibilityelementshidden-ios" class="table-of-contents__link"><code>accessibilityElementsHidden</code> <div class="label ios">iOS</div></a></li><li><a href="#importantforaccessibility-android" class="table-of-contents__link"><code>importantForAccessibility</code> <div class="label android">Android</div></a></li><li><a href="#onaccessibilityescape-ios" class="table-of-contents__link"><code>onAccessibilityEscape</code> <div class="label ios">iOS</div></a></li><li><a href="#onaccessibilitytap" class="table-of-contents__link"><code>onAccessibilityTap</code></a></li><li><a href="#onmagictap-ios" class="table-of-contents__link"><code>onMagicTap</code> <div class="label ios">iOS</div></a></li></ul></li><li><a href="#accessibility-actions" class="table-of-contents__link">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled" class="table-of-contents__link">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android" class="table-of-contents__link">Sending Accessibility Events <div class="label android">Android</div></a></li><li><a href="#testing-talkback-support-android" class="table-of-contents__link">Testing TalkBack Support <div class="label android">Android</div></a></li><li><a href="#testing-voiceover-support-ios" class="table-of-contents__link">Testing VoiceOver Support <div class="label ios">iOS</div></a></li><li><a href="#additional-resources" class="table-of-contents__link">Additional Resources</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
|
||
<script src="/styles.cc2cf098.js"></script>
|
||
<script src="/runtime~main.4e76c8f1.js"></script>
|
||
<script src="/main.259a8b48.js"></script>
|
||
<script src="/1.55a8a1b3.js"></script>
|
||
<script src="/2.8585ac8b.js"></script>
|
||
<script src="/1f391b9e.8301d553.js"></script>
|
||
<script src="/939.3c971b89.js"></script>
|
||
<script src="/ee5b3385.4adebc95.js"></script>
|
||
<script src="/17896441.6dff1a67.js"></script>
|
||
<script src="/07bdfcc3.b0fed09c.js"></script>
|
||
</body>
|
||
</html> |