Erfolgskriterium 2.5.3
Beschriftung im Namen

WCAG Kontext

Konformitätsstufe A

Prinzip 2. Bedienbar Operable

Komponenten der Benutzerschnittstelle und die Navigation müssen bedienbar sein.

Richtlinie 2.5 Eingabeverfahren

Mach es einfacher, Funktionalitäten über die Tastatur hinaus durch verschiedene Eingaben zu bedienen.

Verwandte Erfolgskriterien

1.3.1 Infos und Beziehungen

Der visuellen Darstellung muss eine korrekte semantische Darstellung entsprechen.

Was visuell wie die Beschriftung eines Steuerelements aussieht, muss auch technisch als Beschriftung mit dem Steuerelement assoziiert sein.

2.4.4 Linkzweck (Im Kontext)

Die Beschriftung eines Links muss zumindest im engen technischen Kontext den Inhalt der Zielseite beschreiben.

Konformitätsstufe AAA: Erfolgskriterium 2.4.9 Linkzweck (Allein)

3.3.2 Beschriftung oder Anleitung

Formularelemente, die eine Eingabe erfordern, benötigen eine klar verständliche Beschriftung oder Anleitung.

Erläuterungen zum Kontext

Das Erfolgskriterium wurde in den WCAG 2.1 neu eingeführt. Dies erfolgte als Reaktion auf den verstärkten Einsatz der Bedienung mittels Spracheingabe, der insbesondere durch mobile Geräte ermöglicht wurde (Siri, ...).

Übersetzung des Erfolgskriteriums

In Komponenten der Benutzerschnittstelle mit einem Text oder einer Abbildung von Text in der Beschriftung enthält der Name den visuell dargestellten Text.

Als vorbildhafte Übung wird der Text der Beschriftung an den Anfang des Namens gestellt.

Anmerkungen zur Übersetzung

Zum raschen Verständnis

Die Beschriftung am Bildschirm muss in derselben Reihenfolge im technisch verfügbaren Namen (Accessible Name) eines Links, Schalters oder einer Formularkomponente enthalten sein. Lediglich vor und/oder hinter dem Beschriftungstext sind Ergänzungen zulässig.

Auf diese Weise wird die Bedienbarkeit durch eine Spracheingabe sichergestellt. Einer möglichen Fehlbedienung wird dadurch ebenso vorgebeugt.

Hierarchie der Namenszuweisung

Es gibt unterschiedliche Verfahren, einer Komponente einen technisch zugänglichen Namen zuzuweisen. Innerhalb dieser Verfahren kommt jeweils nur das höchstrangige Verfahren bei der Darstellung zum Zug:

1. Verfügt das Element zulässig über ein aria-label oder ein aria-labelledby-Attribut, stellt dessen Wert den technisch zugänglichen Namen dar.
2. Fehlt ein solches ARIA-Attribut und erlaubt die Spezifikation eine Beschriftung des Elements, besteht der Name aus der Beschriftung.
3. Fehlen sowohl ARIA-Anweisung als auch Beschriftung, wird der Name aus dem Wert eines zulässigen Attributs entnommen.

ARIA Anweisungen

Die Attribute aria-label und aria-labelledby überschreiben jegliches andere Verfahren zum Zuweisen eines Namens. Sie stehen in der Hierarchie der technischen Beschriftung also ganz oben.

Die Inhalte dieser ARIA-Attribute führen am Bildschirm zu keiner Veränderung, sind jedoch für assistierende Technologien der relevante Gehalt in der Schnittstelle. Sehen wir uns folgende Beispielcodes an:

<button 
  aria-label="Birnen">
  Äpfel
<button/>

<p id="obst">Birnen<p>

<button 
  aria-labelledby="obst">
  Äpfel
<button/>

In beiden Beispielen lautet die sichtbare Beschriftung Äpfel. Der technische Name ist jedoch Birnen und dieser wird von assistierenden Technologien verwendet. Ein Screen Reader liest also nicht Äpfel, sondern Birnen vor. Beim Einsatz einer Spracheingabe muss Klicke auf Birnen gesprochen werden, um den Schalter zu aktivieren.

Diese beiden ARIA-Attribute sollten daher nur in begründeten Ausnahmefällen und mit Bedacht eingesetzt werden.

Core AAM 1.2 | Conflicts between native markup semantics and WAI-ARIA

Details zu Konflikten aus einer parallelen Verwendung von nativem Markup und ARIA Rollen

HTML Techniken

In HTML stehen neben der einfachen Beschriftung von Links und Schaltern auch spezielle Elemente (<label>) und Attribute (alt, title, value) zur Namenszuweisung zur Verfügung.

W3C | HTML Accessibility API Mappings 1.0 (HTML AAM)

Festlegung des zugänglichen Namens für HTML-Elemente und die Hierarchie der Attribute bei der Zuordnung.

Beschriftung ≠ Name

Gelegentlich wird es redaktionell als erforderlich angesehen, für assistierende Technologien die Beschriftung durch Zusatzinformationen zu erweitern. Wenn die Zusatzinformation im technisch zugänglichen (accessible) Namen erfolgt, muss bei der technischen Umsetzung folgendes beachtet werden, um das Erfolgskriterium zu erfüllen:

1. Der Text der sichtbaren Beschriftung muss im technisch zugänglichen Namen enthalten sein.
2. Innerhalb des Textes der sichtbaren Beschriftung darf im Namen kein Text eingefügt werden.

Die Zeichenfolge der Beschriftung muss also im Namen unverändert enthalten sein.

Visuelle Darstellung der Beschriftung

Worin eigentlich die Beschriftung besteht, muss visuell klar erkennbar sein. Dies ist sowohl bei der Realisierung als auch für sehende Nutzer*innen und im Testverfahren von Relevanz.

Für die visuelle Realisierung stehen zunächst Darstellungsmöglichkeiten für Schriftarten, Randelemente und Abstände zur Verfügung. In Formularkomponenten sind Konventionen zur Positionierung der Beschriftung für ein Steuerelement zu beachten:

Eingabefelder, Dropdown-Listen, Comboboxen

Links oder oberhalb der Komponente und abgestimmt auf den linken oberen Rand des Eingabe- oder Auswahlelements.

Kontrollkästchen (Checkboxen) und Auswahlschalter (Radio Buttons)

Unmittelbar rechts der Komponente und abgestimmt auf den oberen Rand des Steuerelements.

Beschriftungen für Links, Schalter und Tabs aus Icons

Unmittelbar unter dem Icon

WCAG Technik G162: Positioning labels to maximize predictability of relationships

Konventionen zur visuellen Positionierung von Beschriftungen für Steuerelemente

Icons und Einzelzeichen ohne Text

Komponenten, die über keinerlei visuelle Beschriftung in Textform verfügen, werden von diesem Erfolgskriterium nicht berührt. Dies sind typischerweise Steuerelemente, die lediglich aus Icons bestehen.

Besteht ein Icon aus einem Einzelbuchstaben etwa einem F für die Fettformatierung, sollte der Name nicht aus dem Einzelbuchstaben bestehen, sondern aus der Funktion, die das Steuerelement auslöst (Fett formatieren). Das Symbol ▷ würde in einem Videoplayer angemessen mit Abspielen bezeichnet.

Besteht das Icon aus einer Grafik, wird der Name im alt-Attribut eingegeben.

Besteht das Icon aus einem Einzelzeichen, wird der Name im aria-label-Attribut eingegeben.

Mathematische Ausdrücke und Formeln

Besteht eine Beschriftung aus einem mathematischen Ausdruck oder einer Formel, sollte diese nicht durch technische Maßnahmen überschrieben werden. Mathematische Zeichen werden von assistierenden Technologien teilweise unterschiedlich bezeichnet. Ein × (×)-Zeichen kann etwa als mal oder als Multiplikationszeichen bezeichnet sein. Um solchen unterschiedlichen Interpretationen gerecht zu werden, sollte der Name aus der Beschriftung bestehen. Auf diese Weise bleibt das gewohnte Verhalten der eigenen Spracheingabe am ehesten gewährleistet.

Es empfiehlt sich, das technisch jeweils angemessene Zeichen zu verwenden. Für Multiplikationen werden häufig ein * oder der Buchstabe x eingesetzt. Technisch angemessen ist jedoch das × (×)-Zeichen.

Platzhalter

Platzhalter sind als ungeeignetes Mittel zur technischen Beschriftung eines Eingabefelds eingestuft.

HTML5 | The placeholder attribute

Sollte der Platzhalter jedoch die alleinige visuelle Beschriftung darstellen, muss er wohl im Kontext dieses Erfolgskriteriums als Beschriftung herangezogen werden.

Satzzeichen und Großschreibung

Satzzeichen und Großbuchstaben aus der visuellen Beschriftung können in der Regel für den Namen ignoriert werden. Sie sind gewöhnlich nicht Teil der gesprochenen Sprache, die für eine Spracheingabe relevant ist.

Enthält beispielsweise die Beschriftung eines Eingabefelds einen :, kann dieser in einem expliziten Namen entfallen, (falls dieser überhaupt zweckmäßig ist).

Die Verwendung von Satzzeichen aus der visuellen Beschriftung im technischen Namen ist weder ein Fehler noch generell erforderlich. Im Zweifelsfall werden Satzzeichen oder die Großschreibung einfach aus der Beschriftung übernommen.

Alternativen für Zusatzinformationen

Da hinter Zusatzinformationen meist Überlegungen zur Nutzungsfreundlichkeit stehen, sollten auch folgende Möglichkeiten überlegt werden:

Präzisierung der Beschriftung

Lässt sich das Steuerelement so präzise formulieren, dass keine Zusatzinformation erforderlich ist?

aria-describedby

Lässt sich die Zusatzinformation mit dem aria-describedby-Attribut knapp und präzise referenzieren?

Mit diesem Attribut lassen sich ergänzend zur sichtbaren Beschriftung des Steuerelements etwa Überschriften, Anleitungen oder eine Gruppenbeschriftung für Screen Reader anhängen, ohne dass die Bedienung mittels Spracheingabe beeinträchtigt wird.

Verlinkung eines aussagekräftigen Textes

Ist ein aussagekräftiger Text als Beschriftung bereits im unmittelbaren Kontext vorhanden?

Es empfiehlt sich etwa, eine Abschnittsüberschrift selbst zu verlinken, statt den Abschnitt durch einem Link mit der Beschriftung mehr … abzuschließen.

Vermeiden von Textmüll

Es ist unnötig und störend, wenn vor der Beschriftung der Name durch Floskeln erweitert wird.

<a
  href="birnen.html" 
  aria-label="Mehr zu Birnen" >
  Birnen
<a/>

Zielgruppen

• Menschen, die auf eine Spracheingabe angewiesen sind, können präziser einzelne Steuerelemente fokussieren.
• Sehende Menschen, die ergänzend mit einer Sprachausgabe arbeiten, erfahren eine kongruente visuelle und auditive Wahrnehmung der Komponente. Dies können etwa Menschen mit Legasthenie sein.
• Allen wird die Verwirrung erspart, die aus einer potenziellen Fehlbedienung entsteht.

Testverfahren

Maschinelle Prüfung

Das Testtool Qualweb erkennt Fehler in Bezug auf das Erfolgskriterium 2.5.3. Die entsprechende Überschrift für Fehler lautet: VISIBLE LABEL IS PART OF ACCESSIBLE NAME ACT-R30 .

WAVE oder der W3C HTML Validator detektieren mit Stand August 2022 keine Fehler.

Testdatei: Validation von SC 2.5.3 Beschriftung im Namen

Steuerelemente gespickt mit Fehlern durch Abweichungen von Beschriftung und Namen.

Manuelle Prüfung

Ein manuelles Prüfverfahren ist äußerst mühsam:

1. Springe mit der Tab-Taste von einem Steuerelement zum nächsten.
2. Prüfe im Quellcode jeweils, ob die Beschriftung mit aria-label oder aria-labelledby überschrieben wird.
3. Prüfe, ob sich die Beschriftung ohne Texteinschübe im technisch verfügbaren Namen wiederfindet.

Es empfiehlt sich, den Quellcode auf einem anderen Rechner oder in einem anderen Browser parallel zu öffnen.

Prüfung durch betroffene Menschen (Peer Evaluation)

Menschen, die mit Screen Readern vertraut sind, können parallel den technisch verfügbaren Namen auch mit dieser assistierenden Technologie ermitteln.