Beschriftung

Synonyme: Bezeichnung, Formularfeldbeschriftung, Label, Name, Accessible Name

Siehe auch: Schrift, Text, Grafik, Formular, Gruppe, Beschreibung, Fehlermeldung, Pflichtfeldkennzeichnung

Beschriftungen dienen der Identifikation von Bedienelementen (siehe DIN EN ISO 9241-161: 8.21).

Eine Beschriftung besteht aus einem kurzen, beschreibenden Text oder einer aussagekräftigen Grafik bzw. aus einer Kombination von Text und Grafik. Die Beschriftung kann sich innerhalb des Elements oder neben dem Element befinden, welches beschriftet wird.

• JAWS: [Beschriftung] [Rolle] [Pflichtfeldhinweis] [Validierungshinweis] [Wert] [Beschreibung] [Fehlermeldung] [Bedienhinweis des Screenreaders] [Hinweis auf Tastaturkürzel]
• NVDA: [Beschriftung] [Rolle] [Pflichtfeldhinweis] [Validierungshinweis] [Beschreibung] [Hinweis auf Tastaturkürzel] [Wert]
• Windows Sprachausgabe: [Beschriftung] [Rolle] [Wert] [Pflichtfeldhinweis] [Validierungshinweis] [Hinweis auf Tastaturkürzel]

Hinweise:

• Die Beschriftung wird von den Screenreadern an erster Stelle, unmittelbar vor der Rolle, ausgegeben.
• Vor der Beschriftung wird lediglich eine Gruppenbeschriftung ausgegeben, sofern vorhanden.
• Beim Lesen mit dem virtuellen Cursor wird die Beschriftung je nach Bedienelement beim Element selbst ausgegeben oder an der Stelle, an der sie sich im Quellcode befindet. Damit auch beim Lesen mit dem virtuellen Cursor die Beschriftungen korrekt den Bedienelementen zugeordnet werden können, sollte sich die Beschriftung im Quellcode im Element (z. B. bei Links und Schaltern), direkt vor dem Element (bei Formularfeldern außer Radiobuttons und Checkboxen) oder direkt nach dem Element (bei Radiobuttons und Checkboxen) befinden.

In HTML hängt die Beschriftungsmethode vom Elementtyp ab:

• Links, Schalter (die mit dem <button>-Element ausgezeichnet sind), werden über ihren Textinhalt oder den Alternativtext der Grafik beschriftet,
• Schalter (die mit dem <input>-Element ausgezeichnet sind), werden über das value-Attribut beschriftet.
• Formularelemente werden mit dem <label>-Element beschriftet.
• Formularfeldgruppen (<fieldset>) werden mit dem <legend>-Element beschriftet.
• Grafiken (<img>) werden mit dem alt-Attribut beschriftet.
• Abbildungen (<figure>) werden mit dem <figcaption>-Element beschriftet.
• Tabellen werden mit dem <caption>-Element beschriftet.
• iFrames und Regionen (z. B. <nav> und <section>) werden mit dem title-Attribut beschriftet. Einige Elemente dürfen nicht beschriftet werden (z. B. <div> oder <span>).

Weitere Informationen: 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 können Beschriftungen mit den Attributen aria-labelledby und aria-label übermittelt werden.

• Per aria-labelledby kann auf die IDs von sichtbaren oder unsichtbaren Beschriftungen verwiesen werden.
• Mit aria-label kann die Beschriftung direkt in Textform angegeben werden.
• Einige Elemente, die mit ARIA-Rollen ausgezeichnet sind, können außerdem über ihren Textinhalt beschriftet werden. Dies gilt u. a. für die Rollen button, link, checkbox, radio, option und tab. In der ARIA-Spezifikation sind diese Elemente mit „Name From: content“ gekennzeichnet.
• Einige Elemente, die mit ARIA-Rollen ausgezeichnet sind, müssen explizit (d. h. in der Regel mit aria-label oder aria-labelledby) beschriftet werden. Eine Beschriftung über den Textinhalt ist nicht möglich. Dies gilt u. a. für die Rollen: listbox, combobox, dialog, form, application, grid. In der ARIA-Spezifikation sind Elemente, die beschriftet werden müssen, mit „Accessible Name Required: True“ gekennzeichnet. Ob ein Element explizit beschriftet werden kann, ist in der ARIA-Spezifikation am „Name From: author“ ersichtlich.
• Darüber hinaus kann eine Beschriftung mit role=caption ausgezeichnet werden und dient dann als Beschriftung von Tabellen (role=grid, role=table, role=treegrid) und Abbildungen (role=figure), sofern die Beschriftung das erste (oder bei role=figure auch letzte) Kindelement des zu beschriftenden Elements ist. Unabhängig von der Auszeichnung mit role=caption soll per aria-labelledby auf die Beschriftung verwiesen werden.
• Einige ARIA-Rollen dürfen nicht beschriftet werden, z. B. generic, paragraph, presentation, code, insertion, deletion, emphasis, strong, subscript und superscript. In der ARIA-Spezifikation sind diese Elemente mit „Name From: prohibited“ gekennzeichnet. Elemente mit diesen Rollen dürfen allerdings Text enthalten.
• Es ist zulässig, per aria-labelledby auf ausgeblendete Elemente, die z. B. mit display:none oder hidden ausgezeichnet wurden, zu verweisen. Die Inhalte der ausgeblendeten Elemente dienen als Beschriftung des Elements mit aria-labelledby. Es empfiehlt sich in solchen Fällen jedoch, aria-label zu verwenden.

Weitere Informationen: aria-label property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), aria-labelledby property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), caption role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link)

• Jedes Bedienelement muss eine Beschriftung besitzen, die als Accessible Name an die Accessibility API übermittelt wird. Dies gilt auch, wenn das Element keine visuell sichtbare Beschriftung besitzt.
• Die Beschriftung sollte knapp und aussagekräftig sein.
• Der Accessible Name sollte keinen Sprachwechsel und keine strukturierten Inhalte enthalten, weil dies mit der Assistenztechnologie nicht wahrnehmbar ist.
• Für jedes Element kann nur mit einer Methode eine Beschriftung an die Accessibility API übermittelt werden. Werden mehrere Methoden verwendet, wird lediglich die Beschriftung als Accessible Name verwendet, deren Methode die höchste Priorität besitzt. Die Priorität der Methoden ist wie folgt definiert:
  1. aria-labelledby,
  2. aria-label,
  3. HTML-Beschriftungsmethoden (wie <label>, <caption>, value, alt, sofern für das Element zutreffend),
  4. Textinhalt (sofern für das Element zulässig),
  5. title,
  6. placeholder (nur bei Eingabefeldern).
• Elemente sollten nicht per title- oder placeholder-Attribut beschriftet werden, weil diese beiden Attribute, die eigentlich für die Übermittlung einer Beschreibung bzw. eines Eingabehinweises gedacht sind, nur als Beschriftung verwendet werden, wenn es keine richtige Beschriftung gibt. Es handelt sich dabei um einen Reparaturmechanismus, der sicherstellen soll, dass ein Element nicht ohne Beschriftung ausgegeben wird.
• Wenn die Beschriftung eines Bedienelements explizit über ein Attribut erfolgt (z. B. aria-label, aria-labelledby, id, auf die per <label for> verwiesen wird), dann muss sich das Attribut an dem Element befinden, welches den Tastaturfokus erhält und die Rolle des zu beschriftenden Elements besitzt. Das Bedienelement kann nicht per Attribut beschriftet werden, wenn sich das Attribut an einem übergeordneten oder untergeordneten Element befindet.
• Textinhalte, die über die CSS-Selektoren before oder after als Pseudoelemente dargestellt werden, werden bei der Ermittlung der Beschriftung berücksichtigt. Soll dies vermieden werden, sollten sie mit aria-hidden=true ausgezeichnet werden.
• Wird per aria-labelledby auf ein Formularfeld verwiesen, so wird der Wert des Formularfeldes (nicht jedoch dessen Beschriftung) bei der Ermittlung der Beschriftung des Elements mit aria-labelledby berücksichtigt.
• ARIA-Elemente müssen in der Regel mit einer ARIA-Methode (z. B. aria-label oder aria-labelledby) oder über ihren Textinhalt (sofern für die entsprechende Rolle zulässig) beschriftet werden. So kann z. B. eine ARIA-Checkbox nicht mit dem <label>-Element und eine ARIA-Grafik nicht mit dem alt-Attribut beschriftet werden. Eine Ausnahme stellen ARIA-Elemente dar, deren zugrundeliegenden HTML-Elemente die entsprechende HTML-Beschriftungsmethode erlauben. So kann ein kombiniertes Eingabefeld (<input role=combobox>) mit dem <label>-Element beschriftet werden, weil das HTML-Element <input> mit dem <label>-Element beschriftet werden kann.
• Die sichtbare Beschriftung sollte nicht mit aria-hidden=true ausgezeichnet werden, selbst wenn ein Accessible Name vorhanden ist, damit die Sprachausgabe auch bei Mausbedienung funktioniert.
• Die sichtbare Beschriftung sollte als Accessible Name verwendet werden, um eine mehrfache Ausgabe der Beschriftung mit der Sprachausgabe zu vermeiden.
• Bei Formularfeldern sollte sich der Accessible Name im Quellcode unmittelbar vor dem Element befinden, außer bei Radiobuttons und Checkboxen, bei denen sich der Accessible Name im Quellcode unmittelbar dahinter befinden sollte. Das ist wichtig, damit auch beim Lesen mit dem virtuellen Cursor des Screenreaders die Beschriftung korrekt den Formularfeldern zugeordnet werden kann.
• Je nach Elementtyp ist der Textinhalt von Elementen auch mit dem virtuellen Cursor des Screenreaders nicht wahrnehmbar, wenn diese explizit beschriftet sind (z. B. mit aria-label oder aria-labelledby).
  • Bei Bedienelementen (wie z. B. Links und Schalter) sollte der Textinhalt als Beschriftung verwendet werden. Andernfalls muss sichergestellt sein, dass alle Informationen, die im Textinhalt stehen, auch im Accessible Name vorhanden sind.
  • Bei gruppierenden Elementen (wie Formularfeldgruppen, Regionen, Listen oder Tabellen) ist deren Inhalt mit dem virtuellen Cursor wahrnehmbar, selbst wenn diese explizit beschriftet sind. Diese Elemente sollten somit explizit beschriftet werden, damit deren Zweck erkennbar ist.

Informationen zu diesem Artikel

Datum:

5.10.2023

Lizenz:

CC-BY-SA 4.0

Version:

0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!