Labels and text alternatives | Articles

<!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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/articles/labels-and-text-alternatives"><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/articles/labels-and-text-alternatives" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/labels-and-text-alternatives" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/labels-and-text-alternatives?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/labels-and-text-alternatives?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/labels-and-text-alternatives?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/labels-and-text-alternatives?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/labels-and-text-alternatives?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/labels-and-text-alternatives?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/labels-and-text-alternatives?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/labels-and-text-alternatives?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/labels-and-text-alternatives?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/labels-and-text-alternatives?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/labels-and-text-alternatives?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/labels-and-text-alternatives?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/labels-and-text-alternatives?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/labels-and-text-alternatives?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/labels-and-text-alternatives?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/labels-and-text-alternatives?hl=ru" /><link rel="alternate" hreflang="es" href="https://web.dev/articles/labels-and-text-alternatives?hl=es" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/labels-and-text-alternatives?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/labels-and-text-alternatives?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/labels-and-text-alternatives?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/labels-and-text-alternatives?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/labels-and-text-alternatives" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=ru" /><link rel="alternate" hreflang="es-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=es" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/labels-and-text-alternatives?hl=vi" /><title>Labels and text alternatives  |  Articles  |  web.dev</title> <meta property="og:title" content="Labels and text alternatives  |  Articles  |  web.dev"><meta name="description" content="In order for a screen reader to present a spoken UI to the user, meaningful elements must have proper labels or text alternatives. A label or text alternative gives an element its accessible name, one of the key properties for expressing element semantics in the accessibility tree."> <meta property="og:description" content="In order for a screen reader to present a spoken UI to the user, meaningful elements must have proper labels or text alternatives. A label or text alternative gives an element its accessible name, one of the key properties for expressing element semantics in the accessibility tree."><meta property="og:url" content="https://web.dev/articles/labels-and-text-alternatives"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2018-11-18", "headline": "Labels and text alternatives" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Articles", "item": "https://web.dev/articles" },{ "@type": "ListItem", "position": 2, "name": "Labels and text alternatives", "item": "https://web.dev/articles/labels-and-text-alternatives" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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 > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " 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/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " 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/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " 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> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " 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/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" aria-label="Explore, selected" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " 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="Articles" 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-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" >Español</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="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://web.dev/explore" 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="" > Collections </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/explore/learn-core-web-vitals" track-metadata-eventdetail="https://web.dev/explore/learn-core-web-vitals" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - core web vitals" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Core Web Vitals" track-name="core web vitals" > Core Web Vitals </a> </tab> <tab > <a href="https://web.dev/explore/metrics" track-metadata-eventdetail="https://web.dev/explore/metrics" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - metrics" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Metrics" track-name="metrics" > Metrics </a> </tab> <tab > <a href="https://web.dev/explore/fast" track-metadata-eventdetail="https://web.dev/explore/fast" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - fast load times" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Fast load times" track-name="fast load times" > Fast load times </a> </tab> <tab > <a href="https://web.dev/explore/ai" track-metadata-eventdetail="https://web.dev/explore/ai" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - ai" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" > AI </a> </tab> <tab > <a href="https://web.dev/explore/how-to-optimize-inp" track-metadata-eventdetail="https://web.dev/explore/how-to-optimize-inp" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - optimize interaction to next paint (inp)" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Optimize Interaction to Next Paint (INP)" track-name="optimize interaction to next paint (inp)" > Optimize Interaction to Next Paint (INP) </a> </tab> <tab > <a href="https://web.dev/explore/progressive-web-apps" track-metadata-eventdetail="https://web.dev/explore/progressive-web-apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - progressive web apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Progressive Web Apps" track-name="progressive web apps" > Progressive Web Apps </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/accessibility" track-metadata-eventdetail="https://web.dev/accessibility" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - accessible to all" track-metadata-module="primary nav" aria-label="Accessible to all, selected" data-category="Site-Wide Custom Events" data-label="Tab: Accessible to all" track-name="accessible to all" > Accessible to all </a> </tab> <tab > <a href="https://web.dev/explore/reliable" track-metadata-eventdetail="https://web.dev/explore/reliable" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - network reliability" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Network reliability" track-name="network reliability" > Network reliability </a> </tab> <tab > <a href="https://web.dev/explore/secure" track-metadata-eventdetail="https://web.dev/explore/secure" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - safe and secure" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Safe and secure" track-name="safe and secure" > Safe and secure </a> </tab> <tab > <a href="https://web.dev/explore/discoverable" track-metadata-eventdetail="https://web.dev/explore/discoverable" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - easily discoverable" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Easily discoverable" track-name="easily discoverable" > Easily discoverable </a> </tab> <tab > <a href="https://web.dev/explore/payments" track-metadata-eventdetail="https://web.dev/explore/payments" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - web payments" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Web Payments" track-name="web payments" > Web Payments </a> </tab> <tab > <a href="https://web.dev/explore/media" track-metadata-eventdetail="https://web.dev/explore/media" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - media" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" > Media </a> </tab> <tab > <a href="https://web.dev/explore/devices" track-metadata-eventdetail="https://web.dev/explore/devices" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - devices" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Devices" track-name="devices" > Devices </a> </tab> <tab > <a href="https://web.dev/explore/animations" track-metadata-eventdetail="https://web.dev/explore/animations" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - animations" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" > Animations </a> </tab> <tab > <a href="https://web.dev/explore/identity" track-metadata-eventdetail="https://web.dev/explore/identity" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - identity" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Identity" track-name="identity" > Identity </a> </tab> <tab > <a href="https://web.dev/explore/webassembly" track-metadata-eventdetail="https://web.dev/explore/webassembly" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - webassembly" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: WebAssembly" track-name="webassembly" > WebAssembly </a> </tab> <tab > <a href="https://web.dev/explore/test-automation" track-metadata-eventdetail="https://web.dev/explore/test-automation" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - test automation" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Test automation" track-name="test automation" > Test automation </a> </tab> <tab > <a href="https://web.dev/explore/react" track-metadata-eventdetail="https://web.dev/explore/react" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - react" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: React" track-name="react" > React </a> </tab> <tab > <a href="https://web.dev/explore/angular" track-metadata-eventdetail="https://web.dev/explore/angular" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - angular" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Angular" track-name="angular" > Angular </a> </tab> <tab > <a href="https://web.dev/explore/mini-apps" track-metadata-eventdetail="https://web.dev/explore/mini-apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - mini apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Mini apps" track-name="mini apps" > Mini apps </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " 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> </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="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> </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="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> </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="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/explore/learn-core-web-vitals" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Core Web Vitals" track-name="core web vitals" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Core Web Vitals" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Core Web Vitals </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/metrics" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Metrics" track-name="metrics" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Metrics" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Metrics </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/fast" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Fast load times" track-name="fast load times" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fast load times" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Fast load times </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/how-to-optimize-inp" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Optimize Interaction to Next Paint (INP)" track-name="optimize interaction to next paint (inp)" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Optimize Interaction to Next Paint (INP)" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Optimize Interaction to Next Paint (INP) </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/progressive-web-apps" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Progressive Web Apps" track-name="progressive web apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Progressive Web Apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Progressive Web Apps </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Accessible to all" track-name="accessible to all" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessible to all" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Accessible to all </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/reliable" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Network reliability" track-name="network reliability" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network reliability" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network reliability </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/secure" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Safe and secure" track-name="safe and secure" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Safe and secure" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Safe and secure </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/discoverable" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Easily discoverable" track-name="easily discoverable" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Easily discoverable" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Easily discoverable </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/payments" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Web Payments" track-name="web payments" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Payments" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Payments </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/media" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Media" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Media </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/devices" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Devices" track-name="devices" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Devices" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Devices </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/animations" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Animations" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Animations </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/identity" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Identity" track-name="identity" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/webassembly" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: WebAssembly" track-name="webassembly" data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebAssembly" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebAssembly </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/test-automation" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Test automation" track-name="test automation" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Test automation" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Test automation </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/react" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: React" track-name="react" data-category="Site-Wide Custom Events" data-label="Responsive Tab: React" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > React </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/angular" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Angular" track-name="angular" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Angular" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Angular </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/mini-apps" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Mini apps" track-name="mini apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mini apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mini apps </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" 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="/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="_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>Understand the diverse needs of users</span> </div></li> <li class="devsite-nav-item"><a href="/articles/what-is-accessibility" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/what-is-accessibility" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/what-is-accessibility" ><span class="devsite-nav-text" tooltip>What is accessibility?</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>Make your site keyboard accessible</span> </div></li> <li class="devsite-nav-item"><a href="/articles/keyboard-access" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/keyboard-access" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/keyboard-access" ><span class="devsite-nav-text" tooltip>Keyboard access fundamentals</span></a></li> <li class="devsite-nav-item"><a href="/articles/use-semantic-html" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/use-semantic-html" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/use-semantic-html" ><span class="devsite-nav-text" tooltip>Use semantic HTML for easy keyboard wins</span></a></li> <li class="devsite-nav-item"><a href="/articles/control-focus-with-tabindex" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/control-focus-with-tabindex" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/control-focus-with-tabindex" ><span class="devsite-nav-text" tooltip>Control focus with tabindex</span></a></li> <li class="devsite-nav-item"><a href="/articles/style-focus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/style-focus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/style-focus" ><span class="devsite-nav-text" tooltip>Style focus</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>Understand semantics and basic screen reader support</span> </div></li> <li class="devsite-nav-item"><a href="/articles/semantics-and-screen-readers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/semantics-and-screen-readers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/semantics-and-screen-readers" ><span class="devsite-nav-text" tooltip>Semantics and screen readers</span></a></li> <li class="devsite-nav-item"><a href="/articles/headings-and-landmarks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/headings-and-landmarks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/headings-and-landmarks" ><span class="devsite-nav-text" tooltip>Headings and landmarks</span></a></li> <li class="devsite-nav-item"><a href="/articles/labels-and-text-alternatives" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/labels-and-text-alternatives" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/labels-and-text-alternatives" ><span class="devsite-nav-text" tooltip>Labels and text alternatives</span></a></li> <li class="devsite-nav-item"><a href="/articles/media-accessibility" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/media-accessibility" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/media-accessibility" ><span class="devsite-nav-text" tooltip>Media accessibility</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>Create a design and CSS that supports users with different needs</span> </div></li> <li class="devsite-nav-item"><a href="/articles/accessible-tap-targets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/accessible-tap-targets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/accessible-tap-targets" ><span class="devsite-nav-text" tooltip>Accessible tap targets</span></a></li> <li class="devsite-nav-item"><a href="/articles/color-and-contrast-accessibility" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/color-and-contrast-accessibility" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/color-and-contrast-accessibility" ><span class="devsite-nav-text" tooltip>Color and contrast accessibility</span></a></li> <li class="devsite-nav-item"><a href="/articles/accessible-responsive-design" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/accessible-responsive-design" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/accessible-responsive-design" ><span class="devsite-nav-text" tooltip>Accessible responsive design</span></a></li> <li class="devsite-nav-item"><a href="/articles/content-reordering" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/content-reordering" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/content-reordering" ><span class="devsite-nav-text" tooltip>Content reordering</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>Hear from community experts</span> </div></li> <li class="devsite-nav-item"><a href="/blog/community-highlights/melanie" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /blog/community-highlights/melanie" track-type="bookNav" track-name="click" track-metadata-eventdetail="/blog/community-highlights/melanie" ><span class="devsite-nav-text" tooltip>Meet Melanie Sumner</span></a></li> <li class="devsite-nav-item"><a href="/blog/community-highlights/shuyi" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /blog/community-highlights/shuyi" track-type="bookNav" track-name="click" track-metadata-eventdetail="/blog/community-highlights/shuyi" ><span class="devsite-nav-text" tooltip>Meet Olutimilehin Olushuyi</span></a></li> <li class="devsite-nav-item"><a href="/blog/community-highlights/elisa" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /blog/community-highlights/elisa" track-type="bookNav" track-name="click" track-metadata-eventdetail="/blog/community-highlights/elisa" ><span class="devsite-nav-text" tooltip>Meet Elisa Bandy</span></a></li> <li class="devsite-nav-item"><a href="/blog/community-highlights/albert-kim" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /blog/community-highlights/albert-kim" track-type="bookNav" track-name="click" track-metadata-eventdetail="/blog/community-highlights/albert-kim" ><span class="devsite-nav-text" tooltip>Meet Albert Kim</span></a></li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" 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://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="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/articles" 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="Articles" > Articles </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/explore" 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="" > Explore </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/accessibility" 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="" > Accessible to all </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Labels and text alternatives </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> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Rob Dodson" src="https://web.dev/images/authors/robdodson.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Rob Dodson </span> <div class="wd-author__links"> <a href="https://twitter.com/rob_dodson" aria-label="Rob Dodson 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/robdodson" aria-label="Rob Dodson 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/@robdodson" aria-label="Rob Dodson 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> <a href="https://robdodson.me" aria-label="Rob Dodson's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> </div></p> <p>In order for a screen reader to present a spoken UI to the user, meaningful elements must have proper labels or text alternatives. A label or text alternative gives an element its accessible <strong>name</strong>, one of the key properties for <a href="/articles/semantics-and-screen-readers#semantic_properties_and_the_accessibility_tree">expressing element semantics in the accessibility tree</a>.</p> <p>When an element's name is combined with the element's <strong>role</strong>, it gives the user context so they can understand what type of element they're interacting with and how it is represented on the page. If a name is not present, then a screen reader only announces the element's role. Imagine trying to navigate a page and hearing, "button," "checkbox," "image" without any additional context. This is why labeling and text alternatives are crucial to a good, accessible experience.</p> <h2 id="inspect_an_elements_name" data-text="Inspect an element's name" tabindex="-1">Inspect an element's name</h2> <p>It's easy to check an element's accessible name using Chrome's DevTools:</p> <ol> <li>Right-click on an element and choose <strong>Inspect</strong>. This opens the DevTools Elements panel.</li> <li>In the Elements panel, look for the <strong>Accessibility</strong> pane. It may be hidden behind a <code translate="no" dir="ltr">»</code> symbol.</li> <li>In the <strong>Computed Properties</strong> dropdown, look for the <strong>Name</strong> property.</li> </ol> <figure> <img src="/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu.png" alt width="800" height="471" srcset="https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_36.png 36w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_48.png 48w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_72.png 72w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_96.png 96w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_480.png 480w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_720.png 720w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_856.png 856w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_960.png 960w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_1440.png 1440w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_1920.png 1920w,https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> DevTools accessibility pane showing the computed name for a button. </figcaption> </figure> <aside class="note"><b>Note: </b> To learn more, check out the <a href="https://developer.chrome.com/docs/devtools/accessibility/reference">DevTools Accessibility Reference</a>. </aside> <p>Whether you're looking at an <code translate="no" dir="ltr">img</code> with <code translate="no" dir="ltr">alt</code> text or an <code translate="no" dir="ltr">input</code> with a <code translate="no" dir="ltr">label</code>, all of these scenarios result in the same outcome: giving an element its accessible name.</p> <h2 id="check_for_missing_names" data-text="Check for missing names" tabindex="-1">Check for missing names</h2> <p>There are different ways to add an accessible name to an element, depending on its type. The following table lists the most common element types that need accessible names and links to explanations for how to add them.</p> <div class="table-wrapper"> <table> <thead> <tr> <th>Element type</th> <th>How to add a name</th> </tr> </thead> <tbody> <tr> <td> HTML document </td> <td> <a href="#label_documents_and_frames">Label documents and frames</a> </td> </tr> <tr> <td> <code translate="no" dir="ltr"><frame></code> or <code translate="no" dir="ltr"><iframe></code> elements </td> <td> <a href="#label_documents_and_frames">Label documents and frames</a> </td> </tr> <tr> <td> Image elements </td> <td> <a href="#include_text_alternatives_for_images_and_objects"> Include text alternatives for images and objects </a> </td> </tr> <tr> <td> <code translate="no" dir="ltr"><input type="image"></code> elements </td> <td> <a href="#include_text_alternatives_for_images_and_objects"> Include text alternatives for images and objects </a> </td> </tr> <tr> <td> <code translate="no" dir="ltr"><object></code> elements </td> <td> <a href="#include_text_alternatives_for_images_and_objects"> Include text alternatives for images and objects </a> </td> </tr> <tr> <td> Buttons </td> <td> <a href="#label_buttons_and_links">Label buttons and links</a> </td> </tr> <tr> <td> Links </td> <td> <a href="#label_buttons_and_links">Label buttons and links</a> </td> </tr> <tr> <td> Form elements </td> <td> <a href="#label_form_elements">Label form elements</a> </td> </tr> </tbody> </table> </div> <h2 id="label_documents_and_frames" data-text="Label documents and frames" tabindex="-1">Label documents and frames</h2> <p>Every page should have a <a href="https://developer.mozilla.org/docs/Web/HTML/Element/title"><code translate="no" dir="ltr">title</code></a> element that briefly explains what the page is about. The <code translate="no" dir="ltr">title</code> element gives the page its accessible name. When a screen reader enters the page, this is the first text that is announced.</p> <p>For example, the page below has the title "Mary's Maple Bar Fast-Baking Recipe":</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Matlab"><code translate="no" dir="ltr"><<span class="devsite-syntax-sx">!doctype html</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-n">html</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">lang</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"en"</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-nb">head</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-n">title>Mary</span><span class="devsite-syntax-o">'</span><span class="devsite-syntax-n">s</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Maple</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Bar</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Fast</span><span class="devsite-syntax-o">-</span><span class="devsite-syntax-n">Baking</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Recipe</span><<span class="devsite-syntax-o">/</span><span class="devsite-syntax-nb">title</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-o">/</span><span class="devsite-syntax-nb">head</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-n">body</span>> <span class="devsite-syntax-w"> </span>… <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-o">/</span><span class="devsite-syntax-n">body</span>> <<span class="devsite-syntax-o">/</span><span class="devsite-syntax-n">html</span>> </code></pre></devsite-code> <aside class="note"><b>Note: </b> For tips on writing effective titles, see the <a href="/lighthouse-seo">Write descriptive titles guide</a>. </aside> <p>Similarly, any <code translate="no" dir="ltr">frame</code> or <code translate="no" dir="ltr">iframe</code> elements should have <code translate="no" dir="ltr">title</code> attributes:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><iframe title="An interactive map of San Francisco" src="…"></iframe> </code></pre></devsite-code> <p>While an <code translate="no" dir="ltr">iframe</code>'s contents may contain their own internal <code translate="no" dir="ltr">title</code> element, a screen reader usually stops at the frame boundary and announces the element's role—"frame"—and its accessible name, provided by the <code translate="no" dir="ltr">title</code> attribute. This lets the user decide if they wish to enter the frame or bypass it.</p> <h2 id="include_text_alternatives_for_images_and_objects" data-text="Include text alternatives for images and objects" tabindex="-1">Include text alternatives for images and objects</h2> <p>An <code translate="no" dir="ltr">img</code> should always be accompanied by an <a href="https://developer.mozilla.org/docs/Web/HTML/Element/img#Attributes"><code translate="no" dir="ltr">alt</code></a> attribute to give the image its accessible name. If the image fails to load, the <code translate="no" dir="ltr">alt</code> text is used as a placeholder so users have a sense of what the image was trying to convey.</p> <p>Writing good <code translate="no" dir="ltr">alt</code> text is a bit of an art, but there are a couple of guidelines you can follow:</p> <ol> <li>Determine if the image provides content that would otherwise be difficult to attain from reading the surrounding text.</li> <li>If so, convey the content as succinctly as possible.</li> </ol> <p>If the image acts as decoration and does not provide any useful content, you can give it an empty <code translate="no" dir="ltr">alt=""</code> attribute to remove it from the accessibility tree.</p> <aside class="note"><b>Note: </b> Learn more about writing effective <code translate="no" dir="ltr">alt</code> text by checking out <a href="https://webaim.org/techniques/alttext/">WebAIM's guide to Alternative Text</a>. </aside> <h3 id="images_as_links_and_inputs" data-text="Images as links and inputs" tabindex="-1">Images as links and inputs</h3> <p>An image wrapped in a link should use the <code translate="no" dir="ltr">img</code>'s <code translate="no" dir="ltr">alt</code> attribute to describe where the user will navigate to if they click on the link:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><a href="https://en.wikipedia.org/wiki/Google"> <img alt="Google's wikipedia page" src="google-logo.jpg"> </a> </code></pre></devsite-code> <p>Similarly, if an <code translate="no" dir="ltr"><input type="image"></code> element is used to create an image button, it should contain <code translate="no" dir="ltr">alt</code> text that describes the action that occurs when the user clicks on the button:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Carbon"><code translate="no" dir="ltr"><<span class="devsite-syntax-nx">form</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-nx">label</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">Username</span><span class="devsite-syntax-p">:</span> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-nx">input</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">type</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"text"</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-o">/</span><span class="devsite-syntax-nx">label</span>> <span class="devsite-syntax-w"> </span><<span class="devsite-syntax-nx">input</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">type</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"image"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">alt</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"Sign in"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">src</span><span class="devsite-syntax-p">=</span><span class="devsite-syntax-s">"./sign-in-button.png"</span>> <<span class="devsite-syntax-o">/</span><span class="devsite-syntax-nx">form</span>> </code></pre></devsite-code> <h3 id="embedded_objects" data-text="Embedded objects" tabindex="-1">Embedded objects</h3> <p><code translate="no" dir="ltr"><object></code> elements, which are typically used for embeds like Flash, PDFs, or ActiveX, should also contain alternative text. Similar to images, this text is displayed if the element fails to render. The alternative text goes inside the <code translate="no" dir="ltr">object</code> element as regular text, like "Annual report" below:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><object type="application/pdf" data="/report.pdf"> Annual report. </object> </code></pre></devsite-code> <h2 id="label_buttons_and_links" data-text="Label buttons and links" tabindex="-1">Label buttons and links</h2> <p>Buttons and links are often crucial to the experience of a site, and it is important that both have good accessible names.</p> <h3 id="buttons" data-text="Buttons" tabindex="-1">Buttons</h3> <p>A <code translate="no" dir="ltr">button</code> element always attempts to compute its accessible name using its text content. For buttons that are not part of a <code translate="no" dir="ltr">form</code>, writing a clear action as the text content may be all you need to create a good accessible name.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><button>Book Room</button> </code></pre></devsite-code> <p><img src="/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01.png" alt="A mobile form with a 'Book Room' button." width="800" height="269" srcset="https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_36.png 36w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_48.png 48w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_72.png 72w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_96.png 96w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_480.png 480w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_720.png 720w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_856.png 856w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_960.png 960w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_1440.png 1440w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_1920.png 1920w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-mobile-form-a-book-ro-ecf6f7214ab01_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>One common exception to this rule is icon buttons. An icon button may use an image or an icon font to provide the text content for the button. For example, the buttons used in a What You See Is What You Get (WYSIWYG) editor to format text are typically just graphic symbols:</p> <p><img src="/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487.png" alt="A left align icon button." width="800" height="269" srcset="https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_36.png 36w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_48.png 48w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_72.png 72w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_96.png 96w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_480.png 480w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_720.png 720w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_856.png 856w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_960.png 960w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_1440.png 1440w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_1920.png 1920w,https://web.dev/static/articles/labels-and-text-alternatives/image/a-left-align-icon-button-26223555f4487_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>When working with icon buttons, it can be helpful to give them an explicit accessible name using the <code translate="no" dir="ltr">aria-label</code> attribute. <code translate="no" dir="ltr">aria-label</code> overrides any text content inside the button, letting you clearly describe the action to anyone using a screen reader.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><button aria-label="Left align"></button> </code></pre></devsite-code> <h3 id="links" data-text="Links" tabindex="-1">Links</h3> <p>Similar to buttons, links primarily get their accessible name from their text content. A nice trick when creating a link is to put the most meaningful piece of text into the link itself, rather than filler words like "Here" or "Read More."</p> <div class="wd-compare"> <div class="compare-worse">Not descriptive enough</div> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML">Check out our guide to web performance <a href="/guide">here</a>.</pre></devsite-code> </div> <div class="wd-compare"> <div class="compare-better">Useful content!</div> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML">Check out <a href="/guide">our guide to web performance</a>.</pre></devsite-code> </div> <p>This is especially helpful for screen readers that offer shortcuts to list all of the links on the page. If links are full of repetitive filler text, these shortcuts become much less useful:</p> <figure> <img src="/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74.jpg" alt="VoiceOver's links menu filled with the word 'here'." width="519" height="469" srcset="https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_36.jpg 36w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_48.jpg 48w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_72.jpg 72w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_96.jpg 96w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_480.jpg 480w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_720.jpg 720w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_856.jpg 856w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_960.jpg 960w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_1440.jpg 1440w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_1920.jpg 1920w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> Example of VoiceOver, a screen reader for macOS, showing the navigate by links menu. </figcaption> </figure> <h2 id="label_form_elements" data-text="Label form elements" tabindex="-1">Label form elements</h2> <p>There are two ways to associate a label with a form element such as a checkbox. Either of the methods causes the label text to also become a click target for the checkbox, which is also helpful for mouse or touchscreen users. To associate a label with an element, either:</p> <ul> <li>Place the input element inside of a label element</li> </ul> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><label> <input type="checkbox">Receive promotional offers?</input> </label> </code></pre></devsite-code> <ul> <li>Or use the label's <code translate="no" dir="ltr">for</code> attribute and refer to the element's <code translate="no" dir="ltr">id</code></li> </ul> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><input id="promo" type="checkbox"></input> <label for="promo">Receive promotional offers?</label> </code></pre></devsite-code> <p>When the checkbox has been labeled correctly, the screen reader can report that the element has a role of checkbox, is in a checked state, and is named "Receive promotional offers?" like in the VoiceOver example below:</p> <figure> <img src="/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326.png" alt="VoiceOver text output showing 'Receive promotional offers?'" width="640" height="174" srcset="https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_36.png 36w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_48.png 48w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_72.png 72w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_96.png 96w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_480.png 480w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_720.png 720w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_856.png 856w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_960.png 960w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_1440.png 1440w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_1920.png 1920w,https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <p>TODO: DevSite - Think and Check assessment</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 2018-11-18 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 2018-11-18 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 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> <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" >Español</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="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-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Articles", "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="BsEPhPbKHW3ZJQc7DP3m7bdHFYtU4U"> (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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/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,["Search__enable_dynamic_content_confidential_banner","MiscFeatureFlags__emergency_css","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_profile_collections","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_awarding_url","Analytics__enable_clearcut_logging","Search__enable_ai_eligibility_checks","CloudShell__cloud_code_overflow_menu","Profiles__enable_developer_profiles_callout","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__enable_view_transitions","Profiles__enable_release_notes_notifications","Profiles__enable_completecodelab_endpoint","Profiles__enable_public_developer_profiles","Search__enable_suggestions_from_borg","Cloud__enable_cloud_dlp_service","DevPro__enable_developer_subscriptions","DevPro__enable_cloud_innovators_plus","OnSwitch__enable","MiscFeatureFlags__developers_footer_image","Cloud__enable_cloud_facet_chat","Profiles__enable_page_saving","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_cloud_shell_fte_user_flow","EngEduTelemetry__enable_engedu_telemetry","Search__enable_page_map","Cloud__enable_free_trial_server_call","Experiments__reqs_query_experiments","CloudShell__cloud_shell_button","Cloud__enable_legacy_calculator_redirect","Profiles__enable_complete_playlist_endpoint","Concierge__enable_pushui","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_shell","Cloud__enable_cloudx_experiment_ids","TpcFeatures__enable_required_headers","Cloud__enable_llm_concierge_chat","Cloud__enable_cloudx_ping","BookNav__enable_tenant_cache_key"],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]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Labels and text alternatives | Articles | web.dev