Namen und Beschriftungen

Der Name oder die Beschriftung eines Elements kann auf verschiedene Arten angegeben werden, je nachdem, um was für ein Element es sich handelt. Man kann Elemente auf verschiedene Arten benennen, mit HTML oder ARIA.

Verknüpfungen

Der Name eines Links steht im Linktext. Ein Link mit der Aufschrift “Kontaktieren Sie uns” heißt “Kontaktieren Sie uns”. Wenn ein Link nur ein Bild enthält, ist der Alt-Text des Bildes der Linkname. Wenn ein Link ein Bild und Text enthält, wird der Name des Links aus dem Alt-Text des Bildes und dem Text im Link gebildet.

Überschriften und Button-Tags

Das gilt auch für Überschriften und Schaltflächen. Eine Überschrift oder ein Schaltflächen-Tag besteht aus dem Text und/oder den Bildern. Sie bekommen den Namen für diese Art von Elementen kostenlos, indem Sie Text einfügen.

Formular-Elemente

Bei Formularelementen ist das anders. Sie bekommen den Namen nicht umsonst, indem Sie Text neben dem Formularsteuerelement hinzufügen. Sie müssen den Text mit dem Formularelement verknüpfen, indem Sie das “label”-Tag verwenden.

Der Name wird nicht über die ID, sondern über den Text im label-Tag festgelegt. Die ID ist nur für die Verknüpfung da und unsichtbar.

Verwendung von ARIA, um über native Namen hinauszugehen

ARIA bietet Ihnen weitere Möglichkeiten, Namen oder Labels zu Elementen hinzuzufügen. Diese werden mit “aria-label” und “aria-label” bezeichnet.

Sie können bei einem Bild anstelle von “smiley face” “aria-labelledby” hinzufügen. Das ist dasselbe. Aber verwenden Sie immer zuerst die native Methode. In diesem Fall also den Alt-Text für ein Bild. Und nicht die ARIA-Methode, wann immer dies möglich ist.

aria-labelledby vs. aria-label

aria-labelledby ist ein Element, das auf ein anderes Element auf der Seite verweist. Statt das caption-Element zu verwenden, könnte man in einer Tabelle aria-labelledby nutzen und auf die ID eines Textes über oder unter der Tabelle verweisen. So bekommt die Tabelle einen Namen, wie das Caption-Tag auch. In diesem Fall ist aria-labelledby genauso wie das Caption-Tag.

Sie müssen weder den Namen noch den Text in das “aria-labelledby”-Attribut eintragen. Wenn Sie also zum Beispiel “aria-label” verwenden, würde der Browser nach Elementen mit den IDs “smiley” und “face” suchen. Diese würden dann als Beschriftung für Ihr Element verwendet werden. Der Browser interpretiert nämlich “smiley” und “face” als zwei separate IDs, die durch ein Leerzeichen getrennt sind. Screenreader lesen den Text von “aria-label” direkt, aber den Text anderer Elemente, die durch “aria-labelledby” referenziert werden, indirekt. “aria-labelledby” wird anders gehandhabt.

Sie können mehrere Textabschnitte für eine Beschriftung verwenden, die sich in verschiedenen Teilen des Bildschirms befinden. Das ist praktisch, wenn sich ein Element in einem Raster oder einer tabellenähnlichen Struktur befindet und Sie auf zwei oder mehr Textteile verweisen müssen, zum Beispiel eine Spaltenüberschrift und eine Zeilenüberschrift, um den Namen des Elements abzuleiten. Sie können eine, zwei, drei oder mehr ID-Referenzen haben. Je mehr, desto länger das Label. Das kann verwirrend sein.

Das “aria-label”-Attribut ist versteckt, während der Text, der durch “aria-labelledby” referenziert wird, sichtbar ist. Sie können das ändern, aber nur mit CSS. Das ist ein großer Unterschied. Screenreader-Benutzer hören das “aria-label”, aber sehende Benutzer sehen es nicht. “aria-labelledby” wird dagegen von Screenreadern und sehenden Benutzern wahrgenommen.

Die Berechnung des barrierefreien Namens

Was passiert, wenn man mehrere Methoden benutzt, um einem Element einen Namen zu geben? Was ist, wenn das Bild einen Alternativtext hat? Was ist, wenn ein Formularelement ein Label-Tag hat? Vielleicht sogar mit Textwert oder Platzhalter? Das sind gute Fragen. Es gibt bereits eine Lösung für dieses Problem. Sie heißt “Logik in der Veröffentlichung” und berechnet zugängliche Namen und Beschreibungen.

Hier wird es etwas kompliziert, aber hier ist der Kern der Sache.

• Es gibt nur einen Namen, der Elementbezeichnung wird. aria-labelledby ist der beste Name. Wenn Sie mehrere Namensgebungsverfahren haben, wird aria-labelledby immer zuerst behandelt.

• Als nächstes kommt aria-label. Das ist die HTML-Methode, zum Beispiel der Alt-Text eines Bildes oder der Text in einem Label-Element.

• Als nächstes kommt das title-Attribut. Ich empfehle das nicht, um einem Element einen Namen zu geben. Du kannst es also ignorieren.

In diesem Beispiel haben wir Text in jeder einzelnen der Möglichkeiten. Aria-labelledby hat Vorrang. Nutzer von Bildschirmlesegeräten hören deshalb “Grafik, Giraffe”. Sie hören dann auch, dass in der Beschreibung “Krokodil” steht, was falsch ist. Aber das ist der Name, der angezeigt wird, wenn der Algorithmus so eingestellt ist.

In meiner Erklärung hier habe ich die Dinge etwas vereinfacht, aber das sind die wichtigsten Punkte. Wenn Sie Zweifel haben, können Sie die Elemente in den berechneten Eigenschaften des Barrierefreiheitsbaums von Chrome überprüfen. Wenn Sie einige Methoden durchgestrichen sehen, bedeutet dies, dass diese Methoden den Namenskampf verloren haben. Nur die nicht durchgestrichene Methode gewinnt.

Sie können einem Element, das keine Bedeutung hat, keinen barrierefreien Namen hinzufügen. Ein “div” mit dem Attribut “aria-label” wird nicht funktionieren. Ein div hat keine Bedeutung, deshalb kann es keinen Namen haben. Das gilt auch für das span-Element. Wenn Sie einem Span einen Text hinzufügen möchten, müssen Sie ihm zuerst eine Rolle zuweisen, zum Beispiel “img” für ein Bild, und dann einen Wert zuweisen. Der Screenreader sagt dann “Grafik, Smiley”. Screenreader sagen nichts, wenn man die Rolle weglässt.