Eine Bezeichnung, die Hilfsmittel auslesen können
Der zugängliche Name bezeichnet ein Element für Hilfsmittel wie Screenreader und Sprachsteuerung. Ein Button mit dem Namen „Termin buchen“ lässt seine Aufgabe erkennen. Die Rolle „Button“ beschreibt dagegen die Art des Elements. Die WCAG-Anforderung zu Name, Rolle und Wert verlangt, dass Software diese Informationen bei Bedienelementen bestimmen kann.
Unterscheide drei Dinge: Die sichtbare Beschriftung steht auf der Seite. Der zugängliche Name ist die vom Browser ermittelte Bezeichnung. Eine zusätzliche Beschreibung ergänzt Hinweise, etwa ein erwartetes Eingabeformat. Sichtbare Beschriftung und Name stimmen bei gut aufgebautem HTML oft überein. Die W3C-Erklärung zu Namen und Beschreibungen erläutert die Unterschiede.
Buttons und Links beschriften
Nutze für einen Button möglichst einen verständlichen sichtbaren Text. Bei einem Link beschreibt der Text das Ziel. Die folgenden erfundenen Beispiele zeigen zwei einfache Beschriftungen:
<button type="submit">Terminanfrage senden</button>
<a href="/appointments">Freie Termine ansehen</a>
Hier liefert der Text im Element den Namen. Ein zusätzliches aria-label ist dafür unnötig. Bei einem reinen Symbolbutton kannst du den Namen mit aria-label angeben. Das W3C beschreibt diese Technik für Elemente ohne sichtbare Textbeschriftung.
Beispiel für den Schließen-Button eines Dialogs:
<button type="button" aria-label="Dialog schließen">
<span aria-hidden="true">×</span>
</button>
Das Symbol gehört hier zur Darstellung; der Name erklärt die Handlung. aria-label kann einen vorhandenen Namen überschreiben. aria-labelledby verweist stattdessen auf den Text anderer Elemente über deren id und hat bei gültiger Verwendung Vorrang. Ergänze solche ARIA-Attribute gezielt und kontrolliere das Ergebnis. Die W3C-Technik zu aria-label beschreibt auch dieses Überschreiben.
Hat ein Bedienelement eine sichtbare Textbeschriftung, muss der zugängliche Name diesen Text enthalten. Das verlangt WCAG 2.5.3 „Label in Name“. Beispiel: Steht auf einem Button „Termin buchen“, würde aria-label="Anfrage absenden" die Sprachbedienung erschweren. Wer „Termin buchen“ sagt, muss sich auf die sichtbare Beschriftung verlassen können. Am einfachsten bleibt der Name mit ihr identisch; nötige Ergänzungen stehen vorzugsweise danach.
Bilder und Grafikrollen benennen
Bei einem informativen HTML-Bild liefert üblicherweise das alt-Attribut den Namen. Beschreibe die Information, die das Bild an dieser Stelle vermittelt. Rein dekorative Bilder erhalten alt="". Ist ein Bild der einzige Inhalt eines Links, muss sein Alternativtext den Linkzweck erklären. Der Artikel zu Alt-Texten und das W3C-Bildertutorial zeigen die Unterschiede.
Auch eine mit role="img" ausgezeichnete Grafik braucht einen Namen. Ihr Inhalt wird für Hilfsmittel als gemeinsame Grafik behandelt. Das folgende erfundene Beispiel fasst eine Bewertung aus Sternsymbolen zusammen:
<span role="img" aria-label="Bewertung: 4 von 5 Sternen">
★★★★☆
</span>
Der Name nennt die Aussage der Symbole. Für ein komplexes Diagramm können weitere Erklärungen im Seitentext nötig sein. Die WAI-ARIA-Definition der Grafikrolle beschreibt ihre Benennung und die Behandlung ihrer Inhalte.
Eingebettete Inhalte und zusätzliche Hinweise
Ein iframe bindet eine andere Seite ein, etwa eine Karte oder einen Videoplayer. Gib ihm einen aussagekräftigen title, damit Nutzer den eingebetteten Bereich zuordnen können. Beispiel:
<iframe src="/map" title="Anfahrtskarte zur Praxis"></iframe>
Dieser Titel benennt den Rahmen. Die eingebettete Seite braucht weiterhin eigene zugängliche Inhalte und Bedienelemente. Das name-Attribut des iframe ersetzt den Titel nicht. Die W3C-Technik H64 erläutert diese Trennung.
Zusätzliche Hinweise lassen sich mit aria-describedby einem Element zuordnen. Bei einem Formularfeld könnte „Geburtsdatum“ der Name und „Bitte im Format TT.MM.JJJJ eingeben“ die Beschreibung sein. Die Beschreibung ergänzt den Namen; sie ersetzt ihn nicht. Wie du beides mit sichtbaren Texten verbindest, zeigt der Artikel zur Formularbeschriftung.
Einen Befund auf deiner Seite prüfen
ClariSEO sucht im Quelltext unter anderem nach fehlenden Namen an Buttons, Links, Grafikrollen und eingebetteten Rahmen. Diese statische Prüfung bildet die Namensberechnung eines Browsers vereinfacht ab. Ein vorhandener Text genügt außerdem nicht, um seine Verständlichkeit zu beurteilen.
Öffne deshalb die gemeldete Stelle im Browser und prüfe in dessen Barrierefreiheitsansicht den berechneten Namen. Vergleiche ihn mit der sichtbaren Beschriftung und teste die Funktion mit einem Screenreader. Achte dabei auf den konkreten Zustand: Nach dem Öffnen eines Menüs kann beispielsweise eine andere Beschriftung nötig sein. Den Umfang der automatisierten Prüfungen beschreibt der Barrierefreiheit-Check.