CINXE.COM
Accessibility | web.dev
<!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/learn/forms/accessibility"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/learn/forms/accessibility" /><link rel="alternate" hreflang="x-default" href="https://web.dev/learn/forms/accessibility" /><link rel="alternate" hreflang="ar" href="https://web.dev/learn/forms/accessibility?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/learn/forms/accessibility?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/learn/forms/accessibility?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/learn/forms/accessibility?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/learn/forms/accessibility?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/learn/forms/accessibility?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/learn/forms/accessibility?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/learn/forms/accessibility?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/learn/forms/accessibility?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/learn/forms/accessibility?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/learn/forms/accessibility?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/learn/forms/accessibility?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/learn/forms/accessibility?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/learn/forms/accessibility?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/learn/forms/accessibility?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/learn/forms/accessibility?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/learn/forms/accessibility?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/learn/forms/accessibility?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/learn/forms/accessibility?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/learn/forms/accessibility?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/learn/forms/accessibility" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/learn/forms/accessibility" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/learn/forms/accessibility?hl=vi" /><title>Accessibility | web.dev</title> <meta property="og:title" content="Accessibility | web.dev"><meta name="description" content="How to build inclusive forms."> <meta property="og:description" content="How to build inclusive forms."><meta property="og:url" content="https://web.dev/learn/forms/accessibility"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="course" 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 class="devsite-active"> <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" aria-label="Learn, selected" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab > <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" 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="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="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/learn" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Learn </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://web.dev/learn/privacy" track-metadata-eventdetail="https://web.dev/learn/privacy" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - privacy" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" > Privacy </a> </tab> <tab > <a href="https://web.dev/learn/accessibility" track-metadata-eventdetail="https://web.dev/learn/accessibility" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - accessibility" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" > Accessibility </a> </tab> <tab > <a href="https://web.dev/learn/html" track-metadata-eventdetail="https://web.dev/learn/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/learn/images" track-metadata-eventdetail="https://web.dev/learn/images" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - images" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" > Images </a> </tab> <tab > <a href="https://web.dev/learn/design" track-metadata-eventdetail="https://web.dev/learn/design" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - responsive design" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" > Responsive Design </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/learn/forms" track-metadata-eventdetail="https://web.dev/learn/forms" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - forms" track-metadata-module="primary nav" aria-label="Forms, selected" data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" > Forms </a> </tab> <tab > <a href="https://web.dev/learn/pwa" track-metadata-eventdetail="https://web.dev/learn/pwa" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - pwa" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" > PWA </a> </tab> <tab > <a href="https://web.dev/learn/css" track-metadata-eventdetail="https://web.dev/learn/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/learn/performance" track-metadata-eventdetail="https://web.dev/learn/performance" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - performance" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" > Performance </a> </tab> <tab > <a href="https://web.dev/learn/testing" track-metadata-eventdetail="https://web.dev/learn/testing" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - testing" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" > Testing </a> </tab> <tab > <a href="https://web.dev/learn/javascript" track-metadata-eventdetail="https://web.dev/learn/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> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="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 devsite-nav-active" 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> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/learn/privacy" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/images" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Images" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Images </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/design" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Responsive Design" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Responsive Design </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/forms" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Forms" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Forms </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/pwa" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" data-category="Site-Wide Custom Events" data-label="Responsive Tab: PWA" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PWA </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/testing" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Testing" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Testing </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " 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> </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"><a href="/learn/forms/welcome" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/welcome" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/welcome" ><span class="devsite-nav-text" tooltip>Welcome to Learn Forms!</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>Get started with forms</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/form-element" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/form-element" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/form-element" ><span class="devsite-nav-text" tooltip>Use forms to get data from users</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/form-fields" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/form-fields" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/form-fields" ><span class="devsite-nav-text" tooltip>Help users enter data in forms</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/auto" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/auto" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/auto" ><span class="devsite-nav-text" tooltip>Help users avoid re-entering data in forms</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/validation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/validation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/validation" ><span class="devsite-nav-text" tooltip>Help users enter the right data in forms</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/testing" ><span class="devsite-nav-text" tooltip>Test your forms</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>General best practice</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/design-basics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/design-basics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/design-basics" ><span class="devsite-nav-text" tooltip>Design basics</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/accessibility" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/accessibility" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/accessibility" ><span class="devsite-nav-text" tooltip>Accessibility</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/internationalization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/internationalization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/internationalization" ><span class="devsite-nav-text" tooltip>Internationalization and localization</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/security-privacy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/security-privacy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/security-privacy" ><span class="devsite-nav-text" tooltip>Security and privacy</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/autofill" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/autofill" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/autofill" ><span class="devsite-nav-text" tooltip>Autofill</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>Testing and monitoring</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/usability-testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/usability-testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/usability-testing" ><span class="devsite-nav-text" tooltip>How to test forms for usability</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/cross-platform-testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/cross-platform-testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/cross-platform-testing" ><span class="devsite-nav-text" tooltip>Test forms across devices and platforms</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/data" ><span class="devsite-nav-text" tooltip>Gathering data</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>Elements and attributes</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/form" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/form" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/form" ><span class="devsite-nav-text" tooltip>The form element in depth</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/fields" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/fields" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/fields" ><span class="devsite-nav-text" tooltip>Form fields in depth</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/attributes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/attributes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/attributes" ><span class="devsite-nav-text" tooltip>Form attributes in depth</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>CSS</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/styling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/styling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/styling" ><span class="devsite-nav-text" tooltip>Styling forms</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/styling-form-controls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/styling-form-controls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/styling-form-controls" ><span class="devsite-nav-text" tooltip>Styling form controls</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>JavaScript</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/javascript" ><span class="devsite-nav-text" tooltip>JavaScript</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>Specific form types</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/identity" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/identity" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/identity" ><span class="devsite-nav-text" tooltip>Identity</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/payment" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/payment" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/payment" ><span class="devsite-nav-text" tooltip>Payment forms</span></a></li> <li class="devsite-nav-item"><a href="/learn/forms/address" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/address" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/address" ><span class="devsite-nav-text" tooltip>Address forms</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>Wrap up</span> </div></li> <li class="devsite-nav-item"><a href="/learn/forms/conclusion" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/forms/conclusion" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/forms/conclusion" ><span class="devsite-nav-text" tooltip>Conclusion and next steps</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="web.dev" > web.dev </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Learn </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn/forms" 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="" > Forms </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Accessibility </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>The form you build is for people. People use different devices. Some use a mouse, some a touch device, some the keyboard, some a device controlled by eye movements. Some use a screen reader, some a small screen, some use text enlargement software. Everybody wants to use your form. Learn how to make your form accessible and usable for everyone.</p> <h2 id="ensure_users_understand_the_purpose_of_a_form_field" data-text="Ensure users understand the purpose of a form field" tabindex="-1">Ensure users understand the purpose of a form field</h2> <p>There are many <a href="/learn/forms/fields">form controls</a> you can choose from. What do they all have in common? Every form control must have an associated <code translate="no" dir="ltr"><label></code> element. The <code translate="no" dir="ltr"><label></code> element describes the purpose of a form control. The <code translate="no" dir="ltr"><label></code> text is visually associated with the form control, and read out by screen readers.</p> <p>In addition, tapping or clicking the <code translate="no" dir="ltr"><label></code> focuses the associated form control, making it a larger target.</p> <aside class="note"><b>Note: </b> The next time you add a form control, add the <code translate="no" dir="ltr"><label></code> first. Think about the purpose of the form control, and describe the purpose to the user. Make it easy for people to enter valid data quickly and accurately. </aside> <h2 id="use_meaningful_html_to_access_built-in_browser_features" data-text="Use meaningful HTML to access built-in browser features" tabindex="-1">Use meaningful HTML to access built-in browser features</h2> <p>In theory, you could build a form using only <code translate="no" dir="ltr"><div></code> elements. You can even make it look like a native <code translate="no" dir="ltr"><form></code>. What's the problem with using <a href="https://developer.mozilla.org/docs/Glossary/Semantics">non-semantic</a> elements?</p> <p>Built-in form elements provide a lot of built-in features. Let's have a look at an example.</p> <div class="wd-embed" style="height: 450px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/2f56a723b5045ea990d38c2c170c3037?height=450&theme-id=light&default-tab=html%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen 2f56a723b5045ea990d38c2c170c3037 by web-dot-dev on Codepen" ></iframe> </div> <p>Visually, the <code translate="no" dir="ltr"><input></code> (the first one in the example) and the <code translate="no" dir="ltr"><div></code> look the same. You can even insert text for both, as the <code translate="no" dir="ltr"><div></code> has a <a href="https://developer.mozilla.org/docs/Web/HTML/Global_attributes/contenteditable"><code translate="no" dir="ltr">contenteditable</code></a> attribute. There are lots of differences, though, between using an appropriate <code translate="no" dir="ltr"><input></code> element and a <code translate="no" dir="ltr"><div></code> looking like an <code translate="no" dir="ltr"><input></code>.</p> <p>A screen reader user doesn't recognize the <code translate="no" dir="ltr"><div></code> as an input element, and isn't able to complete the form. All the screen reader user hears is 'Name', with no indication that the element is a form control for adding text.</p> <p>Clicking on <code translate="no" dir="ltr"><div>Name</div></code> doesn't focus the <code translate="no" dir="ltr"><div></code> that goes with it, whereas the <code translate="no" dir="ltr"><label></code> and the <code translate="no" dir="ltr"><input></code> are connected by using the <code translate="no" dir="ltr">for</code> and <code translate="no" dir="ltr">id</code> attributes.</p> <p>After submitting the form, the data entered in the <code translate="no" dir="ltr"><div></code> isn't included in the request. While attaching the data with JavaScript is possible, an <code translate="no" dir="ltr"><input></code> does that by default.</p> <p>Built-in form elements have other features. For example, with appropriate form elements and the correct <code translate="no" dir="ltr">inputmode</code> or <code translate="no" dir="ltr">type</code>, an on-screen keyboard shows appropriate characters. Using the <code translate="no" dir="ltr">inputmode</code> attribute on a <code translate="no" dir="ltr"><div></code> cannot do that.</p> <h2 id="ensure_users_are_aware_of_the_expected_data_format" data-text="Ensure users are aware of the expected data format" tabindex="-1">Ensure users are aware of the expected data format</h2> <p>You can define various validation rules for a form control. For example, say a form field should always have at least eight characters. You use the <code translate="no" dir="ltr">minlength</code> attribute, indicating the validation rule to browsers. How can you ensure users also know about the validation rule? Tell them.</p> <div class="wd-embed" style="height: 350px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/b03a4c83688c1b02ab12f9873f1f6614?height=350&theme-id=light&default-tab=html%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen b03a4c83688c1b02ab12f9873f1f6614 by web-dot-dev on Codepen" ></iframe> </div> <p>Add information about the expected format directly beneath the form control. To make it clear for assistive devices, use the <code translate="no" dir="ltr">aria-describedby</code> attribute on the form control, and an <code translate="no" dir="ltr">id</code> on the error message with the same value, to connect both.</p> <h2 id="help_users_find_the_error_message_for_a_form_control" data-text="Help users find the error message for a form control" tabindex="-1">Help users find the error message for a form control</h2> <p>In a previous module about <a href="/learn/forms/validation">validation</a>, you learned how to show error messages in case of invalid data entry.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><label for="name">Name</label> <input type="text" name="name" id="name" required> </code></pre></devsite-code> <p>For example, if a field has a <code translate="no" dir="ltr">required</code> attribute, and invalid data is entered, the browser shows an error message next to the form control when the form is submitted. Screen readers also announce the error message.</p> <p>You can also define your own error message:</p> <div class="wd-embed" style="height: 300px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/b7ed22a0539f9beef4dc03380f51f224?height=300&theme-id=light&default-tab=html%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen b7ed22a0539f9beef4dc03380f51f224 by web-dot-dev on Codepen" ></iframe> </div> <p>This example needs more changes to connect the error message to the form control.</p> <p>A simple approach is to use the <code translate="no" dir="ltr">aria-describedby</code> attribute on the form control that matches the <code translate="no" dir="ltr">id</code> on the error message element. Then, use <a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code translate="no" dir="ltr">aria-live="assertive"</code></a> for the error message. ARIA live regions announce an error to screen reader users the moment the error is shown.</p> <p>The problem with this approach for forms with multiple fields, is that <code translate="no" dir="ltr">aria-live</code> will usually only announce the first error in the case of multiple errors. As explained in <a href="https://gaurav5430.medium.com/quick-accessibility-wins-multiple-aria-live-on-single-action-caveat-b79a6f41e7cc">this article about multiple <code translate="no" dir="ltr">aria-live</code> announcements on the same action</a> you could create a single message by concatenating all the errors. Another approach would be to announce that there are errors, then announce individual errors when the field is focused.</p> <h2 id="ensure_users_recognize_errors" data-text="Ensure users recognize errors" tabindex="-1">Ensure users recognize errors</h2> <p>Sometimes designers color the invalid state red, using the <code translate="no" dir="ltr">:invalid</code> pseudo-class. However, to communicate an error or success, you should never rely only on color. For people with red-green color blindness, a green and a red border look almost the same. It's impossible to see if the message is related to an error.</p> <p>In addition to color, use an icon, or prefix your error messages with the error type.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><span class="error"> <strong>Error:</strong>Please use at least eight characters. </span> </code></pre></devsite-code> <h2 id="help_users_to_navigate_your_form" data-text="Help users to navigate your form" tabindex="-1">Help users to navigate your form</h2> <p>You can change the visual order of form controls with CSS. A disconnect between visual order and keyboard navigation (DOM order) is problematic for screen reader and keyboard users.</p> <p>Learn more about how to ensure <a href="/visual-order-follows-dom">visual order on the page follows DOM order</a>.</p> <h2 id="help_users_to_identify_the_currently_focused_form_control" data-text="Help users to identify the currently focused form control" tabindex="-1">Help users to identify the currently focused form control</h2> <p>Use your keyboard to navigate through <a href="https://codepen.io/web-dot-dev/pen/c4ab903b77cdfc05dac4707fca69b997">this form</a>. Did you recognize that the styling of the form controls changed once they were active? This is the default focus style. You can override it with the <a href="https://developer.mozilla.org/docs/Web/CSS/:focus"><code translate="no" dir="ltr">:focus</code></a> CSS pseudo-class. Whatever styles you use inside <code translate="no" dir="ltr">:focus</code>, always make sure the visual difference between the default state and the focus state is recognizable.</p> <aside class="note"><b>Note: </b> If you want to remove the default <code translate="no" dir="ltr">:focus</code> styles but still show focus indicators for keyboard users, you can use the <a href="/articles/style-focus#use_focus-visible_to_selectively_show_a_focus_indicator"><code translate="no" dir="ltr">:focus-visible</code></a> CSS pseudo-class. </aside> <p>Learn more about <a href="https://www.sarasoueidan.com/blog/focus-indicators/">designing focus indicators</a>.</p> <h2 id="ensure_your_form_is_usable" data-text="Ensure your form is usable" tabindex="-1">Ensure your form is usable</h2> <p>You can identify many common issues by filling out your form with different devices. Use only your keyboard, use a screen reader (such as <a href="https://www.nvaccess.org/">NVDA</a> on Windows or <a href="https://en.wikipedia.org/wiki/VoiceOver">VoiceOver</a> on Mac), or zoom the page to 200%. Always test your forms on different platforms, especially devices or settings you don't use every day. Do you know someone using a screen reader, or someone using text enlargement software? Ask them to fill out your form. Accessibility reviews are great, testing with real users is even better.</p> <p>Learn more about doing an <a href="/articles/how-to-review">accessibility review</a> and how to <a href="/learn/forms/usability-testing">test with real users</a>.</p> <h2 id="resources" data-text="Resources" tabindex="-1">Resources</h2> <ul> <li><a href="https://webaim.org/techniques/forms">WebAIM: Creating Accessible Forms</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">WCAG: autocomplete accessibility benefits</a></li> <li><a href="https://www.sarasoueidan.com/blog/focus-indicators/">Focus Indicators</a></li> </ul> </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 2021-11-03 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 2021-11-03 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_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": "course", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="BeJrW/ib0+3y7yDxgGPY9KY2RF22ZW"> (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",null,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,116,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,["Profiles__enable_complete_playlist_endpoint","Cloud__enable_cloud_dlp_service","Concierge__enable_pushui","Cloud__enable_cloud_shell","Search__enable_ai_eligibility_checks","Cloud__enable_cloud_shell_fte_user_flow","Search__enable_page_map","Profiles__require_profile_eligibility_for_signin","Profiles__enable_page_saving","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_cloud_facet_chat","CloudShell__cloud_shell_button","Profiles__enable_release_notes_notifications","Profiles__enable_recognition_badges","MiscFeatureFlags__developers_footer_image","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_explain_this_code","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_project_variables","Cloud__enable_llm_concierge_chat","BookNav__enable_tenant_cache_key","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_variable_operator","Profiles__enable_completecodelab_endpoint","Cloud__enable_free_trial_server_call","CloudShell__cloud_code_overflow_menu","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_view_transitions","TpcFeatures__enable_required_headers","Search__enable_dynamic_content_confidential_banner","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__enable_firebase_utm","DevPro__enable_cloud_innovators_plus","Experiments__reqs_query_experiments","OnSwitch__enable","Search__enable_suggestions_from_borg","Profiles__enable_profile_collections","Analytics__enable_clearcut_logging","Profiles__enable_awarding_url","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__emergency_css"],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>