Label

Synonyms: Designation, form field label, name, accessible name

See also: font, text, graphik, form, group, description, error message, required field label

Labels are used for the identification of control elements (see DIN EN ISO 9241-161: 8.21).

A label consists of a short, descriptive text or an expressive graphic and/or a combination of text and graphic. The label can be situated inside the element or adjacent to the element which is labeled.

• JAWS: [Label] [role] [required field note] [validation note] [value] [description] [error message] [screen reader operating note] [keyboard shortcut note]
• NVDA: [Label] [role] [required field note] [validation note] [description] [keyboard shortcut note] [value]
• Windows Sprachausgabe: [Label] [role] [value] [required field note] [validation note] [keyboard shortcut note]

Please note:

• The label is output by the screen readers first, immediately before the role.
• Only one group label is output before the label, if available.
• During the reading with the virtual cursor, the label is output at the element itself or where it is located in the source code, depending on the control element. To ensure that labels can also be assigned to the control elements correctly in the case of reading with the virtual cursor, the label should be located in the source code in the element (e.g. with links and buttons), directly in front of the element (with form fields other than radio buttons and check boxes) or directly after the element (with radio buttons and check boxes).

In HTML, the labeling method depends on the element type:

• Links, buttons (that are marked with the <button element>are labeled using their text content or the alternative text of the graphic,
• Buttons (that are marked with the <input> element) are labeled using the value attribute.
• Form elements are labeled with the <label> element.
• Form field groups (<fieldset>) are labeled with the <legend> element.
• Graphics (<img>) are labeled with the alt attribute.
• Figures (<figure>) are labeled with the <figcaption> element.
• Tables are labeled with the <caption> element.
• iFrames and regions (e.g. <nav> and <section>) are labeled with the title attribute. Certain elements may not be labeled (e.g. <div> or <span>).

Further information: 4.10.4 The label element - HTML Standard (whatwg.org), Providing Accessible Names and Descriptions | APG | WAI | W3C, Labeling Controls | Web Accessibility Initiative (WAI) | W3C, 4. Accessible Name and Description Computation - HTML Accessibility API Mappings 1.0 (w3.org)

In ARIA, it is possible to communicate labels with the attributes aria-labelledby and aria-label.

• With aria-labelledby reference can be made to the IDs of visible or invisible labels.
• With aria-label the label can be specified directly in text form.
• Certain elements that are marked with ARIA roles can also be labeled with their text content. This also applies to the button, link, checkbox, radio, option and tab. roles. In the ARIA specification, these elements are marked with “Name From: content”.
• Certain elements that are marked with ARIA roles must be explicitly labeled (generally with aria-label or aria-labelledby) Labeling using the text content is not possible. This also applies to the following roles: listbox, combobox, dialog, form, application, grid.In the ARIA specification, elements that have to be labeled are marked with “Accessible Name Required: True”. Whether an element can be explicitly labeled can be seen in the ARIA specification at “Name From: author”.
• A label can also be marked with role=caption caption, and then serves the purpose of the labeling of tables (role=grid, role=table, role=treegrid) and figures (role=figure), as long as the label is the first (or with role=figure the final) child element of the element to be labeled. Regardless of the marking with role=caption , reference to the label should be made with aria-labelledby.
• Certain ARIA roles cannot be labeled, such as generic, paragraph, presentation, code, insertion, deletion, emphasis, strong, subscript and superscript. In the ARIA specification, these elements are marked with “Name From: prohibited”. Elements with these roles may contain text, however.
• Reference can be made to hidden elements using aria-labelledby , e.g. those that have been marked with display:none or hidden . The contents of the hidden elements are used to label the element with aria-labelledby. In such cases, however, the use of aria-label is recommended..

Further information: aria-label property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), aria-labelledby property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), caption role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link)

• Each control element must have a label which is communicated to the Accessibility API as the Accessible Name. This also applies if the element has no visible label.
• The label should be concise and expressive.
• The Accessible Name should not contain any change of language or structured content, as this is not perceptible with the assistive technology.
• For each element, it is only possible to communicate a label to the Accessibility API using one method. If several methods are used, only the label whose method has the highest priority is used as the Accessible Name. The priority of the methods is defined as follows:
  1. aria-labelledby,
  2. aria-label,
  3. HTML labeling methods (e.g. <label>, <caption>, value, alt, if applicable to the element),
  4. text content (if permissible for the element),
  5. title,
  6. placeholder (only for input fields).
• Elements should not be labeled using the title- or placeholderattribute, as these two attributes, which are actually intended for the communication of a description and/or an input instruction, are used only as a label if no correct label is available. This is a repair mechanism which is designed to ensure that an element is not output without a label.
• If the labeling of a control element occurs explicitly using an attribute (for example, aria-label, aria-labelledby, id, which are referenced via <label for>the attribute must be situated on the element that receives keyboard focus and has the role of the element to be labeled. The control element cannot be labeled by attribute if the attribute is situated on a parent or child element.
• Text content which is shown before or after as pseudo-elements using the CSS selectors are taken into account when determining the label. To avoid this, they should be marked with aria-hidden=true.
• If a reference is made to a form field using aria-labelledby, the value of the form field (not its label, however) is taken into account when determining the labeling of the element with aria-labelledby.
• ARIA elements must generally be labeled with an ARIA method (e.g. aria-label or aria-labelledby) or using their text content (if permissible for the respective role). In this way, for example, an ARIA check box cannot be labeled with the <label>element and an ARIA graphic cannot be labeled with the alt attribute. An exception is presented by ARIA elements whose underlying HTML elements allow for the appropriate HTML labeling method. Accordingly, a combined input field (<input role=combobox>) can be labeled with the <label> element because the HTML element <input> can be labeled with the <label> element.
• The visible label should not be marked with aria-hidden=true true, even if an Accessible Name is available, to ensure that the text-to-speech works using the mouse.
• The visible label should be used as an Accessible Name to avoid a repeated output of the label with the text-to-speech feature.
• For form fields, the Accessible Name in the source code should be immediately in front of the element, except for radio buttons and check boxes, in which case the Accessible Name in the source code should be immediately behind it. This is important, to ensure that the label can be assigned to the form fields correctly when reading with the virtual cursor of the screen reader. ⦁ Depending on the type of element, the text content of elements is also imperceptible with the virtual cursor of the screen reader if the elements are explicitly labeled (e.g. with aria-label or aria-labelledby).
  • In the case of control elements (such as links and buttons), the text content should be used as a label. It must otherwise be ensured that all the information contained in the text content is also available in the Accessible Name.
  • In the case of grouping elements (such as form field groups, regions, lists, or tables), their contents are perceptible with the virtual cursor, even if they are explicitly labeled. These elements should therefore be labeled explicitly so that their purpose is recognizable.

Information about this article

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!