Warum Schaltflächen einen Namen brauchen

So funktioniert es

Schaltflächen, im Code button, lösen etwas auf der Seite aus: das Menü öffnen, ein Formular absenden, einen Dialog schließen, ein Bild weiterblättern. Ein Screenreader sagt sie mit ihrer Rolle und ihrem Namen an, etwa „Menü, Schalter“.

Der Name kommt aus dem Text im Button. Viele Buttons zeigen aber nur ein Symbol: drei Striche für das Menü, eine Lupe, ein X. Sehende erkennen das Symbol, im Code steht kein Text. Dann sagt der Screenreader nur „Schalter“, und Sprachsteuerung kann den Button nicht ansprechen.

WCAG 2.2 verlangt in Kriterium 4.1.2, dass jedes Bedienelement einen Namen und eine Rolle hat, die Hilfsmittel auslesen können.

Worauf es ankommt

• Ein Name für jeden Button. Ohne sichtbaren Text gibt ihm aria-label einen Namen; das Symbol bekommt aria-hidden="true", damit es nicht doppelt vorgelesen wird:

<button type="button" aria-label="Menü öffnen" aria-expanded="false">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

• Der Name sagt, was passiert. „Suche starten“, „Dialog schließen“, „Nächstes Bild“, nicht „Icon“ oder „Button“.
• Sichtbarer Text ist im Namen enthalten. Hat der Button Text, reicht der; ein abweichendes aria-label würde ihn überschreiben, und Sprachsteuerung fände den Button unter seinem sichtbaren Namen nicht mehr (Kriterium 2.5.3).
• Echte Buttons statt Nachbauten. Ein div mit Klick-Funktion ist für Tastatur und Screenreader kein Button. Mit role="button" braucht er zusätzlich tabindex="0" und Bedienung per Enter und Leertaste. Das button-Element bringt das alles mit.
• Eingabe-Buttons. Bei <input type="submit"> oder type="button" steht der Name im Attribut value.

So richtest du es ein

Icon-Buttons stecken fast immer im Theme, im Seitenbaukasten oder in Plugins: Menü-Button, Suche, Warenkorb, Slider-Pfeile, das X von Popups und Cookie-Bannern. Den Namen ergänzt, wer das Theme pflegt, oder der Anbieter des Plugins; viele Baukästen haben dafür ein Feld „ARIA-Label“ in den erweiterten Einstellungen des Elements. Der Report nennt die betroffenen Buttons mit ihrem Code, damit du sie im Theme findest.