Here’s a little mistake I’ve made more often than I care to admit, and am likely to do so again.
<label>Total</label>
<span>$100.00</span>
Depending on the context, I may be using some more involved markup for the value, but generally speaking this is the kind of thing I have seen or used hundreds of time when marking a form with some read-only calculated values.
It, is, of course, completely wrong.
Labels should always be associated with a form control. The example above is not associated with anything.
Now, while we could add an id to the span element (and usually there is one so we can programatically update it when the rest of the form changes), and set the for attribute of the label, that isn’t actually valid. Labels can only be associated with labelable elements.
What if we nested the span inside the label? That doesn’t create the implicit association you might expect, again because <span> is not one of the element types that can be labelled.
Luckily, there is a very, very simple fix. Just use the <output> element, which exists for exactly this purpose.
<label for="total">Total</label>
<output id="total">$100.00</output>
There’s a real accessibility win here, as well. When the output contents changes, most user agents will treat it as an ARIA live region and announce the label followed by the new value.
If the output is made focusable, the label can be used to select it (the same way a standard input can be focused by selecting the label).
Finally, you could also swap in an input element and make it readonly. This may make sense for a field that is only read-only part of the time.