tips

Tip 012 - Form Label Accessibility

Forms, or if you're like me several times a day, "froms," (curse you, dyslexic fingers!) are made up of elements that let you fill in information. To know what information you're supposed to put in an input, you can label that element:

<label for="agree">Do you agree?</label>
<input type="checkbox" name="Do you agree?" value="Yes" id="agree" />

When it comes to accessibility, how can you make sure this label actually represents this input? There's a few different ways. Like above, the for="" attribute attaches a label to an input with the same ID. You can also associate the label by wrapping the input with the label.

<label>
  Do you agree?
  <input type="checkbox" name="Do you agree?" value="Yes" />
</label>

But this isn't recommended, since it's less reliable.


But suppose your design doesn't have labels, but placeholder text in the inputs instead? Or maybe you're putting together an app and this particular input doesn't "need" a label? Heck, maybe you just don't like labels. Whatever. There's a few ways you could label something programmatically, so that it doesn't show up on the screen, but assistive technology still sees it.

Options here include things like using CSS to visually hide (not remove or display:none;) the label, using aria-label, aria-labelledby, and even the title attribute. For more details on these, check out the Web Accessibility Tutorials by the ARIA Working Group at the W3C. Those guidelines and approaches should be your go-to source for learning how to make things accessible, and this is no exception.

 

Have you written a reply to this post? Send me the URL here: