CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-dom-testing-library/api-accessibility"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="generator" content="Docusaurus v2.0.1"> <link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Testing Library RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Testing Library Atom Feed"> <link rel="alternate" type="application/json" href="/blog/feed.json" title="Testing Library JSON Feed"> <link rel="preconnect" href="https://www.google-analytics.com"> <link rel="preconnect" href="https://www.googletagmanager.com"> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-137787095-1"></script> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-137787095-1",{})</script> <link rel="search" type="application/opensearchdescription+xml" title="Testing Library" href="/opensearch.xml"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:500,700|Source+Code+Pro:500,700|Source+Sans+Pro:400,400i,700"> <script src="https://buttons.github.io/buttons.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><title data-rh="true">Accessibility | Testing Library</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://testing-library.com/img/octopus-128x128.png"><meta data-rh="true" name="twitter:image" content="https://testing-library.com/img/octopus-128x128.png"><meta data-rh="true" property="og:url" content="https://testing-library.com/docs/dom-testing-library/api-accessibility"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Accessibility | Testing Library"><meta data-rh="true" name="description" content="Testing for Accessibility"><meta data-rh="true" property="og:description" content="Testing for Accessibility"><link data-rh="true" rel="icon" href="/img/octopus-32x32.png"><link data-rh="true" rel="canonical" href="https://testing-library.com/docs/dom-testing-library/api-accessibility"><link data-rh="true" rel="alternate" href="https://testing-library.com/docs/dom-testing-library/api-accessibility" hreflang="en"><link data-rh="true" rel="alternate" href="https://testing-library.com/docs/dom-testing-library/api-accessibility" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://TUPO88CFRP-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.67d9695e.css"> <link rel="preload" href="/assets/js/runtime~main.4057d163.js" as="script"> <link rel="preload" href="/assets/js/main.b5a7962b.js" as="script"> </head> <body class="navigation-with-keyboard"> <script>!function(){function e(e){document.documentElement.setAttribute("data-theme",e)}var t=function(){var e=null;try{e=localStorage.getItem("theme")}catch(e){}return e}();null!==t?e(t):window.matchMedia("(prefers-color-scheme: dark)").matches?e("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,e("light"))}()</script><div id="__docusaurus"> <div role="region"><a href="#" class="skipToContent_fXgn">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><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"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/octopus-64x64.png" alt="An octopus representing the DOM Testing Library Logo" class="themedImage_ToTc themedImage--light_HNdA" height="32" width="32"><img src="/img/octopus-64x64.png" alt="An octopus representing the DOM Testing Library Logo" class="themedImage_ToTc themedImage--dark_i4oU" height="32" width="32"></div><b class="navbar__title text--truncate">Testing Library</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/">Docs</a><a class="navbar__item navbar__link" href="/docs/recipes">Examples</a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/help">Help</a><a class="navbar__item navbar__link" href="/blog">Blog</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><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"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><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"></path></svg></button></div><div class="searchBox_ZlJk"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebar_njMd"><nav class="menu thin-scrollbar menu_SIkG"><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" aria-expanded="false" href="/docs/">Getting Started</a></div></li><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" aria-expanded="true" href="/docs/queries/about">Core API</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><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--sublist menu__link--sublist-caret" aria-expanded="true" tabindex="0" href="/docs/queries/about">Queries</a></div><ul style="display:block;overflow:visible;height:auto" 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/queries/about">About Queries</a></li><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/queries/byrole">ByRole</a></li><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/queries/bylabeltext">ByLabelText</a></li><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/queries/byplaceholdertext">ByPlaceholderText</a></li><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/queries/bytext">ByText</a></li><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/queries/bydisplayvalue">ByDisplayValue</a></li><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/queries/byalttext">ByAltText</a></li><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/queries/bytitle">ByTitle</a></li><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/queries/bytestid">ByTestId</a></li></ul></li><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--sublist menu__link--sublist-caret" aria-expanded="true" tabindex="0" href="/docs/dom-testing-library/api-events">User Actions</a></div><ul style="display:block;overflow:visible;height:auto" 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/dom-testing-library/api-events">Firing Events</a></li><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/dom-testing-library/api-async">Async Methods</a></li><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/guide-disappearance">Appearance and Disappearance</a></li><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/guide-events">Considerations for fireEvent</a></li><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/using-fake-timers">Using Fake Timers</a></li></ul></li><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--sublist menu__link--sublist-caret menu__link--active" aria-expanded="true" tabindex="0" href="/docs/dom-testing-library/api-accessibility">Advanced</a></div><ul style="display:block;overflow:visible;height:auto" 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/dom-testing-library/api-accessibility">Accessibility</a></li><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/dom-testing-library/api-custom-queries">Custom Queries</a></li><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/dom-testing-library/api-debugging">Debugging</a></li><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/dom-testing-library/api-within">Querying Within Elements</a></li><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/dom-testing-library/api-configuration">Configuration Options</a></li></ul></li></ul></li><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" aria-expanded="false" href="/docs/dom-testing-library/intro">Frameworks</a></div></li><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" aria-expanded="false" href="/docs/user-event/intro">User Interactions</a></div></li><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" aria-expanded="false" href="/docs/ecosystem-jest-dom">Ecosystem</a></div></li></ul></nav></div></aside><main class="docMainContainer_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_OVgt"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Core API</span><meta itemprop="position" content="1"></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Advanced</span><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Accessibility</span><meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Accessibility</h1></header><h2 class="anchor anchorWithStickyNavbar_LWe7" id="testing-for-accessibility">Testing for Accessibility<a class="hash-link" href="#testing-for-accessibility" title="Direct link to heading"></a></h2><p>One of the guiding principles of the Testing Library APIs is that they should enable you to test your app the way your users use it, including through accessibility interfaces like screen readers.</p><p>See the page on <a href="/docs/queries/about#priority">queries</a> for details on how using a semantic HTML query can make sure your app works with browser accessibility APIs.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="getroles"><code>getRoles</code><a class="hash-link" href="#getroles" title="Direct link to heading"></a></h2><p>This function allows iteration over the implicit ARIA roles represented in a given tree of DOM nodes.</p><p>It returns an object, indexed by role name, with each value being an array of elements which have that implicit ARIA role.</p><p>See <a href="https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html" target="_blank" rel="noopener noreferrer">ARIA in HTML</a> for more information about implicit ARIA roles.</p><div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword module" style="font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports">getRoles</span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'@testing-library/dom'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> nav </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token dom variable" style="color:rgb(191, 199, 213)">document</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">createElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">'nav'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">nav</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">innerHTML</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:rgb(195, 232, 141)">`</span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"></span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">ul</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html">Item 1</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html">Item 2</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"></span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">ul</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string template-punctuation string" style="color:rgb(195, 232, 141)">`</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 107)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token function" style="color:rgb(130, 170, 255)">getRoles</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">nav</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Object {</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// navigation: [<nav />],</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// list: [<ul />],</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// listitem: [<li />, <li />]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// }</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="isinaccessible"><code>isInaccessible</code><a class="hash-link" href="#isinaccessible" title="Direct link to heading"></a></h2><p>This function will compute if the given element should be excluded from the accessibility API by the browser. It implements every <strong>MUST</strong> criteria from the <a href="https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion" target="_blank" rel="noopener noreferrer">Excluding Elements from the Accessibility Tree</a> section in WAI-ARIA 1.2 with the exception of checking the <code>role</code> attribute.</p><p>It is defined as:</p><div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">isInaccessible</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">element</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Element</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">boolean</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="logroles"><code>logRoles</code><a class="hash-link" href="#logroles" title="Direct link to heading"></a></h2><p>This helper function can be used to print out a list of all the implicit ARIA roles within a tree of DOM nodes, each role containing a list of all of the nodes which match that role. This can be helpful for finding ways to query the DOM under test with <a href="/docs/queries/byrole">getByRole</a>.</p><div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword module" style="font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports">logRoles</span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'@testing-library/dom'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> nav </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token dom variable" style="color:rgb(191, 199, 213)">document</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">createElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">'nav'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">nav</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">innerHTML</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:rgb(195, 232, 141)">`</span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"></span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">ul</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html">Item 1</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html">Item 2</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">li</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token template-string html language-html"></span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 85, 114)">ul</span><span class="token template-string html language-html tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token template-string template-punctuation string" style="color:rgb(195, 232, 141)">`</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">logRoles</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">nav</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Result:</p><div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">navigation:</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"><nav /></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">--------------------------------------------------</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">list:</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"><ul /></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">--------------------------------------------------</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">listitem:</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"><li /></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"><li /></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">--------------------------------------------------</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/testing-library/testing-library-docs/edit/main/docs/dom-testing-library/api-accessibility.mdx" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" 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"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_vwxv"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2021-07-21T22:38:18.000Z">Jul 21, 2021</time></b> by <b>Nick McCurdy</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/using-fake-timers"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Using Fake Timers</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/dom-testing-library/api-custom-queries"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Custom Queries</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#testing-for-accessibility" class="table-of-contents__link toc-highlight">Testing for Accessibility</a></li><li><a href="#getroles" class="table-of-contents__link toc-highlight"><code>getRoles</code></a></li><li><a href="#isinaccessible" class="table-of-contents__link toc-highlight"><code>isInaccessible</code></a></li><li><a href="#logroles" class="table-of-contents__link toc-highlight"><code>logRoles</code></a></li></ul></div></div></div></div></main></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/example-codesandbox">Examples</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/dom-testing-library/api">API</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/dom-testing-library/faq">Help</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-testing-library" 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_nPIU"><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"></path></svg></a></li><li class="footer__item"><a href="https://discord.gg/testing-library" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"> <a target="_blank" rel="noreferrer noopener" class="github-button" href="https://github.com/testing-library/react-testing-library" data-icon="octicon-star" data-count-href="/testing-library/react-testing-library/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a> </li><li class="footer__item"><a href="https://github.com/testing-library" 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_nPIU"><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"></path></svg></a></li><li class="footer__item"><a href="https://github.com/testing-library/testing-library-docs" target="_blank" rel="noopener noreferrer" class="footer__link-item">Edit Docs on GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a></li><li class="footer__item"><a href="https://netlify.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Hosted by Netlify<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><img src="/img/octopus-128x128.png" alt="An octopus representing the DOM Testing Library Logo" class="themedImage_ToTc themedImage--light_HNdA footer__logo" width="128" height="128"><img src="/img/octopus-128x128.png" alt="An octopus representing the DOM Testing Library Logo" class="themedImage_ToTc themedImage--dark_i4oU footer__logo" width="128" height="128"></div><div class="footer__copyright">Copyright © 2018-2024 Kent C. Dodds and contributors</div></div></div></footer></div> <script src="/assets/js/runtime~main.4057d163.js"></script> <script src="/assets/js/main.b5a7962b.js"></script> </body> </html>