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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/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> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown devsite-dropdown-full "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Web Platform</li> <li class="devsite-nav-description">Dive into the web platform, at your pace. </li> <li class="devsite-nav-item"> <a href="https://web.dev/html" track-type="nav" track-metadata-eventdetail="https://web.dev/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/css" track-type="nav" track-metadata-eventdetail="https://web.dev/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> JavaScript </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>User experience</li> <li class="devsite-nav-description">Learn how to build better user experiences. </li> <li class="devsite-nav-item"> <a href="https://web.dev/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/identity" track-type="nav" track-metadata-eventdetail="https://web.dev/identity" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Learn</li> <li class="devsite-nav-description">Get up to speed on web development.</li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/html" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/css" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn JavaScript </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> More courses </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Additional resources</li> <li class="devsite-nav-description">Explore content collections, patterns, and more.</li> <li class="devsite-nav-item"> <a href="https://web.dev/explore/ai" track-type="nav" track-metadata-eventdetail="https://web.dev/explore/ai" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> AI and the web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/explore" track-type="nav" track-metadata-eventdetail="https://web.dev/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Explore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/patterns" track-type="nav" track-metadata-eventdetail="https://web.dev/patterns" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Patterns </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/shows" track-type="nav" track-metadata-eventdetail="https://web.dev/shows" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Podcasts & shows </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/newsletter" track-type="nav" track-metadata-eventdetail="https://web.dev/newsletter" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Developer Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/about" track-type="nav" track-metadata-eventdetail="https://web.dev/about" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> About web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://web.dev/baseline" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/baseline" track-type="nav" track-metadata-position="nav - baseline" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" > Baseline </a> </tab> <tab > <a href="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/case-studies" track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" > Case Studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="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 devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip > Resources </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case Studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case Studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" 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> </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> </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="WakMlzC+sUkkrfgblimM1PAxOYiaQ1"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["MiscFeatureFlags__emergency_css","Profiles__enable_completequiz_endpoint","DevPro__enable_cloud_innovators_plus","Cloud__enable_llm_concierge_chat","Profiles__enable_release_notes_notifications","TpcFeatures__enable_unmirrored_page_left_nav","Search__enable_dynamic_content_confidential_banner","Profiles__enable_complete_playlist_endpoint","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_join_program_group_endpoint","MiscFeatureFlags__enable_variable_operator","Search__enable_suggestions_from_borg","Profiles__enable_completecodelab_endpoint","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__developers_footer_image","CloudShell__cloud_shell_button","MiscFeatureFlags__enable_view_transitions","OnSwitch__enable","MiscFeatureFlags__enable_project_variables","Profiles__enable_public_developer_profiles","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_cloud_shell","Cloud__enable_cloud_dlp_service","Profiles__enable_stripe_subscription_management","Analytics__enable_clearcut_logging","Cloud__enable_free_trial_server_call","DevPro__enable_developer_subscriptions","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_cloudx_experiment_ids","Profiles__enable_page_saving","Profiles__enable_awarding_url","Profiles__enable_recognition_badges","Search__enable_page_map","Concierge__enable_pushui","Experiments__reqs_query_experiments","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__enable_firebase_utm","Search__enable_ai_eligibility_checks","BookNav__enable_tenant_cache_key","Profiles__enable_developer_profiles_callout","Cloud__enable_cloudx_ping","Cloud__enable_cloud_facet_chat","Profiles__enable_profile_collections","MiscFeatureFlags__enable_explain_this_code","EngEduTelemetry__enable_engedu_telemetry","Profiles__require_profile_eligibility_for_signin"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Labels and text alternatives | Articles | web.dev