kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_accessibility.html
at main 127 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-accessibility" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Accessibility · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/accessibility><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Accessibility · React Native"><meta data-rh=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-rh=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."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/accessibility><link data-rh=true rel=alternate href=https://reactnative.dev/docs/accessibility hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/accessibility hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON 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=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/accessibility>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/accessibility>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/accessibility>0.79</a><li><a class=dropdown__link href=/docs/0.78/accessibility>0.78</a><li><a class=dropdown__link href=/docs/0.77/accessibility>0.77</a><li><a class=dropdown__link href=/docs/0.76/accessibility>0.76</a><li><a class=dropdown__link href=/docs/0.75/accessibility>0.75</a><li><a class=dropdown__link href=/docs/0.74/accessibility>0.74</a><li><a class=dropdown__link href=/docs/0.73/accessibility>0.73</a><li><a class=dropdown__link href=/docs/0.72/accessibility>0.72</a><li><a class=dropdown__link href=/docs/0.71/accessibility>0.71</a><li><a class=dropdown__link href=/docs/0.70/accessibility>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</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="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><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 /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/getting-started>The Basics</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/environment-setup>Environment setup</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/running-on-device>Workflow</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/style>UI & Interaction</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/style>Style</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/height-and-width>Height and Width</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/flexbox>Layout with Flexbox</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/images>Images</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/colors>Color Reference</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class=menu__link tabindex=0>Interaction</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/handling-touches>Handling Touches</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation>Navigating Between Screens</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/animations>Animations</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gesture-responder-system>Gesture Responder System</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class=menu__link tabindex=0>Connectivity</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/network>Networking</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/security>Security</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" tabindex=0>Inclusion</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/accessibility>Accessibility</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/debugging>Debugging</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/testing-overview>Testing</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/performance>Performance</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/javascript-environment>JavaScript Runtime</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/the-new-architecture/what-is-codegen>Codegen</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/native-platform>Native Development</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/headless-js-android>Android and iOS guides</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/legacy/native-modules-intro>Legacy Architecture</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Accessibility</h1></header><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> 5<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p>Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</div></div> 6<h2 class="anchor anchorWithStickyNavbar_JmGV" id=accessibility-properties>Accessibility properties<a href=#accessibility-properties class=hash-link aria-label="Direct link to Accessibility properties" title="Direct link to Accessibility properties">​</a></h2> 7<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessible><code>accessible</code><a href=#accessible class=hash-link aria-label="Direct link to accessible" title="Direct link to accessible">​</a></h3> 8<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> 9<p>On Android, <code>accessible={true}</code> property for a react-native View will be translated into native <code>focusable={true}</code>.</p> 10<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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">text one</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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">text two</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 11<p>In the above example, accessibility focus is only available on the parent view with the <code>accessible</code> property, and not individually for 'text one' and 'text two'.</p> 12<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitylabel><code>accessibilityLabel</code><a href=#accessibilitylabel class=hash-link aria-label="Direct link to accessibilitylabel" title="Direct link to accessibilitylabel">​</a></h3> 13<p>When a view is marked as accessible, it is a good practice to set an <code>accessibilityLabel</code> on the view, so that people who use VoiceOver or TalkBack know what element they have selected. A screen reader will verbalize this string when the associated element is selected.</p> 14<p>To use, set the <code>accessibilityLabel</code> property to a custom string on your View, Text, or Touchable:</p> 15<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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 attr-equals" 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><br></span><span class=token-line style=color:#FFFFFF><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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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 property-access" 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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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 property-access" 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-text">Press me!</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 16<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> 17<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitylabelledby-android><code>accessibilityLabelledBy</code> <div class="label android">Android</div><a href=#accessibilitylabelledby-android class=hash-link aria-label="Direct link to accessibilitylabelledby-android" title="Direct link to accessibilitylabelledby-android">​</a></h3> 18<p>A reference to another element <a href=/docs/view#nativeid>nativeID</a> used to build complex forms. 19The value of <code>accessibilityLabelledBy</code> should match the <code>nativeID</code> of the related element:</p> 20<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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>nativeID</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>formLabel</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-text">Label for Input Field</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TextInput</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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 attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>input</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>accessibilityLabelledBy</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>formLabel</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 21<p>In the above example, the screen reader announces <code>Input, Edit Box for Label for Input Field</code> when focusing on the TextInput.</p> 22<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityhint><code>accessibilityHint</code><a href=#accessibilityhint class=hash-link aria-label="Direct link to accessibilityhint" title="Direct link to accessibilityhint">​</a></h3> 23<p>An accessibility hint can be used to provide additional context to the user on the result of the action when it is not clear from the accessibility label alone.</p> 24<p>Provide the <code>accessibilityHint</code> property a custom string on your View, Text, or Touchable:</p> 25<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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 attr-equals" 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><br></span><span class=token-line style=color:#FFFFFF><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 attr-equals" 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><br></span><span class=token-line style=color:#FFFFFF><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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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 property-access" 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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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 property-access" 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-text">Back</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 26<div class="label ios basic">iOS</div> 27<p>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 <code>accessibilityHint</code> in the <a href=https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint target=_blank rel="noopener noreferrer">iOS Developer Docs</a></p> 28<div class="label android basic">Android</div> 29<p>In the above example, TalkBack will read the hint after the label. At this time, hints cannot be turned off on Android.</p> 30<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitylanguage-ios><code>accessibilityLanguage</code> <div class="label ios">iOS</div><a href=#accessibilitylanguage-ios class=hash-link aria-label="Direct link to accessibilitylanguage-ios" title="Direct link to accessibilitylanguage-ios">​</a></h3> 31<p>By using the <code>accessibilityLanguage</code> property, the screen reader will understand which language to use while reading the element's <strong>label</strong>, <strong>value</strong>, and <strong>hint</strong>. The provided string value must follow the <a href=https://www.rfc-editor.org/info/bcp47 target=_blank rel="noopener noreferrer">BCP 47 specification</a>.</p> 32<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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 attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>Pizza</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>accessibilityLanguage</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>it-IT</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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">🍕</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 33<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityignoresinvertcolors-ios><code>accessibilityIgnoresInvertColors</code> <div class="label ios">iOS</div><a href=#accessibilityignoresinvertcolors-ios class=hash-link aria-label="Direct link to accessibilityignoresinvertcolors-ios" title="Direct link to accessibilityignoresinvertcolors-ios">​</a></h3> 34<p>Inverting screen colors is an accessibility feature available in iOS and iPadOS for people with color blindness, low vision, or vision impairment. If there's a view you don't want to invert when this setting is on, possibly a photo, set this property to <code>true</code>.</p> 35<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityliveregion-android><code>accessibilityLiveRegion</code> <div class="label android">Android</div><a href=#accessibilityliveregion-android class=hash-link aria-label="Direct link to accessibilityliveregion-android" title="Direct link to accessibilityliveregion-android">​</a></h3> 36<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> 37<ul> 38<li><strong>none</strong> Accessibility services should not announce changes to this view.</li> 39<li><strong>polite</strong> Accessibility services should announce changes to this view.</li> 40<li><strong>assertive</strong> Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li> 41</ul> 42<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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 property-access" 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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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">Click me</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</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><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token tag punctuation" style=color:#657b83>&lt;</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 attr-equals" 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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> 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-text"> times</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 43<p>In the above example method <code>addOne</code> changes the state variable <code>count</code>. When the TouchableWithoutFeedback is triggered, TalkBack reads the text in the Text view because of its <code>accessibilityLiveRegion="polite"</code> property.</p> 44<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityrole><code>accessibilityRole</code><a href=#accessibilityrole class=hash-link aria-label="Direct link to accessibilityrole" title="Direct link to accessibilityrole">​</a></h3> 45<p><code>accessibilityRole</code> communicates the purpose of a component to the user of assistive technology.</p> 46<p><code>accessibilityRole</code> can be one of the following:</p> 47<ul> 48<li><strong>adjustable</strong> Used when an element can be "adjusted" (e.g. a slider).</li> 49<li><strong>alert</strong> Used when an element contains important text to be presented to the user.</li> 50<li><strong>button</strong> Used when the element should be treated as a button.</li> 51<li><strong>checkbox</strong> Used when an element represents a checkbox that can be checked, unchecked, or have a mixed checked state.</li> 52<li><strong>combobox</strong> Used when an element represents a combo box, which allows the user to select among several choices.</li> 53<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> 54<li><strong>image</strong> Used when the element should be treated as an image. Can be combined with a button or link.</li> 55<li><strong>imagebutton</strong> Used when the element should be treated as a button and is also an image.</li> 56<li><strong>keyboardkey</strong> Used when the element acts as a keyboard key.</li> 57<li><strong>link</strong> Used when the element should be treated as a link.</li> 58<li><strong>menu</strong> Used when the component is a menu of choices.</li> 59<li><strong>menubar</strong> Used when a component is a container of multiple menus.</li> 60<li><strong>menuitem</strong> Used to represent an item within a menu.</li> 61<li><strong>none</strong> Used when the element has no role.</li> 62<li><strong>progressbar</strong> Used to represent a component that indicates the progress of a task.</li> 63<li><strong>radio</strong> Used to represent a radio button.</li> 64<li><strong>radiogroup</strong> Used to represent a group of radio buttons.</li> 65<li><strong>scrollbar</strong> Used to represent a scroll bar.</li> 66<li><strong>search</strong> Used when a text field element should also be treated as a search field.</li> 67<li><strong>spinbutton</strong> Used to represent a button that opens a list of choices.</li> 68<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> 69<li><strong>switch</strong> Used to represent a switch that can be turned on and off.</li> 70<li><strong>tab</strong> Used to represent a tab.</li> 71<li><strong>tablist</strong> Used to represent a list of tabs.</li> 72<li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li> 73<li><strong>timer</strong> Used to represent a timer.</li> 74<li><strong>togglebutton</strong> Used to represent a toggle button. Should be used with accessibilityState checked to indicate if the button is toggled on or off.</li> 75<li><strong>toolbar</strong> Used to represent a toolbar (a container of action buttons or components).</li> 76<li><strong>grid</strong> Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to Android's GridView.</li> 77</ul> 78<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityshowslargecontentviewer-ios><code>accessibilityShowsLargeContentViewer</code> <div class="label ios">iOS</div><a href=#accessibilityshowslargecontentviewer-ios class=hash-link aria-label="Direct link to accessibilityshowslargecontentviewer-ios" title="Direct link to accessibilityshowslargecontentviewer-ios">​</a></h3> 79<p>A boolean value that determines whether the large content viewer is shown when the user performs a long press on the element.</p> 80<p>Available in iOS 13.0 and later.</p> 81<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitylargecontenttitle-ios><code>accessibilityLargeContentTitle</code> <div class="label ios">iOS</div><a href=#accessibilitylargecontenttitle-ios class=hash-link aria-label="Direct link to accessibilitylargecontenttitle-ios" title="Direct link to accessibilitylargecontenttitle-ios">​</a></h3> 82<p>A string that will be used as the title of the large content viewer when it is shown.</p> 83<p>Requires <code>accessibilityShowsLargeContentViewer</code> to be set to <code>true</code>.</p> 84<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>accessibilityShowsLargeContentViewer</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><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>accessibilityLargeContentTitle</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>Home Tab</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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">Home</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 85<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilitystate><code>accessibilityState</code><a href=#accessibilitystate class=hash-link aria-label="Direct link to accessibilitystate" title="Direct link to accessibilitystate">​</a></h3> 86<p>Describes the current state of a component to the assistive technology user.</p> 87<p><code>accessibilityState</code> is an object. It contains the following fields:</p> 88<table><thead><tr><th>Name<th>Description<th>Type<th>Required<tbody><tr><td>disabled<td>Indicates whether the element is disabled or not.<td>boolean<td>No<tr><td>selected<td>Indicates whether a selectable element is currently selected or not.<td>boolean<td>No<tr><td>checked<td>Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.<td>boolean or 'mixed'<td>No<tr><td>busy<td>Indicates whether an element is currently busy or not.<td>boolean<td>No<tr><td>expanded<td>Indicates whether an expandable element is currently expanded or collapsed.<td>boolean<td>No</table> 89<p>To use, set the <code>accessibilityState</code> to an object with a specific definition.</p> 90<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityvalue><code>accessibilityValue</code><a href=#accessibilityvalue class=hash-link aria-label="Direct link to accessibilityvalue" title="Direct link to accessibilityvalue">​</a></h3> 91<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> 92<p><code>accessibilityValue</code> is an object. It contains the following fields:</p> 93<table><thead><tr><th>Name<th>Description<th>Type<th>Required<tbody><tr><td>min<td>The minimum value of this component's range.<td>integer<td>Required if <code>now</code> is set.<tr><td>max<td>The maximum value of this component's range.<td>integer<td>Required if <code>now</code> is set.<tr><td>now<td>The current value of this component's range.<td>integer<td>No<tr><td>text<td>A textual description of this component's value. Will override <code>min</code>, <code>now</code>, and <code>max</code> if set.<td>string<td>No</table> 94<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityviewismodal-ios><code>accessibilityViewIsModal</code> <div class="label ios">iOS</div><a href=#accessibilityviewismodal-ios class=hash-link aria-label="Direct link to accessibilityviewismodal-ios" title="Direct link to accessibilityviewismodal-ios">​</a></h3> 95<p>A boolean value that indicates whether VoiceOver should ignore the elements within views that are siblings of the receiver.</p> 96<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 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> 97<h3 class="anchor anchorWithStickyNavbar_JmGV" id=accessibilityelementshidden-ios><code>accessibilityElementsHidden</code> <div class="label ios">iOS</div><a href=#accessibilityelementshidden-ios class=hash-link aria-label="Direct link to accessibilityelementshidden-ios" title="Direct link to accessibilityelementshidden-ios">​</a></h3> 98<p>A boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.</p> 99<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 view <code>B</code>. This is similar to the Android property <code>importantForAccessibility="no-hide-descendants"</code>.</p> 100<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-valuemax><code>aria-valuemax</code><a href=#aria-valuemax class=hash-link aria-label="Direct link to aria-valuemax" title="Direct link to aria-valuemax">​</a></h3> 101<p>Represents the maximum value for range-based components, such as sliders and progress bars.</p> 102<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-valuemin><code>aria-valuemin</code><a href=#aria-valuemin class=hash-link aria-label="Direct link to aria-valuemin" title="Direct link to aria-valuemin">​</a></h3> 103<p>Represents the minimum value for range-based components, such as sliders and progress bars.</p> 104<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-valuenow><code>aria-valuenow</code><a href=#aria-valuenow class=hash-link aria-label="Direct link to aria-valuenow" title="Direct link to aria-valuenow">​</a></h3> 105<p>Represents the current value for range-based components, such as sliders and progress bars.</p> 106<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-valuetext><code>aria-valuetext</code><a href=#aria-valuetext class=hash-link aria-label="Direct link to aria-valuetext" title="Direct link to aria-valuetext">​</a></h3> 107<p>Represents the textual description of the component.</p> 108<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-busy><code>aria-busy</code><a href=#aria-busy class=hash-link aria-label="Direct link to aria-busy" title="Direct link to aria-busy">​</a></h3> 109<p>Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.</p> 110<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table> 111<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-checked><code>aria-checked</code><a href=#aria-checked class=hash-link aria-label="Direct link to aria-checked" title="Direct link to aria-checked">​</a></h3> 112<p>Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.</p> 113<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean, 'mixed'<td>false</table> 114<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-disabled><code>aria-disabled</code><a href=#aria-disabled class=hash-link aria-label="Direct link to aria-disabled" title="Direct link to aria-disabled">​</a></h3> 115<p>Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.</p> 116<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table> 117<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-expanded><code>aria-expanded</code><a href=#aria-expanded class=hash-link aria-label="Direct link to aria-expanded" title="Direct link to aria-expanded">​</a></h3> 118<p>Indicates whether an expandable element is currently expanded or collapsed.</p> 119<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table> 120<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-hidden><code>aria-hidden</code><a href=#aria-hidden class=hash-link aria-label="Direct link to aria-hidden" title="Direct link to aria-hidden">​</a></h3> 121<p>Indicates whether the accessibility elements contained within this accessibility element are hidden.</p> 122<p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>aria-hidden</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in view <code>B</code>.</p> 123<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table> 124<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-label><code>aria-label</code><a href=#aria-label class=hash-link aria-label="Direct link to aria-label" title="Direct link to aria-label">​</a></h3> 125<p>Defines a string value that labels an interactive element.</p> 126<table><thead><tr><th>Type<tbody><tr><td>string</table> 127<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-labelledby-android><code>aria-labelledby</code> <div class="label android">Android</div><a href=#aria-labelledby-android class=hash-link aria-label="Direct link to aria-labelledby-android" title="Direct link to aria-labelledby-android">​</a></h3> 128<p>Identifies the element that labels the element it is applied to. The value of <code>aria-labelledby</code> should match the <a href=/docs/view#nativeid><code>nativeID</code></a> of the related element:</p> 129<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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>nativeID</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>formLabel</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-text">Label for Input Field</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TextInput</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>aria-label</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>input</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>aria-labelledby</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>formLabel</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 130<table><thead><tr><th>Type<tbody><tr><td>string</table> 131<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-live-android><code>aria-live</code> <div class="label android">Android</div><a href=#aria-live-android class=hash-link aria-label="Direct link to aria-live-android" title="Direct link to aria-live-android">​</a></h3> 132<p>Indicates that an element will be updated and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.</p> 133<ul> 134<li><strong>off</strong> Accessibility services should not announce changes to this view.</li> 135<li><strong>polite</strong> Accessibility services should announce changes to this view.</li> 136<li><strong>assertive</strong> Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li> 137</ul> 138<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'assertive'</code>, <code>'off'</code>, <code>'polite'</code>)<td><code>'off'</code></table> 139<hr> 140<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-modal-ios><code>aria-modal</code> <div class="label ios">iOS</div><a href=#aria-modal-ios class=hash-link aria-label="Direct link to aria-modal-ios" title="Direct link to aria-modal-ios">​</a></h3> 141<p>Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.</p> 142<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td>false</table> 143<h3 class="anchor anchorWithStickyNavbar_JmGV" id=aria-selected><code>aria-selected</code><a href=#aria-selected class=hash-link aria-label="Direct link to aria-selected" title="Direct link to aria-selected">​</a></h3> 144<p>Indicates whether a selectable element is currently selected or not.</p> 145<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 146<h3 class="anchor anchorWithStickyNavbar_JmGV" id=importantforaccessibility-android><code>importantForAccessibility</code> <div class="label android">Android</div><a href=#importantforaccessibility-android class=hash-link aria-label="Direct link to importantforaccessibility-android" title="Direct link to importantforaccessibility-android">​</a></h3> 147<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> 148<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</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 property-access" 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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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 property-access" 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 operator" style=color:#fc929e>:</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 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><br></span><span class=token-line style=color:#FFFFFF><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 attr-equals" 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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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">First layout</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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 property-access" 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 operator" style=color:#fc929e>:</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 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><br></span><span class=token-line style=color:#FFFFFF><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 attr-equals" 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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</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">Second layout</span><span class="token tag punctuation" style=color:#657b83>&lt;/</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</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-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 149<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> 150<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onaccessibilityescape-ios><code>onAccessibilityEscape</code> <div class="label ios">iOS</div><a href=#onaccessibilityescape-ios class=hash-link aria-label="Direct link to onaccessibilityescape-ios" title="Direct link to onaccessibilityescape-ios">​</a></h3> 151<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> 152<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onaccessibilitytap-ios><code>onAccessibilityTap</code> <div class="label ios">iOS</div><a href=#onaccessibilitytap-ios class=hash-link aria-label="Direct link to onaccessibilitytap-ios" title="Direct link to onaccessibilitytap-ios">​</a></h3> 153<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> 154<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onmagictap-ios><code>onMagicTap</code> <div class="label ios">iOS</div><a href=#onmagictap-ios class=hash-link aria-label="Direct link to onmagictap-ios" title="Direct link to onmagictap-ios">​</a></h3> 155<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> 156<h3 class="anchor anchorWithStickyNavbar_JmGV" id=role><code>role</code><a href=#role class=hash-link aria-label="Direct link to role" title="Direct link to role">​</a></h3> 157<p><code>role</code> communicates the purpose of a component and has precedence over the <a href=/docs/accessibility#accessibilityrole><code>accessibilityRole</code></a> prop.</p> 158<p><code>role</code> can be one of the following:</p> 159<ul> 160<li><strong>alert</strong> Used when an element contains important text to be presented to the user.</li> 161<li><strong>button</strong> Used when the element should be treated as a button.</li> 162<li><strong>checkbox</strong> Used when an element represents a checkbox that can be checked, unchecked, or have a mixed checked state.</li> 163<li><strong>combobox</strong> Used when an element represents a combo box, which allows the user to select among several choices.</li> 164<li><strong>grid</strong> Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to the android GridView.</li> 165<li><strong>heading</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li> 166<li><strong>img</strong> Used when the element should be treated as an image. Can be combined with a button or link, for example.</li> 167<li><strong>link</strong> Used when the element should be treated as a link.</li> 168<li><strong>list</strong> Used to identify a list of items.</li> 169<li><strong>listitem</strong> Used to itentify an item in a list.</li> 170<li><strong>menu</strong> Used when the component is a menu of choices.</li> 171<li><strong>menubar</strong> Used when a component is a container of multiple menus.</li> 172<li><strong>menuitem</strong> Used to represent an item within a menu.</li> 173<li><strong>none</strong> Used when the element has no role.</li> 174<li><strong>presentation</strong> Used when the element has no role.</li> 175<li><strong>progressbar</strong> Used to represent a component that indicates the progress of a task.</li> 176<li><strong>radio</strong> Used to represent a radio button.</li> 177<li><strong>radiogroup</strong> Used to represent a group of radio buttons.</li> 178<li><strong>scrollbar</strong> Used to represent a scroll bar.</li> 179<li><strong>searchbox</strong> Used when the text field element should also be treated as a search field.</li> 180<li><strong>slider</strong> Used when an element can be "adjusted" (e.g. a slider).</li> 181<li><strong>spinbutton</strong> Used to represent a button that opens a list of choices.</li> 182<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> 183<li><strong>switch</strong> Used to represent a switch that can be turned on and off.</li> 184<li><strong>tab</strong> Used to represent a tab.</li> 185<li><strong>tablist</strong> Used to represent a list of tabs.</li> 186<li><strong>timer</strong> Used to represent a timer.</li> 187<li><strong>toolbar</strong> Used to represent a toolbar (a container of action buttons or components).</li> 188</ul> 189<h2 class="anchor anchorWithStickyNavbar_JmGV" id=accessibility-actions>Accessibility Actions<a href=#accessibility-actions class=hash-link aria-label="Direct link to Accessibility Actions" title="Direct link to Accessibility Actions">​</a></h2> 190<p>Accessibility actions allow assistive technology to programmatically invoke the action(s) of a component. To support accessibility actions, a component must do two things:</p> 191<ul> 192<li>Define the list of actions it supports via the <code>accessibilityActions</code> property.</li> 193<li>Implement an <code>onAccessibilityAction</code> function to handle action requests.</li> 194</ul> 195<p>The <code>accessibilityActions</code> property should contain a list of action objects. Each action object should contain the following fields:</p> 196<table><thead><tr><th>Name<th>Type<th>Required<tbody><tr><td>name<td>string<td>Yes<tr><td>label<td>string<td>No</table> 197<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> 198<p>When adding support for standard actions, <code>name</code> must be one of the following:</p> 199<ul> 200<li><code>'magicTap'</code> - iOS only - While VoiceOver focus is on or inside the component, the user double tapped with two fingers.</li> 201<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> 202<li><code>'activate'</code> - Activate the component. This should perform the same action with, or without, assistive technology. Engaged when a screen reader user double taps the component.</li> 203<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> 204<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> 205<li><code>'longpress'</code> - Android only - This action is generated when the user places accessibility focus on the component, then double-taps and holds one finger on the screen. This should perform the same action with, or without, assistive technology.</li> 206</ul> 207<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> 208<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 that defines and handles several custom actions.</p> 209<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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 operator" style=color:#fc929e>:</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 operator" style=color:#fc929e>:</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 punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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 operator" style=color:#fc929e>:</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 operator" style=color:#fc929e>:</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 punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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 operator" style=color:#fc929e>:</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 operator" style=color:#fc929e>:</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 punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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" style=color:#fc929e>event </span><span class="token tag script language-javascript arrow 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><br></span><span class=token-line style=color:#FFFFFF><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 property-access" style=color:#fc929e>nativeEvent</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" 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><br></span><span class=token-line style=color:#FFFFFF><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 operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Alert</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript method function property-access" 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><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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 operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Alert</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript method function property-access" 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><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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 operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Alert</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript method function property-access" 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><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e></span><span class="token tag punctuation" style=color:#657b83>/></span><br></span></code></pre></div></div> 210<h2 class="anchor anchorWithStickyNavbar_JmGV" id=checking-if-a-screen-reader-is-enabled>Checking if a Screen Reader is Enabled<a href=#checking-if-a-screen-reader-is-enabled class=hash-link aria-label="Direct link to Checking if a Screen Reader is Enabled" title="Direct link to Checking if a Screen Reader is Enabled">​</a></h2> 211<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> 212<h2 class="anchor anchorWithStickyNavbar_JmGV" id=sending-accessibility-events-android>Sending Accessibility Events <div class="label android">Android</div><a href=#sending-accessibility-events-android class=hash-link aria-label="Direct link to sending-accessibility-events-android" title="Direct link to sending-accessibility-events-android">​</a></h2> 213<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: a view tag and a type of event. The supported event types are <code>typeWindowStateChanged</code>, <code>typeViewFocused</code>, and <code>typeViewClicked</code>.</p> 214<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">Platform</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> </span><span class="token imports maybe-class-name">UIManager</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> findNodeHandle</span><span class="token imports 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><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><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 maybe-class-name">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><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">UIManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>sendAccessibilityEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">UIManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access maybe-class-name">AccessibilityEventTypes</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">typeViewFocused</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><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><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 215<h2 class="anchor anchorWithStickyNavbar_JmGV" id=testing-talkback-support-android>Testing TalkBack Support <div class="label android">Android</div><a href=#testing-talkback-support-android class=hash-link aria-label="Direct link to testing-talkback-support-android" title="Direct link to testing-talkback-support-android">​</a></h2> 216<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> 217<p>Android emulators don't have TalkBack installed by default. You can install TalkBack on your emulator via the Google Play Store. Make sure to choose an emulator with the Google Play store installed. These are available in Android Studio.</p> 218<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 the volume key shortcut.</p> 219<p>To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.</p> 220<p>Additionally, if you prefer, you can toggle TalkBack via the command line with:</p> 221<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1># disable</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1># enable</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService</span><br></span></code></pre></div></div> 222<h2 class="anchor anchorWithStickyNavbar_JmGV" id=testing-voiceover-support-ios>Testing VoiceOver Support <div class="label ios">iOS</div><a href=#testing-voiceover-support-ios class=hash-link aria-label="Direct link to testing-voiceover-support-ios" title="Direct link to testing-voiceover-support-ios">​</a></h2> 223<p>To enable VoiceOver on your iOS or iPadOS device, go to the Settings app, tap General, then Accessibility. There you will find many tools available for people to enable their devices to be more usable, including VoiceOver. To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.</p> 224<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> 225<p>VoiceOver isn't available via the simulator, but you can use Accessibility Inspector from Xcode to use the macOS VoiceOver through an application. Note it's always best to test with a device as macOS's VoiceOver may result in varied experiences.</p> 226<h2 class="anchor anchorWithStickyNavbar_JmGV" id=additional-resources>Additional Resources<a href=#additional-resources class=hash-link aria-label="Direct link to Additional Resources" title="Direct link to Additional Resources">​</a></h2> 227<ul> 228<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> 229</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/accessibility.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><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"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/accessibility.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><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"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/security><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Security</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/debugging><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Debugging Basics</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#accessibility-properties class="table-of-contents__link toc-highlight">Accessibility properties</a><ul><li><a href=#accessible class="table-of-contents__link toc-highlight"><code>accessible</code></a><li><a href=#accessibilitylabel class="table-of-contents__link toc-highlight"><code>accessibilityLabel</code></a><li><a href=#accessibilitylabelledby-android class="table-of-contents__link toc-highlight"><code>accessibilityLabelledBy</code> <div class="label android">Android</div></a><li><a href=#accessibilityhint class="table-of-contents__link toc-highlight"><code>accessibilityHint</code></a><li><a href=#accessibilitylanguage-ios class="table-of-contents__link toc-highlight"><code>accessibilityLanguage</code> <div class="label ios">iOS</div></a><li><a href=#accessibilityignoresinvertcolors-ios class="table-of-contents__link toc-highlight"><code>accessibilityIgnoresInvertColors</code> <div class="label ios">iOS</div></a><li><a href=#accessibilityliveregion-android class="table-of-contents__link toc-highlight"><code>accessibilityLiveRegion</code> <div class="label android">Android</div></a><li><a href=#accessibilityrole class="table-of-contents__link toc-highlight"><code>accessibilityRole</code></a><li><a href=#accessibilityshowslargecontentviewer-ios class="table-of-contents__link toc-highlight"><code>accessibilityShowsLargeContentViewer</code> <div class="label ios">iOS</div></a><li><a href=#accessibilitylargecontenttitle-ios class="table-of-contents__link toc-highlight"><code>accessibilityLargeContentTitle</code> <div class="label ios">iOS</div></a><li><a href=#accessibilitystate class="table-of-contents__link toc-highlight"><code>accessibilityState</code></a><li><a href=#accessibilityvalue class="table-of-contents__link toc-highlight"><code>accessibilityValue</code></a><li><a href=#accessibilityviewismodal-ios class="table-of-contents__link toc-highlight"><code>accessibilityViewIsModal</code> <div class="label ios">iOS</div></a><li><a href=#accessibilityelementshidden-ios class="table-of-contents__link toc-highlight"><code>accessibilityElementsHidden</code> <div class="label ios">iOS</div></a><li><a href=#aria-valuemax class="table-of-contents__link toc-highlight"><code>aria-valuemax</code></a><li><a href=#aria-valuemin class="table-of-contents__link toc-highlight"><code>aria-valuemin</code></a><li><a href=#aria-valuenow class="table-of-contents__link toc-highlight"><code>aria-valuenow</code></a><li><a href=#aria-valuetext class="table-of-contents__link toc-highlight"><code>aria-valuetext</code></a><li><a href=#aria-busy class="table-of-contents__link toc-highlight"><code>aria-busy</code></a><li><a href=#aria-checked class="table-of-contents__link toc-highlight"><code>aria-checked</code></a><li><a href=#aria-disabled class="table-of-contents__link toc-highlight"><code>aria-disabled</code></a><li><a href=#aria-expanded class="table-of-contents__link toc-highlight"><code>aria-expanded</code></a><li><a href=#aria-hidden class="table-of-contents__link toc-highlight"><code>aria-hidden</code></a><li><a href=#aria-label class="table-of-contents__link toc-highlight"><code>aria-label</code></a><li><a href=#aria-labelledby-android class="table-of-contents__link toc-highlight"><code>aria-labelledby</code> <div class="label android">Android</div></a><li><a href=#aria-live-android class="table-of-contents__link toc-highlight"><code>aria-live</code> <div class="label android">Android</div></a><li><a href=#aria-modal-ios class="table-of-contents__link toc-highlight"><code>aria-modal</code> <div class="label ios">iOS</div></a><li><a href=#aria-selected class="table-of-contents__link toc-highlight"><code>aria-selected</code></a><li><a href=#importantforaccessibility-android class="table-of-contents__link toc-highlight"><code>importantForAccessibility</code> <div class="label android">Android</div></a><li><a href=#onaccessibilityescape-ios class="table-of-contents__link toc-highlight"><code>onAccessibilityEscape</code> <div class="label ios">iOS</div></a><li><a href=#onaccessibilitytap-ios class="table-of-contents__link toc-highlight"><code>onAccessibilityTap</code> <div class="label ios">iOS</div></a><li><a href=#onmagictap-ios class="table-of-contents__link toc-highlight"><code>onMagicTap</code> <div class="label ios">iOS</div></a><li><a href=#role class="table-of-contents__link toc-highlight"><code>role</code></a></ul><li><a href=#accessibility-actions class="table-of-contents__link toc-highlight">Accessibility Actions</a><li><a href=#checking-if-a-screen-reader-is-enabled class="table-of-contents__link toc-highlight">Checking if a Screen Reader is Enabled</a><li><a href=#sending-accessibility-events-android class="table-of-contents__link toc-highlight">Sending Accessibility Events <div class="label android">Android</div></a><li><a href=#testing-talkback-support-android class="table-of-contents__link toc-highlight">Testing TalkBack Support <div class="label android">Android</div></a><li><a href=#testing-voiceover-support-ios class="table-of-contents__link toc-highlight">Testing VoiceOver Support <div class="label ios">iOS</div></a><li><a href=#additional-resources class="table-of-contents__link toc-highlight">Additional Resources</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>