Name ist Pflicht veröffentlicht in 2013

Beschriftungen nur für Screenreader

Die Beschriftung von Steuerelementen sollte mit sichtbarem Text erfolgen, wenn die Formulare barrierefrei sein sollen. Es gibt jedoch Situationen, wo sichtbarer Text nicht berücksichtigt werden kann oder soll. Wenn ein title-Attribut ebenfalls nicht in Frage kommt, bleiben noch einige weitere Möglichkeiten, Steuerelemente zu beschriften, um vor allem Screenreader-Nutzer die Identifizierung der Steuerelemente zu erlauben:

• Unsichtbare LABEL-Elemente
• WAI-ARIA-Attribute

Beide Techniken sind grundsätzlich in einem Screenreader zugänglich. Für andere Nutzer bleibt die Frage offen, ob die fehlende Beschriftung ein Hindernis darstellt oder nicht. In jedem Fall sollten diese Techniken nur dann eingesetzt werden, wenn weder eine sichtbare Beschriftung noch title-Attribut für ein Steuerelement vorhanden sind.

Beschriftungen mit unsichtbaren LABEL-Elementen

Wenn eine Suchfunktion lediglich aus einem Eingabefeld und einer Lupe als Schaltfläche besteht, so verfügt sie weder über eine Beschriftung noch einer Anweisung. In diesem Fall ist weder das Eingabefeld noch die Schaltfläche im Sinne der Web Content Accessibility Guidelines (WCAG) 2.0 beschriftet. Die Schaltfläche kann mit einem Alternativtext versehen werden, aber es fehlt hier dennoch an visuell erkennbarem Text.

Eine Möglichkeit, das Eingabefeld zumindest für Screenreader-Nutzer zugänglich zu machen, ist, eine Beschriftung mit unsichtbarem Text vorzunehmen. Wenn ein LABEL-Element nicht sichtbar sein soll, dann kann es aus dem sichtbaren Bereich des Bildschirms geschoben werden:

Welche CSS-Angaben für die Klasse "unsichtbar" verwendet werden können, damit die Beschriftung für Screenreader zugänglich, aber ansonsten unsichtbar ist, können Sie dem Beitrag Nur für Screenreader und Tastaturnutzer zugänglich entnehmen

Beschriftungen mit WAI-ARIA

Steuerelemente können auch mit WAI-ARIA-Attributen beschriftet werden:

• aria-label funktioniert im Prinzip wie das title-Attribut, aber es gibt keinen Tooltip, wenn der Mauszeiger über das Element gehalten wird.

  <input aria-label="Suchbegriffe eingeben" name="suche" type="text" />

• aria-labelledby und aria-describedby können die IDs der einzelnen Beschriftungen referenzieren. Da in dem Beispiel ein zu referenzierender Text eingefügt werden müsste, kann der zusätzliche Text gleich als unsichtbares LABEL-Element ausgezeichnet werden und eine Verknüpfung mit WAI-ARIA-Attributen ist nicht nötig.

Hinweis: WAI-ARIA wird zwar von einigen Screenreadern unterstützt, aber nicht von allen und auch nicht vollständig. Es ist also Vorsicht geboten! Von den drei Attributen funktioniert derzeit aria-describedby noch am besten.