Making Labels accessible

Labels are an old topic in digital accessibility, but are often underestimated compared to headings or alternative text.

This article is About the labeling of clickable User Interface elements, i.e., UI elements, not the labeling of areas such as landmarks or alternative text for images.

WCAG Requirements

The WCAG itself has relatively few requirements on the topic of labels.

  • 1.3.1: Info and Relationships
  • 2.4.6: Headings and Labels
  • 2.5.3: Label in Name
  • 3.3.2: Labels or Instructions

The WAI document Accessible Name and Description Computation defines the sequence according to which accessible labels are determined. This is necessary because there are several ways to specify a label.

Labeling Options

The accessible name is determined from certain attributes or visible text – in a clear priority. This is the order of name calculation (greatly simplified).

For HTML elements (e.g., button, input, img, etc.):

1. aria-labelledby

  • Retrieves the name from another element by ID.
  • → Overrides everything else.

2. aria-label

  • An explicit name, specified directly as an attribute.
  • → Overrides visible text, but not aria-labelledby.

3. Element-specific text content (visible text)

  • E.g., the text within a button or label
  • Used when aria attributes are not set.

4. alt attribute (only for img)

Used as a name if present.

5. title attribute

    Only used if nothing else is available.

    6. label for="..." or enclosing label for input

    Considered a "visible" name for form elements

    7. ARIA described by as a supplement

    ARIA described by is only used as a supplement, not as a label for elements. For example, displayed error messages for incorrectly filled form fields are linked to the form field using ARIA described by. This allows screen readers to clearly distinguish between the label and the error message.

    Placeholder text does not count as accessible labels in this context.

    Following the motto "HTML first, ARIA only when necessary," implicit or explicit labels should be used preferentially for labeling HTML form elements. This is followed by ARIA Labeled by to establish a relationship between the label and the labeled element. ARIA Label has the disadvantage that it does not automatically adjust if the visual label changes. ARIA Label should only be used when a UI element has no visual label, for example, for a burger menu or a share button that consists only of an icon.

    Common Mistakes

    1. Same label, different contexts

    An example is a website that contains two search functions, one for the website and one for a database. The search labels should be designed clearly so they are not confused.

    2. Same purpose, different labels

    A function serves the same purpose but has been labeled differently. However, I have not encountered this in practice yet.

    3. Labels that are too long

    Long labels always occur when visual labels are supplemented with good intentions. Example: The visual label is "Submit," and the machine-readable label is "Click here to submit the form." The situation is different when labels are generated from group labels such as Fieldset/Legend or ARIA labeled by. Here, the standard is followed, but this can still confuse rather than help. Unfortunately, there is no simple solution for this case.

    4. Difference between Visual and Machine-Readable Labels

    WCAG 2.5.3: Label in Name requires that the visual label be part of the machine-readable name. If the visual label is "First Name," the machine-readable label should not be "Given Name," because the character string "First Name" would not appear in it. 2.5.3 is primarily aimed at users of voice control. The voice command "Go to input field First Name" wouldn't work in this example because the machine-readable label doesn't contain "First Name." However, a machine-readable label like "First Name/Given Name" would be allowed.

    Tips for Accessible Labels

    • Is the visual label included in the machine-readable label?
    • Just take a look at the labels you use in your application. Are there labels like "search" that occur repeatedly but serve different purposes?
    • Are labels understandable on their own or from the context, or does it make sense to create an additional reference using ARIA described by?
    • Are labels, grouping labels, or ARIA labeled-by labels too long?

    More on accessible Components