CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1739541174349523255"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739541174349523255"> <title> Labeling Controls | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Labeling Controls" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/forms/labels/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/forms/labels/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/tutorials/forms/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/tutorials/forms/social.png" /> <meta property="twitter:title" content="Labeling Controls" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Labeling Controls","image":"https://www.w3.org/WAI/content-images/tutorials/forms/social.png","url":"https://www.w3.org/WAI/tutorials/forms/labels/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-labeling-controls "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tutorials/"><span>Tutorials</span></a></li><li><a lang="en" href="/WAI/tutorials/forms/"><span>Forms</span></a></li><li><a lang="en" href="/WAI/tutorials/forms/labels/" aria-current="page"><span>Labeling Controls</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" aria-current="location" class="page-link"><span>Forms</span></a><ul> <li> <a lang="en" href="/WAI/tutorials/forms/labels/" aria-current="page" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Labeling Controls </h1><p>in <a lang="en" href="/WAI/tutorials/forms/"><span>Forms Tutorial</span></a></p></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Overview </h2></header><div class="box-i"> <p>Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the <code class="language-plaintext highlighter-rouge"><label></code> element.</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#associating-labels-explicitly" id="markdown-toc-associating-labels-explicitly">Associating labels explicitly</a> <ul> <li><a href="#hiding-label-text" id="markdown-toc-hiding-label-text">Hiding label text</a> <ul> <li><a href="#hiding-the-label-element" id="markdown-toc-hiding-the-label-element">Hiding the label element</a></li> <li><a href="#using-aria-label" id="markdown-toc-using-aria-label">Using aria-label</a></li> <li><a href="#using-aria-labelledby" id="markdown-toc-using-aria-labelledby">Using aria-labelledby</a></li> <li><a href="#using-the-title-attribute" id="markdown-toc-using-the-title-attribute">Using the <code class="language-plaintext highlighter-rouge">title</code> attribute</a></li> <li><a href="#note-on-hiding-elements" id="markdown-toc-note-on-hiding-elements">Note on hiding elements</a></li> </ul> </li> </ul> </li> <li><a href="#associating-labels-implicitly" id="markdown-toc-associating-labels-implicitly">Associating labels implicitly</a></li> <li><a href="#labeling-buttons" id="markdown-toc-labeling-buttons">Labeling buttons</a></li> <li><a href="#visual-position-of-label-text" id="markdown-toc-visual-position-of-label-text">Visual position of label text</a></li> <li><a href="#form-field-controls-for-mobile" id="markdown-toc-form-field-controls-for-mobile">Form field controls for mobile</a></li> </ul> </div> </nav> <p>Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide <a href="../instructions">instructions</a>, <a href="../validation">validate user input</a>, and <a href="../notifications">provide feedback</a> to help users complete your form.</p> <p>A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control.</p> <h2 class="newap" id="associating-labels-explicitly">Associating labels explicitly</h2> <p>Whenever possible, use the <code class="language-plaintext highlighter-rouge">label</code> element to associate text with form elements explicitly. The <code class="language-plaintext highlighter-rouge">for</code> attribute of the label must exactly match the <code class="language-plaintext highlighter-rouge">id</code> of the form control.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <label for="firstname">First name: </label> <input type="text" name="firstname" id="firstname" /><br /> <input type="checkbox" name="subscribe" id="subscribe" /> <label for="subscribe">Subscribe to newsletter</label> </form> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><label</span> <span class="na">for=</span><span class="s">"firstname"</span><span class="nt">></span>First name:<span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"firstname"</span> <span class="na">id=</span><span class="s">"firstname"</span><span class="nt">><br></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"subscribe"</span> <span class="na">id=</span><span class="s">"subscribe"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"subscribe"</span><span class="nt">></span>Subscribe to newsletter<span class="nt"></label></span> </code></pre></div></div> </div></aside> <h3 class="newex" id="hiding-label-text">Hiding label text</h3> <p>A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users. The method used in this tutorial to hide an element visually but make it available for assistive technologies is explained in <a href="#note-on-hiding-elements">Note on hiding element</a>.</p> <p>In the example below, the search field is positioned directly beside the search button. The purpose of the text input field is evident from the context in most situations.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <div> <label for="search" class="visuallyhidden">Search: </label> <input type="text" name="search" id="search" /> <button type="button">Search</button> </div> </form> </div></aside> <h4 class="ap" id="hiding-the-label-element">Hiding the label element</h4> <p>In this approach, the <code class="language-plaintext highlighter-rouge"><label></code> element is provided to identify a form control within the code, but it is visually hidden to avoid redundancy for users who can derive the purpose from the visual cues.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><label</span> <span class="na">for=</span><span class="s">"search"</span> <span class="na">class=</span><span class="s">"visuallyhidden"</span><span class="nt">></span>Search: <span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"search"</span> <span class="na">id=</span><span class="s">"search"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Search<span class="nt"></button></span> </code></pre></div></div> </div></aside> <h4 class="ap" id="using-aria-label">Using aria-label</h4> <p>The <code class="language-plaintext highlighter-rouge">aria-label</code> attribute can also be used to identify form controls. This approach is well supported by screen readers and other assistive technology, but, unlike the <code class="language-plaintext highlighter-rouge">title</code> attribute (see below), the information is not conveyed to visual users. The approach should therefore only be used when the label of the control is clear from the surrounding content, like the button in the example below.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Search<span class="nt"></button></span> </code></pre></div></div> </div></aside> <h4 class="ap" id="using-aria-labelledby">Using aria-labelledby</h4> <p>The <code class="language-plaintext highlighter-rouge">aria-labelledby</code> attribute can also be used to identify form controls. This approach is well supported by screen readers and other assistive technology, but, unlike the <code class="language-plaintext highlighter-rouge">title</code> attribute (see below), the information is not conveyed to visual users. The approach should therefore only be used when the label of the control is clear from the surrounding content, like the button in the example below.</p> <p>The <code class="language-plaintext highlighter-rouge">id</code> of the element containing the label text is used as the value of the <code class="language-plaintext highlighter-rouge">aria-labelledby</code> attribute.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"search"</span> <span class="na">aria-labelledby=</span><span class="s">"searchbutton"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">id=</span><span class="s">"searchbutton"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Search<span class="nt"></button></span> </code></pre></div></div> </div></aside> <h4 class="ap" id="using-the-title-attribute">Using the <code class="language-plaintext highlighter-rouge">title</code> attribute</h4> <p>The <code class="language-plaintext highlighter-rouge">title</code> attribute can also be used to identify form controls. This approach is generally less reliable and not recommended because some screen readers and assistive technologies do not interpret the <code class="language-plaintext highlighter-rouge">title</code> attribute as a replacement for the label element, possibly because the <code class="language-plaintext highlighter-rouge">title</code> attribute is often used to provide non-essential information. The information of the <code class="language-plaintext highlighter-rouge">title</code> attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <div> <input title="Search" type="text" name="search" /> <button type="button">Search</button> </div> </form> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">title=</span><span class="s">"Search"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"search"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Search<span class="nt"></button></span> </code></pre></div></div> </div></aside> <h4 id="note-on-hiding-elements">Note on hiding elements</h4> <p>Screen readers and other assistive technology, just as web browsers, hide elements from their users when they are styled using <code class="language-plaintext highlighter-rouge">display: none;</code> and <code class="language-plaintext highlighter-rouge">visibility: hidden;</code>.</p> <p>The common approach used to hide information visually but keep them available to screen reader and other assistive technology users is to use CSS that will keep the information technically visible but practically hidden. For example, presenting the label in a 1-by-1 pixel area, as demonstrated with the CSS class <code class="language-plaintext highlighter-rouge">visuallyhidden</code> (<strong>do not confuse</strong> with CSS <code class="language-plaintext highlighter-rouge">visibility: hidden</code>) below:</p> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.visuallyhidden</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">clip</span><span class="p">:</span> <span class="n">rect</span><span class="p">(</span><span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">);</span> <span class="nl">height</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">-1px</span><span class="p">;</span> <span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> </div></aside> <p>Note that interactive elements are still active when using this code, so it is not suitable to hide other parts of forms but the labels.</p> <h2 class="newap" id="associating-labels-implicitly">Associating labels implicitly</h2> <p>In some situations, form controls cannot be labeled explicitly. For example, a content author might not know the <code class="language-plaintext highlighter-rouge">id</code> of a form field generated by a script, or that script might not add an <code class="language-plaintext highlighter-rouge">id</code> at all. In this case, the <code class="language-plaintext highlighter-rouge">label</code> element is used as a container for both the form control and the label text, so that the two are associated implicitly. Generally, explicit labels are better supported by assistive technology.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><label></span> First name: <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"firstname"</span><span class="nt">></span> <span class="nt"></label></span> <span class="nt"><br></span> <span class="nt"><label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"subscribe"</span><span class="nt">></span> Subscribe to newsletter <span class="nt"></label></span> </code></pre></div></div> </div></aside> <h2 id="labeling-buttons">Labeling buttons</h2> <p>The label of a <code class="language-plaintext highlighter-rouge"><button></code> element is set inside the element and can include markup. This allows more advanced accessibility hints to be included, like marking up language change. When using the <code class="language-plaintext highlighter-rouge"><input></code> element to create buttons, the label is set in the <code class="language-plaintext highlighter-rouge">value</code> attribute of the element.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Cancel<span class="nt"></button></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"Cancel"</span><span class="nt">></span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p>If the image button (<code class="language-plaintext highlighter-rouge"><input type="image"></code>) is used, the label is set in the <code class="language-plaintext highlighter-rouge">alt</code> attribute, for example: <code class="language-plaintext highlighter-rouge"><input type="image" src="searchbutton.png" alt="Search"></code>. See <a href="/WAI/tutorials/images/functional/#image-used-in-a-button">Functional Images</a> for more information on how to describe images in buttons.</p> </div></aside> <h2 class="newex" id="visual-position-of-label-text">Visual position of label text</h2> <p>In left-to-right languages, it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left or directly above other form fields. Maintaining this practice increases predictability and understandability of your form for all users.</p> <p>In general, placing labels above the form fields helps reduce horizontal scrolling for people with low vision and mobile device users. However, the usefulness of this approach depends on other design aspects, such as the proximity of other nearby form fields and content, and needs to be assessed individually. The aim should be to maintain a close and distinct visual relationship between the label and the form control.</p> <h2 id="form-field-controls-for-mobile">Form field controls for mobile</h2> <p>When HTML5 form fields are used, a virtual keyboard appears making it easier to input data. For example, a <code class="language-plaintext highlighter-rouge">number</code> field shows a numeric keyboard, a <code class="language-plaintext highlighter-rouge">date</code> field a native date picker.</p> <p>Sometime designers propose not including visual field labels. However, most users prefer or even need visible labels to understand the form.</p> <aside class="box box-large box-icon" id="related"><header class="box-h box-h-large box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-default "><use xlink:href="/WAI/assets/images/icons.svg#icon-default"></use></svg> Related WCAG resources</header><div class="box-i"> <p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:</p> <p><strong>Success Criteria:</strong></p> <ul><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic"><strong>1.3.1</strong> Info and Relationships:</a> Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)</li><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-descriptive"><strong>2.4.6</strong> Headings and Labels:</a> Headings and labels describe topic or purpose. (Level AA)</li><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-minimize-error-cues"><strong>3.3.2</strong> Labels or Instructions:</a> Labels or instructions are provided when content requires user input. (Level A)</li><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-ensure-compat-rsv"><strong>4.1.2</strong> Name, Role, Value:</a> For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)</li></ul> <p><strong>Techniques:</strong></p> <ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G17">G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G18">G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G131">G131: Providing descriptive labels</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G162">G162: Positioning labels to maximize predictability of relationships</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G167">G167: Using an adjacent button to label the purpose of a field</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/H44">H44: Using label elements to associate text labels with form controls</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/H65">H65: Using the title attribute to identify form controls when the label element cannot be used</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/H93">H93: Ensuring that id attributes are unique on a Web page</a></li></ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tutorials/forms/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Forms Tutorial</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/forms/grouping/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Grouping Controls</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/forms/labels.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/forms/labels/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div><strong>Status:</strong> Updated 13 May 2024 </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.</p> </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright 漏 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>庐</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1739541174349523255"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739541174349523255"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>