{"id":337074,"date":"2021-03-30T13:29:49","date_gmt":"2021-03-30T20:29:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=337074"},"modified":"2021-04-02T12:13:54","modified_gmt":"2021-04-02T19:13:54","slug":"html-inputs-and-labels-a-love-story","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/html-inputs-and-labels-a-love-story\/","title":{"rendered":"HTML Inputs and Labels: A Love Story"},"content":{"rendered":"\n<p>Most inputs have something in common\u2009\u2014\u2009they are happiest with a companion label! And the happiness doesn\u2019t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/03\/input-label-love.svg\" alt=\"\" class=\"wp-image-337080\" width=\"949\" height=\"542\"\/><figcaption>A happy label and input pair<\/figcaption><\/figure>\n\n\n\n<p>In this post, I want to focus on situations where the lack of a semantic label and input combination makes it much harder for all sorts of people to complete forms. Since millions of people\u2019s livelihoods rely on forms, let\u2019s get into <strong>the best tips I know<\/strong> for creating a fulfilling and harmonious relationship between an input and a label.<\/p>\n\n\n\n<p class=\"explanation\"><strong>Content warning:<\/strong> In this post are themes of love and relationships.<\/p>\n\n\n\n<p>The love story starts here! Let\u2019s cover the basics for creating happy labels and inputs.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-pair-a-label-and-an-input\">How to pair a label and an input<\/h3>\n\n\n<p>There are <strong>two ways<\/strong> to pair a label and an input. One is by wrapping the input in a label (implicit), and the other is by adding a <code>for<\/code> attribute to the label and an <code>id<\/code> to the input (explicit).<\/p>\n\n\n\n<p>Think of an implicit label as <strong>hugging<\/strong> an input, and an explicit label as standing next to an input and <strong>holding<\/strong> its hand.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;label> \n  Name:\n  &lt;input type=\"text\" name=\"name\" \/>\n&lt;\/label><\/code><\/pre>\n\n\n\n<p>An explicit label\u2019s <code>for<\/code> attribute value must match its input\u2019s <code>id<\/code> value. For example, if <code>for<\/code> has a value of <code>name<\/code>, then <code>id<\/code> should also have a value of <code>name<\/code>.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;label for=\"name\">Name: &lt;\/label>\n&lt;input type=\"text\" id=\"name\" name=\"name\" \/><\/code><\/pre>\n\n\n\n<p>Unfortunately, an implicit label is not handled correctly by all assistive technologies, even if <code>for<\/code> and <code>id<\/code> attributes are used. <strong>Therefore, it is always the best idea to<\/strong> <strong>use an explicit label instead of an implicit label.<\/strong><\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- IMPLICIT LABEL (not recommended for use) - the label wraps the input. -->\n&lt;label> \n  Name:\n  &lt;input type=\"text\" name=\"name\" \/>\n&lt;\/label>\n\n&lt;!-- EXPLICIT LABEL (recommended for use) - the label is connected to an input via \"for\" and \"id\" -->\n&lt;label for=\"explicit-label-name\">Name: &lt;\/label>\n&lt;input type=\"text\" id=\"explicit-label-name\" name=\"name\" \/><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNYZbVd\" src=\"\/\/codepen.io\/anon\/embed\/oNYZbVd?height=250&amp;theme-id=1&amp;slug-hash=oNYZbVd&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNYZbVd\" title=\"CodePen Embed oNYZbVd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Each separate input element should only be paired with one label. And a label should only be paired with one input. Yes, inputs and labels are monogamous. &#x2665;&#xfe0f;<\/p>\n\n\n\n<p class=\"explanation\"><strong>Note:<\/strong> There\u2019s one sort of exception to this rule: when we\u2019re working with a <em>group<\/em> of inputs, say several radio buttons or checkboxes. In these cases, a <code>&lt;legend&gt;<\/code> element is used to group certain input elements, such as radio buttons, and serves as the accessible label for the entire group.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-not-all-inputs-need-labels\">Not all inputs need labels<\/h4>\n\n\n<p>An input with a <code>type=\"submit\"<\/code> or <code>type=\"button\"<\/code> does not need a label\u2009\u2014\u2009the <code>value<\/code> attribute acts as the accessible label text instead. An input with <code>type=\"hidden\"<\/code> is also fine without a label. But all other inputs, including <code>&lt;textarea&gt;<\/code> and <code>&lt;select&gt;<\/code> elements, are happiest with a label companion.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-what-goes-in-a-label\">What goes in a label<\/h4>\n\n\n<p>The content that goes inside of a label should:<\/p>\n\n\n\n<ul><li><strong>Describe its companion input.<\/strong> A label wants to show everyone that it belongs with its input partner.<\/li><li><strong>Be visible.<\/strong> A label can be clicked or tapped to focus its input. The extra space it provides to interact with the input is beneficial because it increases the tap or click target. We\u2019ll go into that more in just a bit.<\/li><li><strong>Only contain plain text.<\/strong> Don&#8217;t add elements like headings or links. Again, we\u2019ll go into the \u201cwhy\u201d behind this further on down.<\/li><\/ul>\n\n\n\n<p>One useful thing you can do with the content in a label is add formatting hints. For example, the label for <code>&lt;input type=\"date\" id=\"date\"><\/code> will be <code>&lt;label for=\"date\"><\/code> as we\u2019d expect. But then we can provide a hint for the user that the date needs to be entered in a specific format, say <code>DD-MM-YYYY<\/code>, in the form of a <code>&lt;span><\/code> between the label and input that specifies that requirement. The hint not only specifies the date format, but has an <code>id<\/code> value that corresponds to an <code>aria-describedby<\/code> attribute on the input.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Describes what the input is for - should be plain text only -->\n&lt;label for=\"date\">Start date&lt;\/label>\n&lt;!-- Describes additional information, usually about formatting -->\n&lt;span id=\"date-format\">(DD-MM-YYYY):&lt;\/span>\n&lt;input type=\"date\" id=\"date\" aria-describedby=\"date-format\" min=\"2021-03-01\" max=\"2031-01-01\" \/><\/code><\/pre>\n\n\n\n<p>This way, we get the benefit of a clear label that describes what the input is for, and a bonus hint to the user that the input needs to be entered in a specific format.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYBxxeL\" src=\"\/\/codepen.io\/anon\/embed\/eYBxxeL?height=225&amp;theme-id=1&amp;slug-hash=eYBxxeL&amp;default-tab=result\" height=\"225\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYBxxeL\" title=\"CodePen Embed eYBxxeL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-best-practices-for-a-healthy-relationship\">Best practices for a healthy relationship<\/h3>\n\n\n<p>The following tips go beyond the basics to explain how to make sure a label and input are as happy as can be.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-do-add-a-label-in-the-right-place\">Do: Add a label in the right place<\/h4>\n\n\n<p>There is a WCAG success criterion that states <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/C27.html\" rel=\"noopener\">the visual order of a page should follow the order in which elements appear in the DOM<\/a>. That\u2019s because:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order.<\/p><\/blockquote>\n\n\n\n<p>Think about it. If we have some standard HTML where the label comes before the input:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;label for=\"orange\">Orange&lt;\/label>\n&lt;input type=\"checkbox\" id=\"orange\" name=\"orange\"><\/code><\/pre>\n\n\n\n<p>That places the label before the input in the DOM. But now let&#8217;s say our label and form are inside a flexible container and we use CSS <code>order<\/code> to reverse things where the input visually comes before the label:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">label { order: 2; }\ninput { order: 1; }<\/code><\/pre>\n\n\n\n<p>A screen reader user, who is navigating between elements, might expect the input to gain focus before the label because the input comes first visually. But what really happens is the label comes into focus instead. See here for the <a href=\"https:\/\/tink.uk\/the-difference-between-keyboard-and-screen-reader-navigation\/\" rel=\"noopener\">difference between navigating with a screen reader and a keyboard<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>So, we should be mindful of that. It is conventional to place the label on the right-hand side of the input for checkboxes and radio buttons. This can be done by placing the label <em>after<\/em> the input in the HTML, ensuring the DOM and visual order match.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;form>\n  &lt;!-- Checkbox with label on the right -->\n  &lt;span>\n    &lt;input type=\"checkbox\" id=\"orange\" name=\"orange\">\n    &lt;label for=\"orange\">Orange&lt;\/label>\n  &lt;\/span>\n  &lt;!-- Radio button with label on the right -->\n  &lt;span>\n    &lt;input type=\"radio\" id=\"banana\" name=\"banana\">\n    &lt;label for=\"banana\">Banana&lt;\/label>\n  &lt;\/span>\n  &lt;!-- Text input with label on the left -->\n  &lt;span>\n    &lt;label for=\"apple\">How do you like them apples?&lt;\/label>\n    &lt;input type=\"text\" id=\"apple\" name=\"apple\">\n  &lt;\/span>\n&lt;\/form><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWbELRY\" src=\"\/\/codepen.io\/anon\/embed\/MWbELRY?height=250&amp;theme-id=1&amp;slug-hash=MWbELRY&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWbELRY\" title=\"CodePen Embed MWbELRY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-do-check-inputs-with-a-screen-reader\">Do: Check inputs with a screen reader<\/h4>\n\n\n<p>Whether an input is written from scratch or generated with a library, it is a good idea to check your work using a screen reader. This is to make sure that:<\/p>\n\n\n\n<ul><li>All relevant attributes exist\u2009\u2014\u2009especially the matching values of the <code>for<\/code> and <code>id<\/code> attributes.<\/li><li>The DOM matches the visual order.<\/li><li>The label text sounds clear. For example, \u201cdd-mm-yyyy\u201d is read out differently to its uppercase equivalent (DD-MM-YYYY).<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/03\/date-label.svg\" alt=\"Screen reader reading out a lower case and upper case date input hint.\" class=\"wp-image-337060\" width=\"951\" height=\"514\"\/><figcaption>Just because the letters are the same doesn\u2019t mean that they get read the same way by a screen reader.<\/figcaption><\/figure>\n\n\n\n<p>Over the last few years, I have used JavaScript libraries, like <a href=\"https:\/\/github.com\/downshift-js\/downshift\" rel=\"noopener\">downshift<\/a>, to build complex form elements such as autocomplete or <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/combobox\/aria1.1pattern\/listbox-combo.html\" rel=\"noopener\">comboboxes<\/a> on top of native HTML ones, like inputs or selects. Most libraries make these complex elements accessible by adding ARIA attributes with JavaScript.<\/p>\n\n\n\n<p>However, the benefits of native HTML elements enhanced using JavaScript are totally lost if JavaScript is broken or disabled, making them inaccessible. So check for this and provide a server-rendered, no-JavaScript alternative as a safe fallback.<\/p>\n\n\n\n<p>Check out these <a href=\"https:\/\/russmaxdesign.github.io\/accessible-forms\/index.html\" rel=\"noopener\">basic form tests<\/a> to determine how an input and its companion label or legend should be written and announced by different screen readers.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-do-make-the-label-visible\">Do: Make the label visible<\/h4>\n\n\n<p>Connecting a label and an input is important, but just as important is keeping the label visible. Clicking or tapping a visible label focuses its input partner. This is a native HTML behavior that benefits a huge number of people.<\/p>\n\n\n\n<p>Imagine a label wanting to proudly show its association with an input:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/03\/label-input.svg\" alt=\"A visible happy label proudly showing off its input partner.\" class=\"wp-image-337061\" width=\"950\" height=\"514\"\/><figcaption>A label really wants to show off its input arm candy. &#x1f4aa;&#x1f36c;<\/figcaption><\/figure>\n\n\n\n<p>That said, there are going to be times when a design calls for a hidden label. So, if a label <em>must<\/em> be hidden, it is crucial to do it in an accessible way. A common mistake is to use <code>display: none<\/code> or <code>visibility: hidden<\/code> to hide a label. These CSS display properties completely hide an element\u2009\u2014\u2009not only visually but also from screen readers.<\/p>\n\n\n\n<p>Consider using the following code to visually hide labels:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* For non-natively-focusable elements. For natively focusable elements *\/\n\/* Use .visually-hidden:not(:focus):not(:active) *\/\n.visually-hidden {\n  border-width: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExNWPrv\" src=\"\/\/codepen.io\/anon\/embed\/ExNWPrv?height=200&amp;theme-id=1&amp;slug-hash=ExNWPrv&amp;default-tab=result\" height=\"200\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExNWPrv\" title=\"CodePen Embed ExNWPrv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"explanation\">Kitty Giraudel explains in depth <a href=\"https:\/\/kittygiraudel.com\/2021\/02\/17\/hiding-content-responsibly\/\" rel=\"noopener\">how to hide content responsibly<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-to-avoid\">What to Avoid<\/h3>\n\n\n<p>To preserve and maintain a healthy relationship between inputs and labels, there are some things <em>not<\/em> to do when pairing them. Let\u2019s get into what those are and how to prevent them.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-don-t-expect-your-input-to-be-the-same-in-every-browser\">Don\u2019t: Expect your input to be the same in every browser<\/h4>\n\n\n<p>There are certain types of inputs that are unsupported In some older desktop browsers. For example, an input that is <code>type=\"date\"<\/code> isn\u2019t supported in Internet Explorer (IE) 11, or even in Safari 14<a id=\"fn:1a\" href=\"#fn:1\"><sup>1<\/sup><\/a> (released September 2020). An input like this falls back to <code>type=\"text\"<\/code>. If a date input does not have a clear label, and it automatically falls back to a text input in older browsers, people may get confused.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-don-t-substitute-a-label-with-a-placeholder\">Don\u2019t: Substitute a label with a placeholder<\/h4>\n\n\n<p>Here is why a <code>placeholder<\/code> attribute on an input should not be used in place of a label:<\/p>\n\n\n\n<ul><li>Not all screen readers announce placeholders.<\/li><li>The value of a <code>placeholder<\/code> is in danger of being cut-off on smaller devices, or when a page is translated in the browser. In contrast, the text content of a label can easily wrap onto a new line.<\/li><li>Just because a developer can see the pale grey <code>placeholder<\/code> text on their large retina screen, in a well-lit room, in a distraction-free environment, doesn\u2019t mean everyone else can. A <code>placeholder<\/code> can make even those with good vision scrunch their eyes up and eventually give up on a form.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"272\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/s_0B9DE35E76806396E33C1E9DB62DCF4DA24C3406ABEB605AC61CB6E0DB86B2EE_1614019438150_image.png?resize=996%2C272&#038;ssl=1\" alt=\"An input on a mobile device where the placeholder text is cut off.\" class=\"wp-image-337062\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/s_0B9DE35E76806396E33C1E9DB62DCF4DA24C3406ABEB605AC61CB6E0DB86B2EE_1614019438150_image.png?w=996&amp;ssl=1 996w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/s_0B9DE35E76806396E33C1E9DB62DCF4DA24C3406ABEB605AC61CB6E0DB86B2EE_1614019438150_image.png?resize=300%2C82&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/s_0B9DE35E76806396E33C1E9DB62DCF4DA24C3406ABEB605AC61CB6E0DB86B2EE_1614019438150_image.png?resize=768%2C210&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Make sure this is somewhere I can what? It\u2019s hard to tell when the placeholder gets cut off like that.<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"272\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/form-label-input-translated-placeholder.png?resize=996%2C272&#038;ssl=1\" alt=\"An input where the translated placeholder is cut off.\" class=\"wp-image-337090\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/form-label-input-translated-placeholder.png?w=996&amp;ssl=1 996w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/form-label-input-translated-placeholder.png?resize=300%2C82&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/form-label-input-translated-placeholder.png?resize=768%2C210&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Work on a multi-lingual site? A translated placeholder&nbsp;can get&nbsp;cut off&nbsp;even though the English translation is just fine.&nbsp;In this case, the translated placeholder&nbsp;should read&nbsp;\u201cDurchsuchen&nbsp;Sie die Dokumentation.\u201d<\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<ul><li>Once a character is entered into an input, its <code>placeholder<\/code> becomes invisible\u2009\u2014\u2009both visually and to screen readers. If someone has to back-track to review information they\u2019ve entered in a form, they\u2019d have to delete what was entered just to see the placeholder again.<\/li><li>The <code>placeholder<\/code> attribute is not supported in IE 9 and below, and disappears when an input is focused in IE 11. Another thing to note: the placeholder color is unable to be customized with CSS in IE 11.<\/li><\/ul>\n\n\n\n<p>Placeholders are like the friend that shows up when everything is perfect, but disappears when you need them most. Pair up an input with a nice, high-contrast label instead. Labels are not flaky and are loyal to inputs 100% of the time.<\/p>\n\n\n\n<p class=\"explanation\">The Nielsen Norman Group has an in-depth article that explains <a href=\"https:\/\/www.nngroup.com\/articles\/form-design-placeholders\/\" rel=\"noopener\">why placeholders in form fields are harmful<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-don-t-substitute-a-label-with-another-attribute-or-element\">Don\u2019t: Substitute a label with another attribute or element<\/h4>\n\n\n<p>When no label is present, some screen readers will look for adjacent text and announce that instead. This is a hit-and-miss approach because it\u2019s possible that a screen reader won\u2019t find any text to announce.<\/p>\n\n\n\n<p>The below code sample comes from a real website. The label has been substituted with a <code>&lt;span&gt;<\/code> element that is not semantically connected to the input.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div>\n  &lt;span>Card number&lt;\/span>\n  &lt;div>\n    &lt;input type=\"text\" value=\"\" id=\"cardNumber\" name=\"cardNumber\" maxlength=\"40\">\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>The above code should be re-written to ensure accessibility by <strong>replacing the span with a label with <code>for=\"cardNumber\"<\/code><\/strong> on it. This is by far the most simple and robust solution that benefits the most people.<\/p>\n\n\n\n<p>While a label could be substituted with a span that has an <code>id<\/code> with a value matching the input\u2019s <code>aria-labelledby<\/code> attribute, people won\u2019t be able to click the span to focus the input in the same way a label allows. It is always best to <strong>harness the power of native HTML elements<\/strong> instead of re-inventing them. The love story between native input and label elements doesn\u2019t need to be re-written! It\u2019s great as-is.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-don-t-put-interactive-elements-inside-labels\">Don\u2019t: Put interactive elements inside labels<\/h4>\n\n\n<p>Only plain text should be included inside a label. Avoid inserting things such as headings, or interactive elements such as links. Not all screen readers will announce a label correctly if it contains something other than plain text. Also, if someone wants to focus an input by clicking its label, but that label contains a link, they may click the link by mistake.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;form>\n  &lt;div>\n    &lt;!-- Don't do this -->\n    &lt;input type=\"checkbox\" id=\"t-and-c\" name=\"name\" \/>\n    &lt;label for=\"t-and-c\">I accept the &lt;a href=\"https:\/\/link.com\">terms and conditions&lt;\/a>&lt;\/label>\n  &lt;\/div>\n  &lt;div>\n    &lt;!-- Try this -->\n    &lt;input type=\"checkbox\" id=\"t-and-c2\" name=\"name\" \/>\n    &lt;label for=\"t-and-c2\">I accept the terms and conditions.&lt;\/label>\n    &lt;span>Read &lt;a href=\"https:\/\/link.com\">terms and conditions&lt;\/a>&lt;\/span>\n  &lt;\/div>\n&lt;\/form><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLVzwjV\" src=\"\/\/codepen.io\/anon\/embed\/yLVzwjV?height=250&amp;theme-id=1&amp;slug-hash=yLVzwjV&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLVzwjV\" title=\"CodePen Embed yLVzwjV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-real-life-examples\">Real-life examples<\/h3>\n\n\n<p>I always find that real-life examples help me to properly understand something. I searched the web and found examples of labels and inputs from a popular component library and website. Below, I explain where the elements fall short and how they can be improved to ensure a better pairing.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-component-library-material\">Component library: Material<\/h4>\n\n\n<p><a href=\"https:\/\/material-ui.com\/\" rel=\"noopener\">MaterialUI<\/a> is a React component library based on Google\u2019s design system. It includes a <a href=\"https:\/\/material-ui.com\/components\/text-fields\/\" rel=\"noopener\">text input component<\/a> with a floating label pattern that has become a popular go-to for many designers and developers:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/s_0B9DE35E76806396E33C1E9DB62DCF4DA24C3406ABEB605AC61CB6E0DB86B2EE_1614021273605_floating-label.gif?resize=224%2C100&#038;ssl=1\" alt=\"\" class=\"wp-image-337064\" width=\"224\" height=\"100\" data-recalc-dims=\"1\" \/><figcaption>The floating label pattern starts with the label in the placeholder position that moves the label to its proper place above the field. The idea is that this achieves a minimal design while solving the issue of placeholders disappearing when typing.<\/figcaption><\/figure>\n\n\n\n<p>Clicking on the input feels smooth and looks great. But that\u2019s the problem. Its qualities are mostly skin-deep.<\/p>\n\n\n\n<p>At the time of writing this post, some issues I found with this component include:<\/p>\n\n\n\n<ul><li>There is no option to have the label outside of the input in order to offer an increased interactive area for focusing the input.<\/li><li>There is an option to add a hint like we saw earlier. Unfortunately, the hint is only associated with the input via proximity and not through a matching <code>id<\/code> and <code>aria-describedby<\/code>. This means that not all screen readers will be able to associate the helper message with the input.<\/li><li>The label is behind the input in the DOM, making the visual order is incorrect.<\/li><li>The empty input looks look like it is already filled out, at least as long as it is not active.<\/li><li>The label slides up when the input is clicked, making it unsuitable for those who <a href=\"https:\/\/css-tricks.com\/introduction-reduced-motion-media-query\/\">prefer reduced motion<\/a>.<\/li><\/ul>\n\n\n\n<p class=\"explanation\">Adam Silver also <a href=\"https:\/\/adamsilver.io\/blog\/float-labels-are-problematic\/\" rel=\"noopener\">explains why float labels are problematic<\/a> and gets into a <a href=\"https:\/\/www.smashingmagazine.com\/2021\/02\/material-design-text-fields\/\" rel=\"noopener\">detailed critique of Material\u2019s text input design<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-website-huffpost\">Website: Huffpost<\/h4>\n\n\n<p>The <a href=\"https:\/\/www.huffpost.com\" rel=\"noopener\">Huffpost website<\/a> has articles containing a newsletter subscription form:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_0B9DE35E76806396E33C1E9DB62DCF4DA24C3406ABEB605AC61CB6E0DB86B2EE_1614299409070_input-example.png\" alt=\"Huffpost newsletter signup form\"\/><figcaption>This form looks quite nice but could be improved<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>At the time of writing this blog post, the email input that Huffpost uses could benefit from a number of improvements:<\/p>\n\n\n\n<ul><li>The lack of a label means a smaller click or tap target. Instead of a label there is an <code>aria-label<\/code> attribute on the input.<\/li><li>The font size of the <code>placeholder<\/code> and input values are a tiny 11px, which can be hard to read.<\/li><li>The entire input disappears without JavaScript, meaning people have no way to sign up to the newsletter if JavaScript is disabled or broken.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-closing-remarks\">Closing remarks<\/h3>\n\n\n<p>A surprising number of people struggle to enter information into poorly-constructed inputs. That list includes people with cognitive, motor and physical disabilities, autism spectrum disorders, brain injuries, and poor vision. Other people who struggle include those in a hurry, on a poor connection, on a small device, on an old device, and unfamiliar with digital forms, among many others.<\/p>\n\n\n\n<p>Additionally, there are numerous <a href=\"https:\/\/adamsilver.io\/blog\/javascript-isnt-always-available-and-its-not-the-users-fault\/\" rel=\"noopener\">reasons why JavaScript might break<\/a> or be switched off in a browser, meaning inputs become dysfunctional or completely inaccessible. There are also people who are fully capable of viewing a web page but who may choose to use a keyboard along with a screen reader.<\/p>\n\n\n\n<p>The message I want to get across is that <strong>happy label and input pairs are crucial<\/strong>. It doesn\u2019t matter if your form is beautiful if it is unusable. I can bet that almost everyone would rather fill out an ugly but easy-to-use form rather than a pretty one that causes problems.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-thanks\">Thanks<\/h4>\n\n\n<p>I want to warmly thank the following people for helping me with this post: <a href=\"https:\/\/yatil.net\/\" rel=\"noopener\">Eric Eggert<\/a>, <a href=\"https:\/\/adamsilver.io\/\" rel=\"noopener\">Adam Silver<\/a>, <a href=\"https:\/\/twitter.com\/_diondiondion\" rel=\"noopener\">Dion Dajka<\/a>, and <a href=\"https:\/\/kittygiraudel.com\/\" rel=\"noopener\">Kitty Giraudel<\/a>. Their combined accessibility knowledge is a force to be reckoned with!<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-footnotes\">Footnotes<\/h4>\n\n\n<ul><li><sup id=\"fn:1\">1<\/sup> The datepicker is actually well-supported in iOS 14 and very nice. One would imagine that a macOS version has got to be on the horizon. <a href=\"#fn:1a\">\u2b91<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most inputs have something in common\u2009\u2014\u2009they are happiest with a companion label! And the happiness doesn\u2019t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too.<\/p>\n","protected":false},"author":282039,"featured_media":337058,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"HTML Inputs and Labels: A Love Story by @ambrwlsn90","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[466,595,1450,1498,731],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/input-label-love.png?fit=1200%2C675&ssl=1","jetpack-related-posts":[{"id":163694,"url":"https:\/\/css-tricks.com\/float-labels-css\/","url_meta":{"origin":337074,"position":0},"title":"Float Labels with CSS","date":"February 24, 2014","format":false,"excerpt":"You've probably seen this pattern going around. It's an input that appears as if it has placeholder text in it, but when you click\/tap into that input, that text moves out of the way and allows you to type there. It's rather clever, I think. Brad Frost has a really\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330805,"url":"https:\/\/css-tricks.com\/whats-new-in-wcag-2-1-label-in-name\/","url_meta":{"origin":337074,"position":1},"title":"What\u2019s New in WCAG 2.1: Label in Name","date":"December 15, 2020","format":false,"excerpt":"WCAG 2.1 Recommendations rolled out in 2018. It\u2019s been a couple years now and there are some new Success Criterion. In this article, I will discuss Label in Name, which is how we visually label components. We\u2019ll take a look at what some failure states look like, how to fix\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/wcag-form-score.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320956,"url":"https:\/\/css-tricks.com\/form-design\/","url_meta":{"origin":337074,"position":2},"title":"Form design","date":"September 15, 2020","format":false,"excerpt":"A very digestable guide from Geri Reid on building forms. Not the code, but the design and UX principles that should guide the code. Working on a design system for a bank has taught [me] a lot about forms. I've watched testing in our labs. I've worked alongside experts from\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/custom-form-inputs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":355902,"url":"https:\/\/css-tricks.com\/enterkeyhint\/","url_meta":{"origin":337074,"position":3},"title":"enterkeyhint","date":"November 5, 2021","format":false,"excerpt":"I only just recently learned the enterkeyhint attribute on form inputs was a thing! It seems like kind of a big deal to me, as crafting HTML form markup is a decent slice of a front-end developer's life, and this attribute could (should?) be used on nearly every input. The\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/keyboard-enter-focus.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372979,"url":"https:\/\/css-tricks.com\/whats-new-with-forms-in-2022\/","url_meta":{"origin":337074,"position":4},"title":"What\u2019s New With Forms in 2022?","date":"September 8, 2022","format":false,"excerpt":"Browsers are constantly adding new HTML, JavaScript and CSS features. Here are some useful additions to working with forms that you might have missed\u2026 requestSubmit() Safari 16 will be the final browser to add support for requestSubmit. Before we look at how .requestSubmit() works, let\u2019s remind ourselves how programmatically submitting\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/forms.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302330,"url":"https:\/\/css-tricks.com\/custom-styling-form-inputs-with-modern-css-features\/","url_meta":{"origin":337074,"position":5},"title":"Custom Styling Form Inputs With Modern CSS Features","date":"February 7, 2020","format":false,"excerpt":"It\u2019s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don\u2019t even need a single line of JavaScript or extra HTML elements! It\u2019s actually gotten easier lately than it has been in the past. Let\u2019s take a look. Here\u2019s where\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/custom-form-inputs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337074"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/282039"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=337074"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337074\/revisions"}],"predecessor-version":[{"id":337755,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337074\/revisions\/337755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/337058"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=337074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=337074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=337074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}