Learn Accessibility

<!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="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><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/web/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/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/learn/accessibility"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/learn/accessibility" /><link rel="alternate" hreflang="x-default" href="https://web.dev/learn/accessibility" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/learn/accessibility" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/learn/accessibility" /><title>Learn Accessibility  |  web.dev</title> <meta property="og:title" content="Learn Accessibility  |  web.dev"><meta name="description" content="An evergreen accessibility course and reference to level up your web development."> <meta property="og:description" content="An evergreen accessibility course and reference to level up your web development."><meta property="og:url" content="https://web.dev/learn/accessibility"><meta property="og:image" content="https://web.dev/learn/accessibility/card.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="playlist" theme="web-theme" type="playlist" appearance layout="full" 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="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </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 class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" aria-label="Resources, selected" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Resources" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" 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 web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Web Platform</li> <li class="devsite-nav-description">Dive into the web platform, at your pace. </li> <li class="devsite-nav-item"> <a href="https://web.dev/html" track-type="nav" track-metadata-eventdetail="https://web.dev/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/css" track-type="nav" track-metadata-eventdetail="https://web.dev/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> JavaScript </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>User experience</li> <li class="devsite-nav-description">Learn how to build better user experiences. </li> <li class="devsite-nav-item"> <a href="https://web.dev/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/identity" track-type="nav" track-metadata-eventdetail="https://web.dev/identity" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Learn</li> <li class="devsite-nav-description">Get up to speed on web development.</li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/html" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/css" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn JavaScript </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> More courses </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Additional resources</li> <li class="devsite-nav-description">Explore content collections, patterns, and more.</li> <li class="devsite-nav-item"> <a href="https://web.dev/explore/ai" track-type="nav" track-metadata-eventdetail="https://web.dev/explore/ai" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> AI and the web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/explore" track-type="nav" track-metadata-eventdetail="https://web.dev/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Explore </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 - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/patterns" track-type="nav" track-metadata-eventdetail="https://web.dev/patterns" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Patterns </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/shows" track-type="nav" track-metadata-eventdetail="https://web.dev/shows" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Podcasts & shows </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/newsletter" track-type="nav" track-metadata-eventdetail="https://web.dev/newsletter" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Developer Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/about" track-type="nav" track-metadata-eventdetail="https://web.dev/about" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> About web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://web.dev/baseline" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/baseline" track-type="nav" track-metadata-position="nav - baseline" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" > Baseline </a> </tab> <tab > <a href="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/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 > <a href="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/case-studies" track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" > Case Studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/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-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://web.dev/learn" 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="" > Resources </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://web.dev/learn/privacy" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/privacy" track-type="nav" track-metadata-position="nav - privacy" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" > Privacy </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/learn/accessibility" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/accessibility" 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> <tab > <a href="https://web.dev/learn/html" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/html" track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/learn/images" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/images" track-type="nav" track-metadata-position="nav - images" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" > Images </a> </tab> <tab > <a href="https://web.dev/learn/design" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/design" track-type="nav" track-metadata-position="nav - responsive design" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" > Responsive Design </a> </tab> <tab > <a href="https://web.dev/learn/forms" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/forms" track-type="nav" track-metadata-position="nav - forms" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" > Forms </a> </tab> <tab > <a href="https://web.dev/learn/pwa" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/pwa" track-type="nav" track-metadata-position="nav - pwa" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" > PWA </a> </tab> <tab > <a href="https://web.dev/learn/css" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/css" track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/learn/performance" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/performance" track-type="nav" track-metadata-position="nav - performance" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" > Performance </a> </tab> <tab > <a href="https://web.dev/learn/testing" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/testing" track-type="nav" track-metadata-position="nav - testing" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" > Testing </a> </tab> <tab > <a href="https://web.dev/learn/javascript" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/javascript" track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <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="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </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="/learn" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Resources" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Resources </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: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/learn/privacy" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" 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> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/images" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Images" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Images </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/design" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Responsive Design" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Responsive Design </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/forms" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Forms" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Forms </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/pwa" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" data-category="Site-Wide Custom Events" data-label="Responsive Tab: PWA" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PWA </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/testing" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Testing" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Testing </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" 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="/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="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case Studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case Studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Resources" 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 > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/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="/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="/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 devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </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" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Chrome is back at Google I/O on May 20-21! <a href="https://io.google/2025/register/?utm_source=devsite&utm_medium=embedded_marketing&utm_campaign=wdd&utm_content=">Register now</a> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" 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="web.dev" > web.dev </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn" 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="" > Resources </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn/accessibility" 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="" > Accessibility </a> </li> </ul> </div> <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> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <devsite-playlist> <div class="devsite-playlist--header"> <div class="devsite-playlist--inner"> <div class="devsite-playlist--header-details"> <div class="devsite-playlist--header-details-info"> <h1 class="devsite-playlist-title">Learn Accessibility</h1> <div class="devsite-playlist-details"></div> <p> An evergreen accessibility course and reference to level up your web development.<br> <a class="button devsite-playlist-return-button gc-analytics-event" data-category="devsite-playlist: go back button" hidden> Go back </a> </p> <div class="devsite-playlist-summary"> <div> </div> <div class="devsite-playlist-summary-details">   </div> <div> </div> </div> </div> <div class="devsite-playlist--header-badge-info"> </div> </div> </div> </div> <div class="devsite-playlist--sections"> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/welcome" path="https://web.dev/learn/accessibility/welcome" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Welcome to Learn Accessibility! </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> An evergreen accessibility course and reference to level up your web development. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/welcome" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/welcome"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/why" path="https://web.dev/learn/accessibility/why" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> What is digital accessibility, and why does it matter? </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Design and build websites and web apps so that people with disabilities can interact in a meaningful and equivalent way. Read about the business and legal impact of these choices. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/why" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/why"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/measure" path="https://web.dev/learn/accessibility/measure" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> How is digital accessibility measured? </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Introduction to accessibility measurement, which ensures everyone, including people with disabilities, can still interact with your website in a meaningful and equal way. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/measure" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/measure"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/aria-html" path="https://web.dev/learn/accessibility/aria-html" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> ARIA and HTML </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> When to use ARIA versus HTML. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/aria-html" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/aria-html"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/structure" path="https://web.dev/learn/accessibility/structure" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Content structure </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Use semantic HTML, landmarks, and tables for accessible content. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/structure" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/structure"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/more-html" path="https://web.dev/learn/accessibility/more-html" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> The Document </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Additional HTML elements to consider when building accessible websites and web apps. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/more-html" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/more-html"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/focus" path="https://web.dev/learn/accessibility/focus" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Keyboard focus </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Understand and enhance keyboard navigation order and style. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/focus" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/focus"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/javascript" path="https://web.dev/learn/accessibility/javascript" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> JavaScript </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Write accessible trigger events, page titles, dynamic content, and more. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/javascript" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/javascript"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/images" path="https://web.dev/learn/accessibility/images" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Images </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Create accessible images. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/images" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/images"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/color-contrast" path="https://web.dev/learn/accessibility/color-contrast" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Color and contrast </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Build accessible color palettes with appropriate contrast. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/color-contrast" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/color-contrast"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/motion" path="https://web.dev/learn/accessibility/motion" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Animation and motion </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Support people with all types of movement-triggered disorders. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/motion" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/motion"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/typography" path="https://web.dev/learn/accessibility/typography" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Typography </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Pick the right typefaces, font sizes, and structure your copy with an accessible layout. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/typography" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/typography"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/video-audio" path="https://web.dev/learn/accessibility/video-audio" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Video and audio </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Alternative media types which make your video and audio accessible. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/video-audio" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/video-audio"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/forms" path="https://web.dev/learn/accessibility/forms" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Forms </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Create accessible forms. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/forms" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/forms"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/patterns" path="https://web.dev/learn/accessibility/patterns" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Patterns, components, and design systems </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Evaluate patterns, components, and design systems for accessibility. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/patterns" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/patterns"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/design-ux" path="https://web.dev/learn/accessibility/design-ux" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Design and user experience </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Create accessible designs and evaluate your user's experience. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/design-ux" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/design-ux"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/test-automated" path="https://web.dev/learn/accessibility/test-automated" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Automated accessibility testing </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> How to perform automated accessibility testing. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/test-automated" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/test-automated"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/test-manual" path="https://web.dev/learn/accessibility/test-manual" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Manual accessibility testing </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> How to manually test for accessibility. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/test-manual" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/test-manual"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/test-assistive-technology" path="https://web.dev/learn/accessibility/test-assistive-technology" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Assistive Technology testing </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> How to test with Assistive Technology (AT). </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/test-assistive-technology" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/test-assistive-technology"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/conclusion" path="https://web.dev/learn/accessibility/conclusion" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Conclusion and next steps </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Further resources to help you take your next steps. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/accessibility/conclusion" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/conclusion"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/accessibility/glossary" path="https://web.dev/learn/accessibility/glossary" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Glossary </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article <em>Optional</em> </div> <div class="devsite-playlist--item--content"> <p> Learn common accessibility terms and concepts. </p> </div> <div class="devsite-playlist--item--actions"> <button class="playlist-skip gc-analytics-event" data-category="devsite-playlist: skip button"> Skip </button> <a href="https://web.dev/learn/accessibility/glossary" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/accessibility/glossary"> Read article </a> </div> </div> </div> </div> <div class="devsite-playlist--footer"> <devsite-thumb-rating position="main" disable-categories></devsite-thumb-rating> </div> </devsite-playlist> </div> <div class="devsite-floating-action-buttons"> </div> </article> <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"]],[],[],[]] </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 wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <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=1400680&template=1857359" 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:1400680&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://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <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 2)" > 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 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/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> </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-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "playlist", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="q235NTXZMj8aeQ+Sj6wMK3x30lh0fo"> (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/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/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","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_cloudx_ping","CloudShell__cloud_shell_button","OnSwitch__enable","CloudShell__cloud_code_overflow_menu","Cloud__enable_cloud_shell","Profiles__enable_awarding_url","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_release_notes_notifications","Profiles__enable_completecodelab_endpoint","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_cloud_facet_chat","Profiles__enable_stripe_subscription_management","Cloud__enable_free_trial_server_call","Profiles__enable_join_program_group_endpoint","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_variable_operator","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloud_dlp_service","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFlags__emergency_css","BookNav__enable_tenant_cache_key","Search__enable_ai_eligibility_checks","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_view_transitions","Analytics__enable_clearcut_logging","Profiles__enable_completequiz_endpoint","Profiles__enable_page_saving","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__developers_footer_dark_image","Search__enable_dynamic_content_confidential_banner","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_suggestions_from_borg","MiscFeatureFlags__developers_footer_image","Experiments__reqs_query_experiments","Profiles__enable_public_developer_profiles","Profiles__enable_profile_collections","DevPro__enable_cloud_innovators_plus","Profiles__enable_developer_profiles_callout","Profiles__enable_complete_playlist_endpoint","Concierge__enable_pushui","Search__enable_page_map","TpcFeatures__enable_unmirrored_page_left_nav","Cloud__enable_cloudx_experiment_ids","Profiles__require_profile_eligibility_for_signin"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-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,[38,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-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Learn Accessibility | web.dev