Icon-Button: So geben Sie ihm einen Namen
Also called: Symbol-Schaltfläche, Reiner Icon-Button, Icon-Schaltfläche
Definition
Ein Icon-Button ist eine Schaltfläche, die nur ein Symbol zeigt – Lupe, Kreuz, drei Striche – und keinen sichtbaren Text. Barrierefrei ist er erst mit einem zugänglichen Namen im Code, der Hilfstechnologien sagt, was er bewirkt.
Ein Icon-Button ist eine Schaltfläche, die statt eines Wortes ein Symbol zeigt: die Lupe für die Suche, das „ד zum Schließen eines Dialogs, das Herz für die Merkliste. Das spart Platz – doch das Symbol sieht ein Screenreader nicht. Jede Symbol-Schaltfläche braucht deshalb einen Namen im Code, der ihre Funktion beschreibt.
Was es bedeutet
WCAG 4.1.2 Name, Rolle, Wert ist ein Kriterium der Stufe A in WCAG 2.2. Name und Rolle jedes Bedienelements müssen programmatisch ermittelbar sein. Ein natives <button> liefert die Rolle mit, den Namen müssen Sie selbst vergeben – ein Icon allein reicht nicht. Fehlt er, melden Prüftools einen leeren Button. Das W3C führt diesen Fall als Fehler F68: ein Bedienelement ohne programmatisch ermittelten Namen.
Das W3C unterscheidet dabei zwei Begriffe. Die Beschriftung (Label) sehen alle, der Name ist das, was Software ausliest – er darf unsichtbar sein. Icon-Schaltflächen sind der typische Fall: Name ja, sichtbare Beschriftung nein. Ein einziges Attribut entscheidet also, ob derselbe Button besteht oder durchfällt.
Vier Wege führen zuverlässig zum Namen:
| Technik | Code | Geeignet für |
|---|---|---|
aria-label (ARIA14) |
<button aria-label="Suchen"> |
Die meisten Icon-Buttons |
| Visuell versteckter Text | Text mit sr-only-Klasse im Button |
Texte, die mitübersetzt werden sollen |
aria-labelledby (ARIA16) |
verweist auf die id eines sichtbaren Textes |
Buttons neben vorhandener Überschrift oder Beschriftung |
| Bild mit Alternativtext | <img src="lupe.svg" alt="Suchen"> |
Buttons mit einem <img> |
Wer per Sprachsteuerung arbeitet, sagt, was er sieht: „Klick auf Suchen“. Wählen Sie daher Namen, die der üblichen Bedeutung des Symbols entsprechen. Ein Tooltip beim Überfahren mit der Maus ist ein nettes Extra, ersetzt aber nicht den zugänglichen Namen.
Praxisbeispiele
<!-- Icon-Button ohne Namen: Screenreader sagt nur „Schalter“ -->
<button class="cart"><svg viewBox="0 0 24 24">…</svg></button>
<!-- Behoben mit aria-label, das dekorative SVG wird ausgeblendet -->
<button class="cart" aria-label="Warenkorb öffnen">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>
</button>
<!-- Behoben mit visuell verstecktem Text -->
<button class="menu">
<svg aria-hidden="true">…</svg>
<span class="sr-only">Menü öffnen</span>
</button>Ist das Symbol ein <img>, wird sein Alternativtext zum Namen des Buttons. Ein fehlendes Alt-Attribut an diesem Bild lässt die Schaltfläche also namenlos. Bei Icon-Links gilt dasselbe – sie erscheinen dann als leerer Link im Prüfbericht.
Ein echtes <button> verwenden, einen kurzen Aktionsnamen vergeben, SVG oder Icon-Font mit aria-hidden="true" ausblenden und gleiche Aktionen überall gleich benennen.
Das Icon auf ein klickbares div setzen, sich nur auf title oder einen Tooltip verlassen oder ein Zeichen aus der Icon-Schrift als kryptisches Symbol vorlesen lassen.
So prüfen Sie einen Icon-Button
Häufige Fragen
Was ist ein Icon-Button in der Barrierefreiheit?
Eine Schaltfläche, die nur ein Symbol und keinen sichtbaren Text zeigt. Barrierefrei ist sie, wenn ein zugänglicher Name im Code – etwa per aria-label oder visuell verstecktem Text – die Aktion beschreibt.
Ist aria-label oder versteckter Text besser für einen Icon-Button?
Beides ist zulässig. aria-label ist schnell gesetzt und als Technik ARIA14 anerkannt. Visuell versteckter Text ist normaler Seitentext und wird von Übersetzungstools zuverlässiger erfasst. Entscheiden Sie sich für einen Weg und bleiben Sie dabei.
Braucht das SVG im Icon-Button einen title?
Nicht, wenn der Button schon einen Namen hat. Blenden Sie das SVG mit aria-hidden="true" aus, sonst sagen manche Screenreader die Grafik zusätzlich an und der Name ist doppelt zu hören.
Wie finde ich Icon-Buttons ohne Namen auf meiner Website?
Prüfen Sie Ihre wichtigsten Seiten mit dem kostenlosen WCAG-Scanner. Er meldet Buttons und Links ohne zugänglichen Namen, sodass Sie alle unbeschrifteten Symbole in einer Liste sehen.
Kann allyWay Icon-Buttons automatisch beheben?
Ja. allyWay erkennt Icon-Buttons ohne Namen auf Ihrer gesamten Website und gibt ihnen klare Namen, die Screenreader vorlesen – von der KI aus Ihren Seiteninhalten geschrieben. Die automatischen Korrekturen setzt das allyWay-Skript um, ohne Änderungen an Theme oder Code, und jede Korrektur lässt sich mit einem Klick zurücknehmen. Kostenlos starten und sehen, welche Symbole allyWay auf Ihrer Website benennt.
Related terms
Leerer Button: Fehler verstehen und beheben
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ohne Text, ohne aria-label und ohne Alternativtext im enthaltenen Bild. Screenreader sagen nur „Schalter“ an, nicht aber, was er bewirkt.
Read definition: Leerer Button: Fehler verstehen und behebenLeerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und behebenFehlendes Alt-Attribut: Fehler erklärt und behoben
Ein fehlendes Alt-Attribut bedeutet, dass ein img-Element (oder ein Bild-Button bzw. Bereich einer Imagemap) gar kein alt-Attribut hat. Assistive Technologien wissen dann nicht, ob das Bild wichtig oder dekorativ ist, und lesen unter Umständen den Dateinamen vor.
Read definition: Fehlendes Alt-Attribut: Fehler erklärt und behobenAlternativtext: Gute Alt-Texte für Bilder schreiben
Ein Alternativtext ist eine kurze Textbeschreibung eines Bildes im alt-Attribut. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn das Bild nicht lädt, und Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen.
Read definition: Alternativtext: Gute Alt-Texte für Bilder schreiben