htmlinputlabel

Is it good practice to use <label> for non-input/non-interactive elements?

When labeling a non-input element with no interactivity, such as a preview <img>, is it better (or correct) to use <span> instead of <label>?

e.g.:

<span>Image preview:</span>
<img id="preview">

or this:

<label for="preview">Image preview:</label>
<img id="preview">
Solution

  • It is entirely acceptable to use <label> elements as captions for non-input tags– as long as you do not reference non-labelable elements with the label.for attribute.

    This is because the list of labelable elements is explicit– but label doesn't need to have an "associated control" to be valid.

    So if you're going to use one, do it like this:

    <label>Image preview:</label>
<img id="preview">

    Not like this:

    <!-- WRONG: img is not labelable -->
<label for="preview">Image preview:</label>
<img id="preview">

    Deeper dive into the spec follows below.

    The HTML Living Standard

    Per the label element section of the HTML Living Standard, label elements may optionally be associated with a form control, but this is not required.

    The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.

    Except where otherwise specified by the following rules, a label element has no labeled control.

    ...

    Note, specifically, that in addition to stating that the caption "can be associated with a ... form control" (rather than "must be"), the docs explicitly note that:

    Except where otherwise specified by the following rules, a label element has no [specific form control associated with the caption].

    Which only seems to make sense if the element can be used with or without an associated input. This also makes sense in light of label's defined semantic meaning as a generic caption for content– more than just inputs can have and benefit from captions.

    That said, it's also just as specific about what kinds of elements are eligible to be that "labeled control": a bucket fittingly named labelable elements. This category refers to the explicit list of elements defined in the spec that are eligible to be directly associated with a label.

    Note that this includes traditional, interactive elements like buttons, inputs (that are not hidden), selects, & textareas, but also includes meter, output, and progress, which are not directly interactive, further emphasizing the idea that the usage of label is more expansive that just on inputs.

    In summary, labels may be used as captions, broadly– but only associated with an element on the approved "labelable" list. In practice, that means doing this:

    <label>Image preview:</label>
<img id="preview">

    (And avoiding wrapping the content to caption inside a label, since that implies the content is part of the label instead of described by it.)

    The WCAG H44 Objection

    Sources which indicate that label elements should only be used on inputs frequently reference WCAG 2+'s requirement that inputs have labels, along with WCAG Technique H44: Using label elements to associate text labels with form controls, which presents an example pattern that meets the spec.

    This is not a mandate for the usage of label elements, and interpreting it as such is a misreading.

    WCAG itself notes that techniques are non-normative on their About Techniques page:

    Techniques are not required

    Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.1 is the success criteria from the WCAG 2.1 standard—not the techniques.

    The aim of the H44 Technique is to fulfill or help fulfill four WCAG 2+ success criteria relating to:

    Ultimately, the above technique and criteria is designed to aid accessibility– not to dictate that label elements only be used for user inputs alone.