Labelling Form elements

Labelling is fundamental in coding forms because, without a proper declaration, users will not understand what they should do and what kind of information they should put in your input.

Breaking this rule will result in your accessibility audit telling you “ERROR*: Form controls must have accessible names.* “

But try following the simple guidelines below and you'll have your accessible inputs in no time!

Declare labels

Each input MUST have its own label, and there are three ways to do that.

• use a <label> tag. Label has the unique attribute "for", that points directly to the input's id. It's the most direct and easy approach, I think.

    <label for=”field-unique-id”>Name</label>
    <input type=”text” id=”field-unique-id ” />
  

• use the attribute "labelled-by" in the input field, referencing one specific textual element id. Same as before, just inverted. I find it useful only if a text that could be an appropriate label for the field has been already used for other purposes before.

    <label id=”field-unique-id”>Name</label>
    <input type=”text” aria-labelledby=”field-unique-id” />
  

• use an implicit reference. A <label> wraps both the text and the input. Useful for switches, custom radio buttons or checkboxes, and sometimes for GUI functionalities that use fields behind the scenes. They are lesser supported by assistive technologies, but however a good tool for graphic workarounds.

    <label>
        I agree
          <input type="checkbox" name="agreement">
    </label>
  

Alternative approaches

Placeholder text as input label

Don't use it as a label. No, full stop. Really, placeholder text it's not meant to be a label at all. The right tool for the right job, remember?

Title attribute

"Title" attribute is not so reliable for labelling, as not all assistive technologies interpret it as a replacement for a proper label: you already have other ways to label an element, so why should they? But however, a "title" is a great add-on for your UI/UX, showing in many cases also a small tooltip that you can use to give the user some advice on how to properly fill your inputs or however provide useful but non-vital additional info.

Punctuation

This is a point that not many consider, both in testing and in writing tutorials. A label must be present and must be read by assistive technologies, but don't forget the most important part: it must be understandable. Don't forget the role of punctuation when writing your labels and texts in general. Two labels without a full stop between them could be hard to distinguish or potentially give a different meaning. Think of two pictures of the last dinner with your family (the first one of a dish of your least favourite food, and a second of you and your lovely granny), and try to remove the full stop/pause in between them: “I had to eat.” and “My granny!”... poor old lady!

Hiding a label

Hiding a label is often a bad UX choice, but this doesn't mean that there aren't cases where it could be useful or needed (maybe what the field requires the user to do it's so obvious that a label is not needed). That doesn't mean that you should remove the label completely; you can choose between two strategies:

• using attribute "aria-label": the label is “self contained” in the input element itself.

    <input type="text" aria-label="Your email" />
    <button type="submit">Subscribe</button>
  

• using “visually hidden” strategy: instead of setting a "display: none" style or "visibility: hidden", go with a “visually hidden” strategy, as discussed in another article. In this way you can toggle its visibility also with pure CSS, but leaving it available to assistive technology.

    <label for=”field-unique-id” class="visually-hidden">Name</label>
    <input type=”text” id=”field-unique-id ” />
  

Grouping more controls

You can group logically two or more controls: for example a group of radio inputs or checkboxes (where every input has its own label) or various kinds of inputs with the same purpose (eg. personal details, contacts...). In these cases you need a “group label”.

You'll need a grouping tag, and that's the purpose of <fieldset>, which defines the boundaries for your group of controls, and <legend> that is its own label: different name, same purpose.

Without it, users could deduct this logical group by themselves.

<fieldset>
    <legend>What pet do you own?</legend>
    <label>Dog<input type=”radio” value=”dog”></label>
    <label>Cat<input type=”radio” value=”cat”></label>
    <label>Dragon<input type=”radio” value=”dragon”></label>
</fieldset>

Labeling groups of options

A final, limit-case, of labeling inside forms is about <optgroup>, a tag that allows you to create groups of options inside a <select> control.

<label for="pet-selection">Choose your pet:</label>
<select id="pet-selection">
  <optgroup label="Common ones">
    <option value=”dog”>Dog</option>
    <option value=”cat”>Cat</option>
  </optgroup>
  <optgroup label="Cool ones">
    <option value=”dog”>Dragon</option>
    <option value=”dog”>Wyvern</option>
  </optgroup>
</select>

What about other elements?

Labeling is a fundamental step in making your document accessible and usable. It's not a difficult topic if you look back at this article, but it needs a proper explanation. Since forms represent a huge part of the whole topic, I've split it in two sections. Soon the next article.