Buttons barrierefrei beschriften: aria-label für Symbol-Knöpfe

Warum das wichtig ist

Die typischen Kandidaten kennst du von fast jeder Seite: das Hamburger-Menü auf dem Handy, die Lupe neben dem Suchfeld, das Kreuz am Pop-up, die Pfeile am Bilder-Slider. Für sehende Besucher sind die Symbole klar. Ein Screenreader findet darin keinen Text und sagt "Schalter". Kommen vier solche Knöpfe hintereinander, weiß niemand mehr, welcher was tut.

Besonders ärgerlich ist es beim Menü-Knopf. Ist er unbeschriftet, finden blinde Besucher auf dem Smartphone womöglich gar nicht in die Navigation. Beim Cookie-Banner kann ein namenloses Kreuz bedeuten, dass jemand nicht erkennt, wie er den Banner schließt.

In den WCAG fällt das unter Erfolgskriterium 4.1.2 Name, Rolle, Wert, Stufe A. Jedes Bedienelement braucht einen Namen, den Hilfsmittel auslesen können.

So prüfst du es selbst

Geh mit der Tab-Taste durch deine Seite und lass dabei NVDA oder VoiceOver laufen. Bei jedem Knopf sollte eine verständliche Ansage kommen. Ohne Screenreader zeigen dir die Entwicklertools im Bereich für Barrierefreiheit den berechneten Namen eines Elements, axe DevTools und WAVE melden namenlose Buttons automatisch.

checkfrei sucht <button>-Elemente ohne Text, aria-label oder title. Ein solcher Knopf gibt eine Warnung, ab drei ist es ein Fehler. Eine Grenze hat die Prüfung: Baut eine Seite Knöpfe aus <div>- oder <span>-Elementen mit Klick-Skript, erkennen wir sie nicht als Button. Solche Konstrukte sind ein eigenes Problem, weil sie sich oft gar nicht per Tastatur bedienen lassen. Den kostenlosen Check startest du auf der Startseite.

So behebst du es

Zuverlässig funktioniert entweder ein aria-label am Button oder ein Text, der nur optisch versteckt ist. Das Symbol selbst bekommt aria-hidden="true", damit es nicht zusätzlich angesagt wird. Ein title zählt zwar auch als Name, ist aber die schwächste Lösung: Der Tooltip erscheint nur mit der Maus, und Screenreader behandeln ihn uneinheitlich.

<!-- Menü-Knopf mit aria-label und Zustand -->
<button type="button" aria-label="Menü" aria-expanded="false" aria-controls="hauptmenue">
  <svg aria-hidden="true" focusable="false" width="24" height="24">...</svg>
</button>

<!-- Alternative: versteckter Text neben dem Symbol -->
<button type="submit">
  <i class="fa fa-search" aria-hidden="true"></i>
  <span class="visually-hidden">Suchen</span>
</button>

import { Menu } from 'lucide-react';

export function MenueKnopf({ offen, umschalten }: { offen: boolean; umschalten: () => void }) {
  return (
    <button type="button" aria-label="Menü" aria-expanded={offen} onClick={umschalten}>
      <Menu aria-hidden="true" />
    </button>
  );
}

Typische Fehler

• ·Ein aria-label, das dem sichtbaren Text widerspricht. Steht auf dem Knopf "Senden", sollte der Name nicht "Formular abschicken" lauten. Wer per Sprache steuert, sagt "Senden klicken", und nichts passiert.
• ·Englische Namen auf deutschen Seiten, weil der Code aus einer Vorlage stammt, etwa aria-label="Toggle navigation".
• ·Symbole, die per CSS als Hintergrundbild eingebunden sind, ohne Text im Button. Für den Screenreader ist der Knopf dann leer.