WCAG 2.1, 2.5.3, A

Sichtbare Beschriftung im zugänglichen Namen

  • WCAG: 2.1
  • Stufe: A
  • Thema: Sprachsteuerung

Die für assistierende Technologien (z.B. Screenreader) zugänglich verfügbare Beschriftung eines Bedienelements muss gleich sein wie die visuell sichtbare Beschriftung, oder sie muss diese enthalten. Dies ermöglicht es Menschen, welche die Bedienelemente visuell sehen, aber z.B. über eine Sprachsteuerung mit ihnen interagieren, die intuitive Bedienung derselben.

Verstehen

Via Spracheingabe können Bedienelemente wie Links, Schalter, Checkboxen oder Eingabefelder gesteuert werden, indem die sichtbare Beschriftung gesprochen wird. Das funktioniert auch in der Verbindung mit Befehlen (z.B. «Klicke Anmelden»). Unterscheidet sich die visuell sichtbare Beschriftung aber von der zugänglichen Beschriftung, ist die Bedienung z.B. mittels Sprachsteuerung nicht oder nur auf Umwegen möglich.

Bei Bedienelementen mit Beschriftungen, die Text oder Bilder von Text enthalten, muss der zugängliche Name den sichtbaren Text enthalten. Manchmal wird versteckter Text benutzt, um sichtbare Beschriftungen zu erweitern, oft auch in der Absicht, Menschen mit Behinderungen zu helfen. Das ist zulässig, wenn die sichtbare Beschriftung an einem Stück im zugänglichen Namen enthalten ist, am besten zu Beginn.

Problematisch sind z.B. grafische Schalter mit visuell sichtbarem Label, bei denen die Textalternative nicht genau dem visuellen Label entspricht. Dadurch wird eine Sprachsteuerung verunmöglicht, weil das System in der Folge nicht auf das visuelle Label reagiert. Die sichtbare Beschriftung «AGB akzeptieren» einer Checkbox könnte z.B. im hinterlegten zugänglichen Namen durch «Allgemeine Geschäftsbedingungen annehmen» ersetzt werden. Wenn via Spracheingabe nun «Klicke AGB akzeptieren» diktiert wird, ist dieser Text so nicht im zugänglichen Namen enthalten und die Eingabe schlägt fehl.

Die zugängliche Beschriftung kann von der sichtbaren Beschriftung abweichen, wenn sie z.B. über nicht sichtbare Attribute festgelegt wird: alt-Attribute bei Grafiken, visuell versteckte (oder visuell nicht eindeutig zuweisbare) <label>-Elemente, Attribute wie aria-label und aria-labelledby (aria-describedby hingegen nicht), etc. Dabei ist zu beachten, dass sowohl aria-label als auch aria-labelledby ein ebenfalls vorhandenes HTML-Label überschreiben.

Verantwortlichkeiten

  • Das Entwicklungsteam stellt sicher, dass Bedienelemente, die fix programmiert werden, die Vorgaben erfüllen. Dabei muss die sichtbare Zeichenkette vollständig und genau in der zugänglichen Beschriftung enthalten sein. Zusätzliche Texte innerhalb dieser Zeichenketten sind unzulässig.
  • Die Inhaltsverantwortlichen verfassen Beschriftungen für von ihnen erstellte Bedienelemente (z.B. Anmelden-Schalter in einem Formular) so, dass die sichtbare Beschriftung vollständig und genau auch im Code enthalten ist. Bietet das CMS keine Option, separat zugängliche Beschriftungen zu erfassen, liegt die Verantwortlichkeit allein beim Entwicklungsteam.

WCAG-Text

Bei Elementen der Benutzeroberfläche, die Labels mit Text oder mit Bildern von Text enthalten, enthält das Label den Text, der visuell dargestellt wird.

Anmerkung: Eine bewährte Praxis ist es, den Text des Labels am Anfang des Namens zu haben.

Code-Beispiel

<!-- Problem: Einkaufswagen auf Bild entspricht nicht dem Alternativtext -->
<button>
  <img src="shopping-cart.png" alt="Bestellung abschicken">
</button>