Was es ist
Viele Buttons auf modernen Websites zeigen nur ein Symbol ohne sichtbaren Text – eine Lupe für die Suche, ein Hamburger-Symbol für das Menü, ein X, um ein Pop-up zu schließen. Ein sehender Besucher erkennt diese Symbole sofort aus Gewohnheit und Kontext, aber ein Screenreader hat nichts vorzulesen, wenn der Button nicht zusätzlich einen barrierefreien Text im Hintergrund trägt – typischerweise über ein aria-label-Attribut (zum Beispiel aria-label="Suchen"), das optisch nicht sichtbar ist, aber einem Screenreader angesagt wird.
Ohne das sagt ein Screenreader schlicht das allgemeine Wort „Button" an, ohne weitere Information – es gibt keinerlei Hinweis darauf, was ein Klick tatsächlich auslösen würde.
Warum es wichtig ist
Ein Symbol, das für einen sehenden Menschen visuell eindeutig ist, trägt für jemanden, der es nicht sehen kann, überhaupt keine Information – das Symbol selbst ist ohne Sehvermögen nicht von Natur aus bedeutungsvoll, nur das Konzept dahinter ist es, und dieses Konzept muss einem Screenreader-Nutzer auf andere Weise vermittelt werden. Eine Seite voller reiner Icon-Buttons, jeder nur als „Button, Button, Button" angesagt, lässt einen Screenreader-Nutzer ohne jede Möglichkeit zurück, herauszufinden, was die einzelnen Buttons tun, außer durch Raten und Ausprobieren.
Das ist ein weitverbreitetes und leicht zu übersehendes Problem, gerade weil reine Icon-Buttons ein gängiges, optisch cleanes Designmuster sind – die Lücke bei der Barrierefreiheit wird erst offensichtlich, wenn man tatsächlich mit einem Screenreader testet, statt die Seite nur anzusehen.
So behebst du es
- Identifiziere jeden Button auf deiner Website, der nur ein Symbol ohne sichtbaren Textlabel verwendet.
- Füge ein
aria-label-Attribut hinzu, das die Aktion des Buttons in wenigen Worten beschreibt, z. B.aria-label="Menü schließen"oderaria-label="Suchen". - Erwäge, wo möglich, zusätzlich einen kurzen sichtbaren Textlabel neben dem Symbol anzuzeigen – das hilft auch sehenden Besuchern und macht die Bedeutung von Symbolen weniger abhängig vom Erinnerungsvermögen.
- Nutzt du einen Website-Baukasten, prüfe, ob vom System erzeugte Icon-Buttons bereits standardmäßig barrierefreie Labels enthalten – manche tun das, andere verlangen, dass du ein Feld wie „barrierefreier Name" oder „Screenreader-Text" manuell ausfüllst.
- Teste mit einem kostenlosen Screenreader (NVDA, VoiceOver), indem du zu jedem Icon-Button tabst und prüfst, ob eine klare, konkrete Aktion angesagt wird statt nur „Button".