Bewährte Praktiken

Unbenannte zugängliche Schaltflächen: der häufigste Fehler von Scannern

Schaltflächen mit Icons ohne zugänglichen Namen (Lupe, Warenkorb, Kreuz, Burger-Menü) sind der am häufigsten festgestellte Mangel bei Barrierefreiheitsanalysen. Für Nutzer eines Screenreaders ist nur ein „Button“ ohne Kontext hörbar. Erfahren Sie die vier Techniken zur Behebung.

Zahlen, Methodik und Nutzungsbedingungen: zitierbare Daten ansehen →

Die kurze Antwort

Ein SVG-Symbol-Button oder Bild ohne das Attribut aria-label, aria-labelledby oder sichtbaren Text bleibt für einen Screenreader unsichtbar. Der Nutzer hört lediglich „Button“. Zur Behebung: Fügen Sie aria-label für eine kurze Beschriftung hinzu, nutzen Sie sichtbaren Text, wenn der Platz es zulässt, oder aria-labelledby, um auf vorhandenen Text zu verweisen. Überprüfen Sie mit F12: Der Reiter „Accessibility“ muss den Namen des Buttons anzeigen.

Warum dieser Mangel kritisch ist

Schaltflächen ohne zugänglichen Namen zählen laut öffentlichen Daten von Compliance-Beratungsfirmen zu den häufigsten WCAG-Verstößen in den USA. Die entsprechende W3C-Regel („Image button has non-empty accessible name“) gilt überall: Eine Suchlupe, ein Warenkorb, ein Schließkreuz, ein Karussell-Pfeil oder ein Social-Media-Symbol, alle benötigen einen hörbaren Namen.

Dieser Artikel stützt sich auf die Studie Inclaria 2026: Von den 55 analysierten französischen E-Commerce-Websites wiesen 94,5 % mindestens einen kritischen oder schwerwiegenden Verstoß auf. Schlecht benannte Symbolschaltflächen führen die Liste der erfassten Vorkommnisse an, oft auf mehreren Seiten derselben Website.

Was ein Nutzer eines Screenreaders hört

Versetzen Sie sich in die Lage einer Person, die ohne Sicht auf den Bildschirm navigiert. Wenn sie auf eine Lupe-Schaltfläche ohne zugänglichen Namen stößt, gibt ihr Screenreader einfach „Schaltfläche“ aus, und stoppt dann. Kein Kontext, keine Handlungsanweisung. Sie muss den Screenreader verlassen, den Browser-Inspektor öffnen oder auf externe Dokumentation zurückgreifen, um zu verstehen, worum es sich handelt.

Dasselbe Szenario bei einem Warenkorb, der nur als SVG-Symbol dargestellt wird, einem Schließen-Kreuz für ein Modalfenster oder Pfeilen zur Navigation in einem Karussell. Jede stumme Schaltfläche schafft eine Zone der Unsicherheit für den Nutzer. Auf einer Website mit 15 oder 20 schlecht benannten Symbol-Schaltflächen summiert sich die Reibung schnell: Manche Nutzer brechen ab.

Die vier Techniken zur Benennung einer Schaltfläche

1. Sichtbarer Text mit ausgeblendeter Sichtbarkeit (sr-only)

Fügen Sie ein Span-Element mit der Klasse sr-only hinzu, das die Beschriftung enthält. Auf dem Bildschirm unsichtbar, für Screenreader hörbar.

Code

Schaltfläche mit einem SVG-Suchsymbol und einem Span-Element der Klasse „sr-only“ mit dem Text „Suchen“.

Vorteil: Der Text befindet sich auch im DOM und ist somit technisch von einer Suchmaschine erfassbar. Nachteil: Setzt voraus, dass eine CSS-Klasse sr-only in Ihrem Stylesheet definiert ist.

2. aria-label

Direktes Attribut am Button: aria-label=„Suchen“. Kurz, einfach und beeinflusst nicht das visuelle DOM.

Vorteil: Minimalistisch, schnell hinzuzufügen. Nachteil: Fehlt im sichtbaren Text, daher unsichtbar für Kopieren-Einfügen und Text-SEO.

3. aria-labelledby

Verknüpft die Schaltfläche mit einem anderen Textelement im DOM über eine ID: aria-labelledby=„search-label“. Ideal, wenn bereits ein relevanter Text auf der Seite existiert.

Vorteil: Bezieht sich auf tatsächlichen Inhalt, nachverfolgbar. Nachteil: Erfordert, dass der Quelltext existiert und über eine eindeutige ID verfügt.

4. Attribut alt bei input type=image

Wenn Sie ein Input-Element vom Typ image mit der Quelle „search.png“ und dem Alternativtext „Suchen“ verwenden, dient das alt-Attribut direkt als barrierefreier Name.

Vorteil: Native Semantik. Nachteil: Veraltete Lösung im modernen HTML, selten empfohlen.

Wann welche Technik verwenden? Entscheidungsmatrix

Häufige Fallstricke

Das title-Attribut reicht nicht aus

Viele Entwickler glauben fälschlicherweise, dass das title-Attribut mit title=„Suchen“ auf einer Schaltfläche ausreicht, um sie zu benennen. Tatsächlich ist title ein Tooltip-Attribut für den Mouseover-Effekt und kein zugänglicher Name. Screenreader ignorieren es, außer in sehr begrenzten Fällen. Verlassen Sie sich nicht darauf.

aria-label in fremder Sprache

Wenn Ihr Inhalt mehrere Sprachen mischt, beachten Sie: aria-label verwendet immer die Sprache der Seite. Ein aria-label=„Search“ auf einer französischen Website wird vom Screenreader auf Französisch vorgelesen. Bevorzugen Sie sichtbaren Text oder stellen Sie sicher, dass aria-label die lokale Sprache respektiert.

Die Falle 2.5.3: „Label in Name“

Eine subtile Falle: Wenn eine Schaltfläche sichtbaren Text hat (z. B. „OK“), muss ihr aria-label mit diesem Text beginnen oder ihn enthalten. Eine Schaltfläche mit dem sichtbaren Text „OK“ und aria-label=„Bestätigen“ erzeugt eine Inkonsistenz, die Sprachsteuerungsnutzer („Klicken Sie auf OK“) nicht auslösen können. Richten Sie den zugänglichen Namen am sichtbaren Text aus.

SVG ohne passende Rolle

Ein SVG allein ist nur ein Bild. Betten Sie es immer in ein semantisches Element (button, a) ein oder fügen Sie role=„button“ hinzu. Ohne dies kann der Screenreader es ignorieren oder als Bild ankündigen.

Wie Sie in zwei Minuten überprüfen

Öffnen Sie Ihre Seite in einem beliebigen modernen Browser (Chrome, Firefox, Safari).

• Drücken Sie F12 (oder Rechtsklick, dann „Untersuchen“).
• Suchen Sie die Schaltfläche mit dem Symbol im HTML-Code.
• Öffnen Sie den Reiter „Accessibility“ (Chrome, Edge, Firefox).
• Prüfen Sie das Feld „Accessible Name“: Es sollte einen klaren Text anzeigen (z. B. „Suche“, „Warenkorb“). Ist es leer oder zeigt es „button“ an, fehlt ein Name.

Alternativ: Navigieren Sie mit der Tastatur (Tab) zur Schaltfläche und testen Sie sie mit einem kostenlosen Screenreader.

Test mit Tastatur und Screenreader

Unter Windows ist NVDA (kostenlos, Open Source) zuverlässig. Auf dem Mac ist VoiceOver vorinstalliert (Cmd+F5). Durchlaufen Sie Ihre Website: Jede Symbol-Schaltfläche muss ihren Namen klar ansagen. Hören Sie nur „Schaltfläche“, korrigieren Sie dies.

Praktische Beispiele: Lupe, Warenkorb, Kreuz, Pfeile

Loupe de recherche

Eine Schaltfläche mit aria-label=„Suche“ und einem SVG-Symbol ist der Standardansatz. Kurz und klar. Wenn Sie versteckten Text verwenden: Nutzen Sie eine Schaltfläche mit dem SVG-Symbol und einem Span-Element der Klasse „sr-only“ mit dem Text „Suche“.

Panier d'achat

Bevorzugen Sie aria-label=„Warenkorb“ oder aria-label=„Warenkorb anzeigen (2 Artikel)“. Eine Artikelanzahl kann den Kontext bereichern, ohne die Ansage zu überladen.

Croix de fermeture

Eine Schaltfläche mit aria-label=„Schließen“ und einem SVG-Symbol für ein Kreuz ist klassisch. Einfacher Text, ohne Fachjargon.

Chevrons de carrousel

Schaltflächen mit aria-label=„Nächstes Element“ und aria-label=„Vorheriges Element“ führen den Nutzer. Vermeiden Sie generische Bezeichnungen wie „Weiter“ oder „Zurück“ allein; präzisieren Sie: „Vorherige Folie des Karussells“.

Icônes sociales

Ein Link mit aria-label=„Folgen Sie uns auf X (Twitter)“ oder eine Schaltfläche mit aria-label=„Auf LinkedIn teilen“ macht das Zielnetzwerk explizit.

Intégration dans votre démarche de conformité

Schaltflächen ohne zugänglichen Namen sind der häufigste Fehler, der von automatisierten Scans erkannt wird. Wenn Sie eine Barrierefreiheitsprüfung Ihrer Website durchführen, wird dieser Verstoß fast sicher auftauchen, oft mit Dutzenden von Vorkommen.

Die gute Nachricht: Er ist einfach und schnell zu beheben. Sobald Sie das Muster verstanden haben, können Sie Ihren Code überprüfen, die Symbol-Schaltflächen in wenigen Stunden korrigieren und die Auswirkungen messen: Ein bedeutender Teil Ihres Barrierefreiheits-Scores verbessert sich sofort.

Eine effektive Strategie: Führen Sie einen automatisierten Scan durch (Inclaria, aXe, WAVE), sortieren Sie die Ergebnisse nach Schweregrad und beginnen Sie mit den Schaltflächen ohne zugänglichen Namen. Allein dadurch werden bei vielen Websites eine erhebliche Anzahl kritischer Nicht-Konformitäten beseitigt. Anschließend können Sie mit manuellen Tests und strukturellen Mängeln (Tastaturnavigation, Tab-Reihenfolge, Kontraste) fortfahren.