Ob Herzchen oder Daumen hoch, ob in sozialen Netzwerken oder modernen Webanwendungen – jeder kennt ihn. Den Like-Button. Oft genug kein Text, kein Tooltip, nur ein Symbol. Auf den ersten Blick ist völlig klar, was dieser Button tut. Zumindest für jemanden, der den Bildschirm sehen kann.
Doch was passiert, wenn ein Nutzer den Button nicht sehen kann und sich per Screenreader durch die Seite bewegt? Wird dann „Gefällt mir“ vorgelesen? Oder lediglich „Button“ – ohne weiteren Hinweis?
Icon Buttons ohne sichtbaren Text sind ein beliebtes Gestaltungsmittel. Sie sparen Platz, wirken aufgeräumt und erfüllen ihren Zweck in vielen Fällen gut – vorausgesetzt, sie sind auch mit dem Screenreader nutzbar.
Diese Woche schauen wir uns an, wie man Icon Buttons richtig beschriftet und mit Techniken wie aria-label oder aria-labelledby so umsetzt, dass sie auch für Screenreader zugänglich sind. Und dabei gibt es weit mehr als eine richtige Lösung. Werfen wir also mal einen Blick auf alle Varianten zugänglicher Icons.
Ausgangssituation – Icon + Text
Die einfachste und zugleich zugänglichste Variante eines Icon Buttons ist die Kombination aus Symbol und sichtbarem Text. Zum Beispiel:
<button>
<svg aria-hidden="true">...</svg>
Ich mag Barrierefreiheit
</button>
In diesem Fall ist kein Alternativtext für das Icon notwendig. Der Text „Gefällt mir“ wird sowohl angezeigt als auch von Screenreadern korrekt vorgelesen. Das Icon dient rein der visuellen Unterstützung und wird dank aria-hidden="true" vom Screenreader ignoriert.
Diese Lösung ist absolut barrierefrei und in der Regel die beste Wahl, wenn der Platz dafür vorhanden ist. Denn Nutzer müssen die Bedeutung des Symbols nicht erst erlernen.
Doch in der Praxis wird der Text oft eingespart. Aus ästhetischen Gründen, wegen begrenztem Platz oder weil das Icon vermeintlich „für sich spricht“. Genau hier beginnt das Problem: Ohne sichtbare Beschriftung muss der Button anderweitig zugänglich gemacht werden.
Wie das geht, zeigen die folgenden Varianten.
Variante 1 – aria-label verwenden
Wenn Sie einen Icon Button nur mit dem Symbol anzeigen und keinen sichtbaren Text haben, ist das Attribut aria-label der einfachste Weg, den Button für Screenreader richtig zu beschriften.
Beispiel:
<button aria-label="Ich mag Barrierefreiheit">
<svg aria-hidden="true">...</svg>
</button>
Hier sorgt aria-label="Ich mag Barrierefreiheit" dafür, dass Screenreader-Nutzer genau hören, welche Funktion der Button hat, obwohl kein Text sichtbar ist. Gleichzeitig wird das Icon über aria-hidden="true" ausgeblendet, damit es nicht doppelt vorgelesen wird.
Vorteile von aria-label:
- Einfach zu implementieren
- Kein zusätzlicher sichtbarer Text notwendig
- Klare, eindeutige Beschriftung für Screenreader
- Funktioniert mit allen Icon-Typen (SVG, Font-Icons etc.)
Was Sie beachten sollten
Das aria-label überschreibt den gesamten sichtbaren Inhalt des Buttons als zugänglichen Namen. Das heißt: Screenreader lesen nur das Label und ignorieren den visuellen Text oder das Icon. Deshalb muss sichergestellt werden, dass das aria-label genau beschreibt, was der Button tut – und dass es zur visuellen Darstellung passt.
Außerdem gilt das WCAG-Kriterium 2.5.3 Label in Name (Level A), das verlangt, dass der sichtbare Name Teil des zugänglichen namens ist. Eingebürgert hat sich, dass mit dem sichtbaren text begonnen wird. Haben Sie also typische „Mehr Lesen“-Links, dann sollte das aria-label „Mehr lesen über digitale Barrierefreiheit“ lauten.
Variante 2 – aria-labelledby
Statt ein aria-label direkt im Button zu setzen, kann man auch ein separates Element als Referenz für die Beschriftung verwenden. Dazu wird dem Button ein aria-labelledby-Attribut zugewiesen, das auf die ID eines anderen Elementes im DOM verweist, zum Beispiel ein verstecktes <span>.
Das sieht so aus:
<span id="button-label" hidden>Ich mag Barrierefreiheit</span>
<button aria-labelledby="button-label">
<svg aria-hidden="true">...</svg>
</button>
Der Screenreader liest in diesem Fall den Text des verlinkten Elements vor – „Ich mag Barrierefreiheit“ – obwohl der Button selbst keinen sichtbaren Text enthält. Doch ist das Element nicht eigentlich ausgeblendet? Richtig, das Attribut hidden blendet das Element sowohl visuell als auch semantisch im Layout aus – es ist also weder sichtbar noch mit der Tastatur fokussierbar noch wird es von Screenreadern vorgelesen. Trotzdem wird der Inhalt von Screenreadern verwendet, wenn ein anderes Element explizit per aria-labelledby darauf verweist.
Lesen Sie hier mehr über das Ausblenden von Elementen.
In diesem Fall liest der Screenreader „Ich mag Barrierefreiheit, Button“ vor, obwohl der Text im HTML-Quellcode versteckt ist.
Das Icon selbst wird auch hier mit aria-hidden ausgeblendet, damit es nicht separat vorgelesen wird.
Vorteile dieser Methode:
- Die Beschriftung kann außerhalb des Buttons gepflegt werden
- Praktisch bei wiederverwendbaren Komponenten oder komplexen UIs
Was Sie beachten sollten
Selbstverständlich gilt: Das referenzierte Element muss im DOM vorhanden sein. Gerade, wenn Label und Button nicht direkt miteinander ausgeleifert werden besteht im Laufe der Zeit die Gefahr, dass das Label-Element vergessen wird. Diese Methode bietet also ein größeres Risiko für Fehler.
Variante 3 – Visuell versteckter Text im Button
Eine weitere bewährte Methode, um Icon Buttons richtig zu beschriften, ist das Einfügen eines visuell versteckten Textes direkt im Button. Das bedeutet: Der Text wird Screenreadern bereitgestellt, ist im Browser aber nicht sichtbar.
Beispiel:
<button>
<svg aria-hidden="true" focusable="false">...</svg>
<span class="sr-only">Ich mag Barrierefreiheit</span>
</button>
Die Klasse .sr-only (oder auch .visually-hidden) sorgt dafür, dass der Text „Ich mag Barrierefreiheit“ nicht im Layout erscheint, aber für Screenreader vorhanden bleibt, wenn sie richtig definiert ist. In den meisten CSS-Frameworks gibt es dafür Vorlagen.
Vorteile dieser Methode:
- Kein ARIA-Attribut nötig, das den Inhalt ersetzt, eventuell sichtbarer Text wird durch unsichtbaren Text ergänzt
- Das Label ist im DOM enthalten und bleibt konsistent
- Keine Gefahr, dass sichtbarer Text und ARIA-Label auseinanderlaufen
Was Sie beachten sollten
Verstecken ist nicht verstecken. Blenden Sie den Text mit display: none aus, kann er auch von Screenreadern nicht gelesen werden.
Ein korrektes CSS für sr-only-Klassen habe ich schon im Artikel über das Ausblenden von Elementen erwähnt.
Variante 4 – aria-label und aria-labelledby am Icon selbst
Bisher haben wir immer den Button beschriftet, nie das Icon selbst. Dabei würde es auch funktionieren, aria-label und aria-labelledby am SVG, Bild oder jedem anderen Element innerhalb des Buttons zu definieren. Solang der Button selbst keine eigenen Werte festlegt, wird der Name der Kinder übernommen. WIchtig ist allerdings, dass das Icon dann nicht mit aria-hidden ausgeblendet wird.
Aber ist diese Methode sinnvoll?
Wenn wir über die Bedeutung der Beschriftung nachdenken, dann soll sie beschreiben, was der Button tut. Sie soll nicht das Icon beschreiben. Das Icon eines Einkaufwagens kann auf einer Produktdetailseite für „Produkt in den Warenkorb legen“ stehen, im Seitenkopf dagegen für „Warenkorb öffnen“. Unterschiedliche Beschriftungen an die Icons zu setzen ist technisch natürlich möglich. Logisch ist es aber sinnvoller diese an dem Element zu definieren, dass sich wirklich unterscheidet – den Button.
Was passiert, wenn mehrere Varianten kombiniert werden?
Gerade bei komplexeren Komponenten oder in größeren Projekten kann es vorkommen, dass verschiedene Techniken gleichzeitig angewendet werden. Ein Button hat z. B. einen aria-label, einen versteckten Text, eine Referenz per aria-labelledby und zusätzlich noch einen title.
Doch: Screenreader nutzen immer nur eine dieser Beschriftungen. Und zwar nach einer klar definierten Reihenfolge, die in der Spezifikation für den „Accessible Name Computation“ festgelegt ist (W3C AccName).
Die Reihenfolge, in der Screenreader den zugänglichen Namen eines Elements ermitteln, ist:
aria-labelledbyaria-label<label>(bei Formularfeldern)- Textinhalt des Elements (z. B.
.sr-onlyaber natürlich auch jeder sichtbare Text) title-Attribut
Sobald ein Kriterium erfüllt ist, wird nur dieser Wert verwendet – alles weitere wird ignoriert.
Beispiel:
<button
aria-labelledby="button-label"
aria-label="Ich mag Barrierefreiheit richtig doll"
>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Ich mag Barrierefreiheit ein bisschen mehr</span>
</button>
<span id="button-label" hidden>Ich liebe Barrierefreiheit</span>Gelesen wird: „Ich liebe Barrierefreiheit“ (aus aria-labelledby)
Überprüfen lässt sich das sehr einfach in Google Chrome. Öffnen Sie die Entwicklertools, wählen Ihr gewünschtes Element aus und wechseln dann in den Reiter „Accessibility“ oder „Zugänglichkeit“.
Unter den berechneten Properties findet man dann eine Liste der Attribute und welchen Einfluss diese auf den Namen haben.
Auch wenn mehrere Beschriftungen nicht schaden, vermeiden Sie es, am Besten trotzdem. Das verbessert die Wartbarkeit und reduziert die Gefahr widersprüchlicher oder veralteter Texte.
Fazit – gut benannt ist halb gewonnen
Ob Herzchen, Stern oder Daumen hoch: Icon Buttons sind aus modernen Webanwendungen nicht wegzudenken. Doch wer sie ohne sichtbaren Text einsetzt,ist verantwortlich dafür, eine zugängliche Beschriftung bereitzustellen.
Es gibt mehrere technisch valide Wege, einen Icon-Button barrierefrei umzusetzen:aria-label, aria-labelledby, visuell versteckter Text oder eine Kombination daraus. Wichtig ist dabei nicht nur die Technik, sondern auch der tatsächliche Text, der hinterlegt wird. Helfen Sie Ihren Nutzern, indem sie den Zweck des Buttons und nicht aus Aussehen des Icons beschreiben.
Die beste Lösung ist immer die, die zur Anwendung passt – und getestet wurde. Wer Icon-Buttons richtig beschriftet, macht digitale Angebote für mehr Menschen zugänglich. Und das mit vergleichsweise wenig Aufwand.
Mehr Informationen zum Thema Alternativtexte für Medien: