# Icon-Button: So geben Sie ihm einen Namen

Source: https://allyway.ai/de/glossary/icon-button

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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) ist ein Kriterium der Stufe A in [WCAG 2.2](https://allyway.ai/de/regulations/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](https://allyway.ai/de/glossary/leerer-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>` |

> **Tip:** > **Benennen Sie die Aktion, nicht das Bild**
> „Dialog schließen“ hilft, „X“ oder „Kreuz-Symbol“ nicht. Schaltet der Button einen Zustand um, bleibt der Name gleich und der Zustand wird ergänzt – etwa `aria-pressed="true"` bei „Stummschalten“.

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

```html title="Beispiel"
<!-- 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](https://allyway.ai/de/glossary/fehlendes-alt-attribut) an diesem Bild lässt die Schaltfläche also namenlos. Bei Icon-Links gilt dasselbe – sie erscheinen dann als [leerer Link](https://allyway.ai/de/glossary/leerer-link) im Prüfbericht.

**Do:** Do

Ein echtes `<button>` verwenden, einen kurzen Aktionsnamen vergeben, SVG oder Icon-Font mit `aria-hidden="true"` ausblenden und gleiche Aktionen überall gleich benennen.

**Don't:** Don't

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

Q: Was ist ein Icon-Button in der Barrierefreiheit?
A: 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.

Q: Ist aria-label oder versteckter Text besser für einen Icon-Button?
A: 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.

Q: Braucht das SVG im Icon-Button einen title?
A: 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.

Q: Wie finde ich Icon-Buttons ohne Namen auf meiner Website?
A: Prüfen Sie Ihre wichtigsten Seiten mit dem [kostenlosen WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites). Er meldet Buttons und Links ohne zugänglichen Namen, sodass Sie alle unbeschrifteten Symbole in einer Liste sehen.

Q: Kann allyWay Icon-Buttons automatisch beheben?
A: 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](https://allyway.ai/de/automatic-accessibility-fixes-for-website) setzt das allyWay-Skript um, ohne Änderungen an Theme oder Code, und jede Korrektur lässt sich mit einem Klick zurücknehmen. [Kostenlos starten](https://app.allyway.ai/register) und sehen, welche Symbole allyWay auf Ihrer Website benennt.