Accessibility features reference | Chrome DevTools

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/devtools/accessibility/reference"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/devtools/accessibility/reference" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/devtools/accessibility/reference" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/devtools/accessibility/reference?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/devtools/accessibility/reference?hl=vi" /><title>Accessibility features reference  |  Chrome DevTools  |  Chrome for Developers</title> <meta property="og:title" content="Accessibility features reference  |  Chrome DevTools  |  Chrome for Developers"><meta name="description" content="A comprehensive reference of accessibility features in Chrome DevTools."> <meta property="og:description" content="A comprehensive reference of accessibility features in Chrome DevTools."><meta property="og:url" content="https://developer.chrome.com/docs/devtools/accessibility/reference"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2022-06-09", "headline": "Accessibility features reference" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Chrome DevTools", "item": "https://developer.chrome.com/docs/devtools" },{ "@type": "ListItem", "position": 3, "name": "Accessibility features reference", "item": "https://developer.chrome.com/docs/devtools/accessibility/reference" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/case-studies" track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs" track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights audit </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/new" track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Chrome DevTools" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/docs/devtools" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Chrome DevTools" > Chrome DevTools </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developer.chrome.com/docs/devtools" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-position="nav - devtools" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: DevTools" track-name="devtools" > DevTools </a> </tab> <tab > <a href="https://developer.chrome.com/docs/devtools/ai-assistance/quickstart" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/ai-assistance/quickstart" track-type="nav" track-metadata-position="nav - ai assistance" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: AI assistance" track-name="ai assistance" > AI assistance </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/devtools/dom" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/dom" track-type="nav" track-metadata-position="nav - panels" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" > Panels </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Panels" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/dom" track-metadata-position="nav - panels" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/elements" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/elements" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Elements </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/console" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/console" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/sources" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/sources" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Sources </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/network/overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/network/overview" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Network </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/performance/overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/performance/overview" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/memory" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/memory" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Memory </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/application" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/application" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Application </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/recorder/overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/recorder/overview" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Recorder </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/rendering" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/rendering" track-metadata-position="nav - panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Rendering </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/devtools/security" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/security" track-type="nav" track-metadata-position="nav - more panels" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" > More panels </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for More panels" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/security" track-metadata-position="nav - more panels" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/autofill" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/autofill" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Autofill </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/css/animations" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/css/animations" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Animations </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/changes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/changes" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Changes </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/coverage" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/coverage" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Coverage </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/developer-resources" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/developer-resources" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Developer resources </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/css-overview" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/css-overview" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> CSS overview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/issues" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/issues" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Issues </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/layers" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/layers" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Layers </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/lighthouse" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/media-panel" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/media-panel" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Media </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/memory-inspector" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/memory-inspector" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Memory Inspector </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/device-mode/override-user-agent" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/device-mode/override-user-agent" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Network conditions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/network-request-blocking" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/network-request-blocking" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Network request blocking </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/performance-monitor" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/performance-monitor" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Performance monitor </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/protocol-monitor" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/protocol-monitor" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Protocol monitor </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/quick-source" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/quick-source" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Quick source </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/security" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Security </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/sensors" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/sensors" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Sensors </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/webaudio" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/webaudio" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> WebAudio </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/webauthn" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/webauthn" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> WebAuthn </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/whats-new" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/whats-new" track-metadata-position="nav - more panels" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> What's new </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/docs/devtools/settings" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/settings" track-type="nav" track-metadata-position="nav - settings" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Settings" track-name="settings" > Settings </a> </tab> <tab class="devsite-active"> <a href="https://developer.chrome.com/docs/devtools/accessibility/reference" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/accessibility/reference" track-type="nav" track-metadata-position="nav - accessibility" track-metadata-module="primary nav" aria-label="Accessibility, selected" data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" > Accessibility </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: DevTools" track-name="devtools" data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/ai-assistance/quickstart" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: AI assistance" track-name="ai assistance" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI assistance" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI assistance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/dom" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Panels" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Panels </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Panels" track-name="panels" > <span class="devsite-nav-text" tooltip menu="Panels"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Panels"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/security" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" data-category="Site-Wide Custom Events" data-label="Responsive Tab: More panels" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More panels </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: More panels" track-name="more panels" > <span class="devsite-nav-text" tooltip menu="More panels"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="More panels"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/settings" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Settings" track-name="settings" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Settings" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Settings </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/accessibility/reference" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Accessibility </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Accessibility</span> </div></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/reference" ><span class="devsite-nav-text" tooltip>DevTools features</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/contrast" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/contrast" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/contrast" ><span class="devsite-nav-text" tooltip>Contrast and readability</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/focus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/focus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/focus" ><span class="devsite-nav-text" tooltip>Track elements focus</span></a></li> <li class="devsite-nav-item"><a href="/docs/devtools/accessibility/navigation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/devtools/accessibility/navigation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/devtools/accessibility/navigation" ><span class="devsite-nav-text" tooltip>Navigate DevTools with assistive technology</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Resources</span> </div></li> <li class="devsite-nav-item devsite-nav-external"><a href="https://web.dev/learn/accessibility" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://web.dev/learn/accessibility" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://web.dev/learn/accessibility" ><span class="devsite-nav-text" tooltip>Learn Accessibility</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-external"><a href="https://developer.mozilla.org/docs/Web/Accessibility" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://developer.mozilla.org/docs/Web/Accessibility" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://developer.mozilla.org/docs/Web/Accessibility" ><span class="devsite-nav-text" tooltip>MDN</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> <li class="devsite-nav-item"><a href="/discover?keyword=devtools" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /discover?keyword=devtools" track-type="bookNav" track-name="click" track-metadata-eventdetail="/discover?keyword=devtools" ><span class="devsite-nav-text" tooltip>DevTools engineering blog</span></a></li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights audit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights audit </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Panels" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/devtools/elements" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Elements" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Elements </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/console" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Console" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Console </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/sources" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Sources" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Sources </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/network/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/performance/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/memory" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Memory" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Memory </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/application" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Application" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Application </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/recorder/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Recorder" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Recorder </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/rendering" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Rendering" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Rendering </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="More panels" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/devtools/autofill" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Autofill" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Autofill </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/css/animations" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Animations" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Animations </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/changes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Changes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Changes </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/coverage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Coverage" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Coverage </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/developer-resources" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer resources" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer resources </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/css-overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS overview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/issues" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Issues" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Issues </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/layers" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Layers" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Layers </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/media-panel" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Media" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Media </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/memory-inspector" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Memory Inspector" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Memory Inspector </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/device-mode/override-user-agent" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network conditions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network conditions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/network-request-blocking" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network request blocking" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network request blocking </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/performance-monitor" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance monitor" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance monitor </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/protocol-monitor" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Protocol monitor" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Protocol monitor </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/quick-source" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Quick source" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Quick source </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Security </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/sensors" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Sensors" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Sensors </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/webaudio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebAudio" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebAudio </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/webauthn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebAuthn" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebAuthn </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/devtools/whats-new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: What's new" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > What's new </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/devtools" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Chrome DevTools" > Chrome DevTools </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/devtools/accessibility/reference" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > Accessibility </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Accessibility features reference </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><style> .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } </style> <div class="dcc-authors" translate="no"> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Kayce Basques" src="https://web.dev/images/authors/kaycebasques.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Kayce Basques </span> <div class="dcc-author__links"> <a href="https://twitter.com/kaycebasques" aria-label="Kayce Basques on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/kaycebasques" aria-label="Kayce Basques on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://glitch.com/@kaycebasques" aria-label="Kayce Basques on Glitch" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"> <title>Glitch</title> <path fill="currentColor" d="M31.734 16.76c-.385-.198-4.536 1.865-5.427 1.693-2.24-.401-1.828-.667-4.839-1.359-1.203-.266-1.031-.109-1.297-.307-.172-.135-.344-.161-.599-.401 4-.719 6.026-1.693 6.734-1.839.76-.146 5.161 1.958 5.427 1.469.266-.495-.964-1.578-.401-3.031.589-1.464-.693-2.422.016-3.583.719-1.161.573-2.932.396-3.026-.396-.203-4.531 1.865-5.438 1.693-2.24-.417-1.828-.682-4.839-1.359-1.203-.271-1.031-.12-1.297-.323-.266-.198-.521-.13-1.036-.974-.521-.839-6.51-2.13-6.906-2.13-.828 0-2.375 2.13-2.375 2.13s-.599 0-2.401.094c-1.802.094-3.375.896-5.495 2.563C-.173 9.737.134 11.414.134 11.414s1.969.667 1.969 1.042c0 .359-1.729.802-1.729.802 1.12 1.411 4.583 2.745 5.464 2.745h.693c-1.438.281-2.823 1.068-4.583 2.438-2.12 1.698-1.813 3.375-1.813 3.375s1.969.667 1.969 1.026-1.729.802-1.729.802c1.12 1.427 4.583 2.76 5.464 2.76.844 0 1.427.026 2.495-.172.078.172.906 1.932 2.599 2.292 1.786.385 2.776.078 2.776.078s.094-.786-.323-1.573c1.547.161 3.307.203 5.026-.068 4.76-.719 7.12-1.865 7.896-2.01.76-.161 5.161 1.948 5.427 1.464.266-.505-.964-1.583-.385-3.036.573-1.469-.708-2.417 0-3.589.719-1.161.573-2.932.396-3.026zM4.615 11.828a1.446 1.446 0 0 1-.297-.042h-.052c-.026-.01-.052-.026-.078-.042l-.052-.01-.083-.042h-.052a.418.418 0 0 1-.068-.042l-.068-.052-.063-.036-.057-.042c-.021-.016-.042-.036-.063-.052l-.042-.042c-.026-.026-.047-.052-.068-.078l-.026-.031a1.954 1.954 0 0 1-.094-.104l-.026-.026c-.021-.036-.036-.073-.052-.109l-.026-.036-.057-.083c-.005-.021-.016-.042-.026-.063l-.026-.083-.026-.052-.016-.094-.01-.068c-.01-.026-.021-.052-.026-.078v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.297 0-.719-.505-1.307-1.146-1.307-.625 0-1.13.573-1.146 1.281 0-.932.667-1.693 1.495-1.693.823 0 1.479.745 1.479 1.682 0 .932-.667 1.693-1.479 1.693zm-1-1.265c0-.203.13-.365.318-.365s.307.161.307.365c0 .198-.135.344-.307.344s-.318-.161-.318-.344zm1 11.651a.712.712 0 0 1-.146 0l-.057-.016a.6.6 0 0 1-.094-.01l-.052-.016-.078-.026-.052-.026c-.031-.005-.057-.016-.083-.026l-.052-.026c-.021-.016-.047-.026-.068-.042L3.881 22l-.068-.052-.052-.042-.068-.052-.042-.042c-.031-.031-.063-.057-.089-.094a.671.671 0 0 1-.094-.12l-.031-.026c-.016-.031-.036-.063-.052-.094l-.026-.052c-.016-.026-.036-.052-.052-.078l-.026-.057-.026-.094-.026-.052-.031-.094-.01-.052c-.01-.031-.021-.063-.026-.094v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.292 0-.724-.505-1.297-1.146-1.297-.625 0-1.13.563-1.146 1.266 0-.932.667-1.693 1.495-1.693.823 0 1.479.76 1.479 1.682 0 .917-.667 1.693-1.479 1.693zm-1-1.266c0-.188.13-.349.318-.349s.307.161.307.349c0 .188-.135.344-.307.344s-.318-.146-.318-.344zm6.77-7.333v-.042l.042-.078.078-.297c.182-.583.344-1.172.479-1.771.161-.708.229-1.281.203-1.599-.016-.12-.031-.245-.052-.359a8.276 8.276 0 0 0-.521-1.724l-.083-.172-.026-.068c-.12-.266.057-.573.323-.557h.188l.531.036 2.104.109 1.151.078a28.24 28.24 0 0 1 10.573 2.828l.891.401c.172.078.266.307.188.505-.068.188-.266.292-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.146-.068-.51-.026-1.599-.094h-.156c.188.51.339 1.031.453 1.562l.063.427c.042.453-.036 1.078-.224 1.88l-.203.823a23.62 23.62 0 0 1-.385 1.323l-.026.078v.042c-.068.188-.266.292-.438.214-.177-.068-.271-.292-.203-.495zm-2-6.349a.307.307 0 0 1 .479.026c.208.26.396.536.563.828.292.531.495 1.068.547 1.615.026.307 0 .651-.052 1.026a8.718 8.718 0 0 1-.271 1.104c-.094.313-.208.62-.333.922-.078.188-.276.266-.453.172-.172-.094-.24-.318-.156-.521l.026-.052.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.052-.802a3.47 3.47 0 0 0-.453-1.292 4.794 4.794 0 0 0-.443-.667l-.036-.042a.417.417 0 0 1 .026-.531zm1.537 13.869c-.063.38-.151.76-.271 1.13a9.549 9.549 0 0 1-.333.906c-.078.188-.276.266-.453.177-.172-.094-.24-.323-.156-.521l.026-.057.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.036-.802a3.365 3.365 0 0 0-.438-1.276 4.794 4.794 0 0 0-.443-.667l-.036-.057a.417.417 0 0 1 .026-.531.3.3 0 0 1 .464 0c.214.266.396.547.563.839.292.536.495 1.083.547 1.615.026.307 0 .651-.052 1.026zm16.531.157c-.068.188-.266.297-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.135-.063h-.063l-.458-.026c-.583-.036-1.172-.068-1.755-.094l.036.078c.234.615.396 1.255.479 1.906.042.453-.036 1.078-.224 1.88l-.203.828a24.99 24.99 0 0 1-.385 1.333l-.026.068v.036c-.068.203-.266.297-.438.229a.42.42 0 0 1-.203-.51v-.026l.042-.078.078-.292c.182-.589.344-1.177.479-1.776.161-.708.229-1.281.203-1.599-.016-.12-.031-.24-.052-.359a7.996 7.996 0 0 0-.521-1.708l-.052-.12-.031-.068-.026-.063c-.12-.271.057-.578.323-.563h.188l.531.042 2.12.104 1.135.083a28.14 28.14 0 0 1 10.573 2.823l.891.401c.172.078.266.307.188.505z"/> </svg></a> </div> </div> </div> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Sofia Emelianova" src="https://web.dev/images/authors/sofiayem.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Sofia Emelianova </span> <div class="dcc-author__links"> <a href="https://github.com/sofiayem" aria-label="Sofia Emelianova on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> </div> </div> </div> </div></p> <p>This page is a comprehensive reference of accessibility features in Chrome DevTools. It is intended for web developers who:</p> <ul> <li>Have a basic understanding of DevTools, such as how to open it.</li> <li>Are familiar with <a href="https://web.dev/accessibility/">accessibility principles and best practices</a>.</li> </ul> <p>The purpose of this reference is to help you discover all of the tools available in DevTools that can help you examine a page's accessibility.</p> <p>See <a href="/docs/devtools/accessibility/navigation">Navigating Chrome DevTools With Assistive Technology</a> if you're looking for help on navigating DevTools with an assistive technology like a screen reader.</p> <p>See <a href="https://web.dev/learn/accessibility">Learn Accessibility</a> if you'd like to learn how to develop accessible websites.</p> <h2 id="overview" data-text="Overview of accessibility features in Chrome DevTools" tabindex="-1">Overview of accessibility features in Chrome DevTools</h2> <p>This section explains how DevTools fits into your overall accessibility toolkit.</p> <p>When determining whether a page is accessible, you need to have 2 general questions in mind:</p> <ol> <li>Can I navigate the page with a keyboard or <a href="https://web.dev/semantics-builtin/#screen-readers">screen reader</a>?</li> <li>Are the page's elements properly marked up for screen readers?</li> </ol> <p>In general, DevTools can help you fix errors related to question #2, because these errors are easy to detect in an automated fashion. Question #1 is just as important, but unfortunately DevTools can't help you there. The only way to find errors related to question #1 is to try using a page with a keyboard or screen reader yourself. See <a href="https://web.dev/how-to-review/">How To Do An Accessibility Review</a> to learn more.</p> <h2 id="audits" data-text="Audit a page's accessibility" tabindex="-1">Audit a page's accessibility</h2> <p>In general, use the accessibility checks under the <strong>Lighthouse</strong> panel to determine if:</p> <ul> <li>A page is properly marked up for screen readers.</li> <li>The text elements on a page have sufficient contrast ratios. See also <a href="#contrast">Make your website more readable</a>.</li> </ul> <p>To audit a page:</p> <ol> <li>Go to the URL that you want to audit.</li> <li><p>In DevTools, click the <strong>Lighthouse</strong> panel. DevTools shows you various configuration options.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03.png" alt="Configuring an accessibility scan in Lighthouse panel." width="800" height="1053" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/configuring-accessibilit-c1ae44bf11d03_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <aside class="note"><b>Note:</b> The screenshots in this section were taken with Chrome 69. In the screenshots, the panel is still named <strong>Audits</strong> but it was <a href="/blog/new-in-devtools-83#lighthouse">renamed into Lighthouse in Chrome 83</a> You can check what version you're running at <code translate="no" dir="ltr">chrome://version</code>. The <strong>Audits</strong> panel UI will look different in some earlier or later versions of Chrome, but the general workflow is the same.</aside></li> <li><p>For <strong>Device</strong>, select <strong>Mobile</strong> if you want to simulate a mobile device. This option changes differently your user agent string and resizes the viewport. If the mobile version of the page displays differently than the desktop version, this option could have a significant effect on the results of your audit.</p></li> <li><p>In the <strong>Lighthouse</strong> section, make sure that <strong>Accessibility</strong> is enabled. Disable the other categories if you want to exclude them from your report. Leave them enabled if you want to discover other ways to improve the quality of your page.</p></li> <li><p>The <strong>Throttling</strong> section lets you throttle the network and CPU, which is useful when analyzing load performance. This option should be irrelevant to your accessibility score, so you can use whatever you prefer.</p></li> <li><p>The <strong>Clear Storage</strong> checkbox lets you clear all storage before loading the page, or preserve storage between page loads. This option is also probably irrelevant to your accessibility score, so you can use whatever you prefer.</p></li> <li><p>Click <strong>Generate Report</strong>. After 10 to 30 seconds, DevTools provides a report. Your report gives you various tips on how to improve the page's accessibility.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9.png" alt="A report." width="800" height="983" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/a-report-6edcb2b3872a9_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> <li><p>Click an audit to learn more about it.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52.png" alt="More information about an audit." width="800" height="586" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/more-information-an-audi-dc235a688ba52_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> <li><p>Click <strong>Learn More</strong> to view that audit's documentation.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab.png" alt="Viewing an audit's documentation." width="800" height="728" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/viewing-audits-document-4d64de9582bab_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> </ol> <h3 id="axe" data-text="See also: aXe extension" tabindex="-1">See also: aXe extension</h3> <p>You may prefer to use the <a href="https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd">aXe extension</a> or <a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">Lighthouse extension</a> rather than the <strong>Lighthouse</strong> panel that is available by default in Chrome. They generally provide the same information, since aXe is the underlying engine that powers the <strong>Lighthouse</strong> panel. The aXe extension has a different UI and describes audits slightly differently.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb.png" alt="The aXe extension." width="800" height="626" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-axe-extension-75ecbf80852fb_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>One advantage that the aXe extension has over the <strong>Audits</strong> panel is that it lets you inspect and highlight failing nodes.</p> <h2 id="device-toolbar" data-text="Test content reflow with the Device Toolbar" tabindex="-1">Test content reflow with the Device Toolbar</h2> <p>The <a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Web Content Accessibility Guidelines (WCAG) reflow</a> criterion recommends that web content remain viewable without loss of information even when the viewport is resized or changes orientation. By aligning content to a single column, users who use enlarged text are supported. To test how your content reflows, <a href="/docs/devtools/device-mode#responsive">resize the viewport</a> dynamically with the <strong>Device toolbar</strong> in the <strong>Lighthouse</strong> panel.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar.png" alt="Device toolbar in the Lighthouse panel." width="800" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/lighthouse-device-toolbar_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>To resize the viewport, drag the handles to whatever dimensions you need. For the specific dimensions to test, see the <a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">WCAG reflow success criterion</a>.</p> <h2 id="tab" data-text="The Accessibility tab" tabindex="-1">The Accessibility tab</h2> <p>The Accessibility tab is where you can view the accessibility tree, ARIA attributes, and computed accessibility properties of DOM nodes.</p> <p>To open the <strong>Accessibility</strong> tab:</p> <ol> <li>Click the <strong>Elements</strong> panel.</li> <li>In the <strong>DOM Tree</strong>, select the element which you want to inspect.</li> <li>Click the <strong>Accessibility</strong> tab. This tab may be hidden behind the <strong>More Tabs</strong> <span class="material-symbols-outlined">keyboard_double_arrow_right </span> button.</li> </ol> <p><img src="/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5.png" alt="Inspecting an h1 element of the DevTools homepage in the Accessibility tab." width="800" height="466" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/inspecting-h1-element-t-0ced6dac61ec5_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>You can drag the <strong>Accessibility</strong> tab to the front for quicker access in the future.</p> <h3 id="tree" data-text="View an element's position in the accessibility tree" tabindex="-1">View an element's position in the accessibility tree</h3> <p><a href="https://web.dev/the-accessibility-tree/">The accessibility tree</a> is a subset of the DOM tree. It only contains elements from the DOM tree that are relevant and useful for displaying the page's contents in a screen reader.</p> <p>Inspect an element's position in the accessibility tree from the <a href="#tab">Accessibility tab</a>.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967.png" alt="The Accessibility Tree section." width="800" height="524" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-accessibility-tree-se-c46e2c134d967_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This view lets you explore only a single node and its ancestors. To explore the whole accessibility tree, follow the steps below.</p> <h3 id="explore-tree" data-text="(Preview) Explore the full-page accessibility tree" tabindex="-1">(Preview) Explore the full-page accessibility tree</h3> <p>The full-page view of the accessibility tree lets you explore the whole tree and helps you better understand how your web content is exposed to assistive technology.</p> <p>To explore the accessibility tree:</p> <ol> <li>Check <span class="material-symbols-outlined">science</span> <strong>Enable full-page accessibility tree</strong>.</li> <li><p>On the action bar at the top, click <strong>Reload DevTools</strong>.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952.png" alt="Enable full-page accessibility tree." width="800" height="387" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/enable-full-page-accessib-484c68989c952_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> <li><p>In the upper right corner of the <strong>Elements</strong> panel, toggle the <span class="material-symbols-outlined">accessibility_new</span> <strong>Switch to Accessibility Tree view</strong> button.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345.png" alt="Full-page view of the accessibility tree" width="800" height="444" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/full-page-view-the-acces-1cc58ffae1345_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p></li> <li><p>Browse the accessibility tree. You can expand nodes or click to see details under <a href="#computed"><strong>Computed properties</strong></a>.</p></li> <li><p>Select a node and click the <span class="material-symbols-outlined">accessibility_new</span> <strong>Switch to DOM tree view</strong> button to toggle back to DOM tree.</p> <p>The corresponding DOM node is selected now. This is a great way to understand the mapping between the DOM node and its accessibility tree node.</p></li> </ol> <aside class="note"><b>Note:</b> Our team is still actively working on this preview feature. We are looking for your <a href="https://goo.gle/devtools-a11y-tree-feedback">feedback</a> to further improve it!</aside> <h3 id="aria" data-text="View an element's ARIA attributes" tabindex="-1">View an element's ARIA attributes</h3> <p>ARIA attributes ensure that screen readers have all of the information that they need in order to properly represent a page's contents.</p> <p>View an element's ARIA attributes in <a href="#tab">the Accessibility tab</a>.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01.png" alt="The ARIA Attributes section." width="800" height="506" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-aria-attributes-secti-a4d7ff6aa8e01_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h3 id="source-order" data-text="View the source order of elements on screen" tabindex="-1">View the source order of elements on screen</h3> <p>The elements on the page don't always appear in the order they are in the source. This might confuse users who depend on assistive technology to navigate the web.</p> <p>To view and debug the source order on your website:</p> <ol> <li><a href="/docs/devtools/open#inspect">Inspect an element</a> on the page.</li> <li>In <strong>Elements</strong> > <strong>Accessibility</strong> > <strong>Source Order Viewer</strong>, check <span class="material-symbols-outlined">check_box</span> <strong>Show source order</strong>.</li> </ol> <p>In the viewport, DevTools outlines nested elements with borders and marks them with numbers corresponding to their source order.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9.png" alt="Source order option checked." width="800" height="623" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/source-order-option-check-530139615aba9_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h3 id="computed" data-text="View an element's computed accessibility properties" tabindex="-1">View an element's computed accessibility properties</h3> <aside class="note"><b>Note:</b> If you're looking for computed CSS properties, see <a href="/docs/devtools/css/reference#computed">the Computed tab.</a>.</aside> <p>Some accessibility properties are dynamically calculated by the browser. These properties can be viewed in the <strong>Computed Properties</strong> section of the <strong>Accessibility</strong> tab.</p> <p>View an element's computed accessibility properties in <a href="#tab">the Accessibility tab</a>.</p> <p><img src="/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632.png" alt="The Computed (Accessibility) Properties section." width="800" height="506" srcset="https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_36.png 36w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_48.png 48w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_72.png 72w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_96.png 96w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_480.png 480w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_720.png 720w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_856.png 856w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_960.png 960w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_1440.png 1440w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_1920.png 1920w,https://developer.chrome.com/static/docs/devtools/accessibility/reference/image/the-computed-accessibili-d4ba7c1a5f632_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h2 id="rendering" data-text="The Rendering tab" tabindex="-1">The Rendering tab</h2> <p>Use the <strong>Rendering</strong> tab to emulate certain CSS media features without manually specifying them in your code or testing environment. These media features change the appearance of your web page based on the user's device preferences. To test your page's visual accessibility, <a href="/docs/devtools/rendering#open-rendering">open the <strong>Rendering</strong> tab</a> and explore the following options:</p> <ul> <li><a href="/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies">Emulate vision deficiencies</a> to view your page through several different simulated vision deficiencies.</li> <li><a href="/docs/devtools/rendering/emulate-css#emulate_css_media_feature_prefers-color-scheme">Emulate CSS media feature <code translate="no" dir="ltr">prefers-color-scheme</code></a> to see what your page looks like with dark or light mode enabled. Many think of dark mode as an aesthetic choice, but <a href="https://web.dev/articles/prefers-color-scheme#dark_mode_as_an_accessibility_tool">Dark mode as an accessibility tool</a> makes a case for its usefulness otherwise.</li> <li><a href="/docs/devtools/rendering/emulate-css#emulate_css_media_type_enable_print_preview">Emulate CSS media type</a> to see your page in a print or screen media style.</li> <li><a href="/docs/devtools/rendering/emulate-css#emulate_css_media_feature_forced-colors">Emulate CSS media feature <code translate="no" dir="ltr">forced-colors</code></a> to see how your page looks if the user agent enabled a forced colors mode.</li> <li><a href="/docs/devtools/rendering/emulate-css#emulate_css_media_feature_prefers-contrast">Emulate CSS media feature <code translate="no" dir="ltr">prefers-contrast</code></a> to see your web content with a higher, lower, or specific contrast value.</li> <li><a href="/docs/devtools/rendering/emulate-css#emulate_css_media_feature_prefers-reduced-motion">Emulate CSS media feature <code translate="no" dir="ltr">prefers-reduced-motion</code></a> to view your web content with reduced motion. Some users experience distraction or nausea from animated content. Use this option to see how your page looks without animations or things like smooth-scrolling.</li> <li><a href="/docs/devtools/rendering/emulate-css#reduced-transparency">Emulate CSS media feature <code translate="no" dir="ltr">prefers-reduced-transparency</code></a> to see how your web content appears if the user requests to reduce the transparent or translucent layer effects used on the device.</li> </ul> <h2 id="contrast" data-text="Discover and fix low-contrast text" tabindex="-1">Discover and fix low-contrast text</h2> <p>DevTools can automatically find low-contrast issues and suggest better colors to help you fix them. See <a href="/docs/devtools/accessibility/contrast">Make your website more readable</a> to learn more.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2022-06-09 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-06-09 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Chrome DevTools", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="3J1my2PYlS6CDls416o57cdwlgp7oi"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_public_developer_profiles","Cloud__enable_cloud_shell_fte_user_flow","OnSwitch__enable","Cloud__enable_free_trial_server_call","Profiles__require_profile_eligibility_for_signin","Search__enable_dynamic_content_confidential_banner","Profiles__enable_awarding_url","Profiles__enable_join_program_group_endpoint","Profiles__enable_completecodelab_endpoint","Cloud__enable_cloud_dlp_service","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_explain_this_code","Experiments__reqs_query_experiments","Profiles__enable_profile_collections","MiscFeatureFlags__emergency_css","CloudShell__cloud_shell_button","Profiles__enable_developer_profiles_callout","Profiles__enable_release_notes_notifications","DevPro__enable_cloud_innovators_plus","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_recognition_badges","Cloud__enable_legacy_calculator_redirect","CloudShell__cloud_code_overflow_menu","Profiles__enable_completequiz_endpoint","Profiles__enable_stripe_subscription_management","DevPro__enable_developer_subscriptions","Cloud__enable_cloud_shell","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__developers_footer_dark_image","Search__enable_page_map","TpcFeatures__enable_unmirrored_page_left_nav","MiscFeatureFlags__enable_project_variables","Profiles__enable_dashboard_curated_recommendations","Concierge__enable_pushui","Cloud__enable_cloudx_experiment_ids","EngEduTelemetry__enable_engedu_telemetry","Search__enable_suggestions_from_borg","Profiles__enable_complete_playlist_endpoint","Profiles__enable_page_saving","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_variable_operator","Search__enable_ai_eligibility_checks","Cloud__enable_llm_concierge_chat","BookNav__enable_tenant_cache_key","Analytics__enable_clearcut_logging"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[69,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Accessibility features reference | Chrome DevTools | Chrome for Developers