Warum Namen für grafische Bedienelemente so wichtig sind
Namen für grafische Bedienelemente entscheiden, ob Nutzer – inklusive Screenreader-User – verstehen, was ein Icon, Bild oder Button auslöst. Verwenden Sie aussagekräftige, Funktions-beschreibende Namen und hinterlegen Sie diese konsequent in alt-Attributen oder per aria-label wie aria-label="Zurück" oder aria-label="Weiter". So verbessern Sie Usability, Barrierefreiheit und SEO zugleich.
Namen für grafische Bedienelemente sind Stand 2026 eine zentrale Grundlage für barrierefreie, verständliche und klickstarke Interfaces. Ein Icon ohne Text ist für viele Nutzer nur ein Rätsel, für Screenreader-User sogar komplett unsichtbar. Ein klarer, sprechender Name macht aus einem bloßen Symbol eine eindeutig verständliche Handlung.
BarriereFREIHEIT ist nicht nur ein „Nice to have“, sondern in vielen Projekten Pflicht. In Deutschland greifen BITV 2.0 und das Barrierefreiheitsstärkungsgesetz (BFSG). Wer interaktive Grafiken ohne sinnvolle Namen einsetzt, schließt Menschen mit Sehbehinderung aus – und riskiert rechtliche Probleme, Supportaufwand und Abbrüche im Funnel.
Gleichzeitig verbessern saubere Namen für grafische Bedienelemente die Nutzerführung für alle. Selbst sehende User verstehen ein Icon wie drei Punkte, eine Lupe oder ein Zahnrad schneller, wenn der zugrunde liegende Name in Tooltips, ARIA-Labels oder sichtbarem Text eindeutig formuliert ist. So sinkt die Fehlklick-Rate spürbar.
Grundprinzipien für gute Namen für grafische Bedienelemente
Gute Namen für grafische Bedienelemente
beschreiben immer die Funktion – nicht das Aussehen. Schreiben Sie also nicht „Zahnrad“, sondern „Einstellungen öffnen“. Nutzer wollen wissen, was passiert, wenn sie klicken, tippen oder fokussieren, nicht wie das Symbol gezeichnet ist.
Formulieren Sie kurz, klar und konsistent.
Ein Screenreader-Nutzer soll in maximal ein bis zwei Sekunden verstehen, was das Element macht. „Zum Warenkorb hinzufügen“ ist besser als „Diesem Artikel hinzufügen“. Wiederholen Sie gleiche Bezeichnungen für gleiche Funktionen, etwa überall „Zurück“ statt „Zurück“ und „Vorherige Seite“ im Wechsel.
Nutzen Sie aktive Verben:
„Datei herunterladen“
„Formular absenden“
„Suche starten“
Passive Formulierungen oder Nominalketten („Download der Datei“) sind schwerer zu erfassen. Besonders bei mobilen Anwendungen mit wenig Platz muss der Name im Code klar formuliert sein, auch wenn im UI nur ein Icon sichtbar ist.
Technische Grundlagen: alt-Attribut und aria-label richtig nutzen
alt="zum Experten Portal"
Für klickbare Bilder und Icons ist das alt-Attribut die wichtigste Basis. Ein klickbares Bild ohne sinnvolles alt-Tag ist für Screenreader meist ein „leerer Link“. Setzen Sie deshalb bei interaktiven Bildern ein Funktions-alt wie alt="Zur Startseite" oder alt="zum Experten Portal" statt einer rein dekorativen Beschreibung des Motivs.
<button aria-label="Zurück">
Für Icons, SVGs oder komplexere Komponenten empfiehlt sich aria-label.
Beispiel: <button aria-label="Zurück"> <svg>...</svg> </button>.
Der Screenreader liest „Zurück“, obwohl visuell nur ein Pfeil zu sehen ist.
So können Sie Icons flexibel gestalten, ohne Verständlichkeit einzubüßen.
<button>Weiter</button>
Wenn bereits sichtbarer Text im Element steht, ist ein zusätzliches aria-label meist unnötig und kann sogar zu Doppelungen führen. In solchen Fällen reicht es, die Beschriftung sauber und verständlich zu formulieren, etwa <button>Weiter</button>. Technische Einfachheit ist hier ein Vorteil.
Typische grafische Bedienelemente und passende Namen
Wie finden Sie im Alltag gute Namen für grafische Bedienelemente? Am besten denken Sie in konkreten UI-Elementen. Unten finden Sie typische Beispiele, die sich in Projekten 2026 immer wieder bewähren, sowohl für Desktop als auch Mobile.
Für Navigationspfeile eignen sich Funktionsnamen wie
aria-label="Zurück"aria-label="Weiter"aria-label="Nächste Seite"aria-label="Vorheriges Bild"
Vermeiden Sie hier Abkürzungen wie „prev“ oder „nxt“, die für viele Nutzer unverständlich sind.
Bei typischen Aktionsbuttons funktionieren Namen wie
aria-label="In den Warenkorb"aria-label="Jetzt buchen"aria-label="Anfrage senden"aria-label="Profil bearbeiten"aria-label="Filter öffnen"Passwort anzeigen
Orientierung bietet die Frage: „Was ist die direkte Aktion, die dieses Element auslöst?“ Formulieren Sie genau diese Aktion als Namen.
Icons, Symbole und klickbare Bilder sinnvoll benennen
Icons wie Lupe, Herz, Mülleimer oder Download-Pfeil benötigen klare, sprachliche Namen für grafische Bedienelemente. Anstatt das Icon selbst zu beschreiben („Herz-Icon“), nutzen Sie die Funktion:
„Suche öffnen“
„Artikel merken“
„Zur Wunschliste hinzufügen“
„Element löschen“
„Datei herunterladen“
Klickbare Bilder, zum Beispiel Teaser-Kacheln oder verlinkte Produktbilder, sollten das Ziel des Klicks beschreiben. Statt „Produktbild“ verwenden Sie alt="Zum Produkt: Laufschuh Modell X". So versteht der Nutzer, wohin der Klick führt.
Rein dekorative Grafiken dürfen und sollen als solche markiert werden. Setzen Sie dafür alt="" und gegebenenfalls role="presentation". So wird das Element vom Screenreader übersprungen und Ihre wirklich relevanten Namen für grafische Bedienelemente gehen nicht im Rauschen unter.
Best Practices: So formulieren Sie zugängliche Namen 2026
Wie kommen Sie in der Praxis systematisch zu guten Namen für grafische Bedienelemente?
Bewährt hat sich ein einfacher Dreischritt:
Aktion definieren, Ziel benennen, Kontext klären
Daraus formen Sie einen klaren, kurzen Satzteil, der genau diese Kombination abdeckt.
- Definieren Sie die Aktion: „öffnen“, „starten“, „speichern“, „löschen“, „wechseln“.
- Benennen Sie das Ziel: „Einstellungen“, „Suchergebnisse“, „Warenkorb“, „nächstes Bild“.
- Ergänzen Sie bei Bedarf den Kontext: „aktueller Artikel“, „aktuelles Formular“, „dieses Produkt“.
Beispiele
Einstellungen öffnen
Nächsten Artikel anzeigen
Suche starten
Dieses Produkt in den Warenkorb legen
Jede dieser Formulierungen ist für Screenreader-User unmittelbar verständlich und auch für sehende Nutzer hilfreich, etwa als Tooltip-Text oder Button-Beschriftung.
Mehrsprachigkeit und Konsistenz sauber umsetzen
In mehrsprachigen Projekten müssen Namen für grafische Bedienelemente konsequent lokalisiert werden. Ein aria-label="Next" auf einer ansonsten deutschsprachigen Seite wirkt zerhackt und irritierend. Legen Sie deshalb pro Sprache ein zentrales Glossar für UI-Begriffe an.
Definieren Sie darin für jede Sprache die Standard-Bezeichnungen, zum Beispiel überall „Weiter“ statt abwechselnd „Weiter“, „Nächste Seite“ und „Fortfahren“.
Dieses Glossar nutzen Design, Entwicklung, Redaktion und Übersetzung gemeinsam.
So bleiben Bezeichnungen über alle Komponenten hinweg konsistent.
Nutzen Sie außerdem das lang-Attribut im HTML-Dokument korrekt.
Screenreader wechseln anhand dieses Attributs die Sprache.
Wenn Sie sprachlich konsistente Namen für grafische Bedienelemente pflegen, verbessern Sie die Gesamtverständlichkeit deutlich.
Häufige Fehler bei Namen für grafische Bedienelemente
Ein verbreiteter Fehler ist die Verwendung rein visueller Beschreibungen wie
- „Grüner Pfeil“
- „Drei Punkte“
- „Großes Bild oben“
Solche Namen sagen nichts über die Funktion aus. Screenreader-User wissen dann nicht, ob sie eine Galerie öffnen, eine Datei löschen oder nur scrollen.
Ebenfalls problematisch sind leere oder generische Beschriftungen wie
- „Button“
- „Icon“
- „Link“
- oder gar fehlende
alt-undaria-label
In Formularen oder Checkout-Prozessen kann so ein fehlender Name direkt zu Abbrüchen führen, weil entscheidende Aktionen nicht gefunden werden.
Ein dritter Klassiker: Dopplungen durch schlecht gesetzte ARIA-Attribute.
Wenn sichtbarer Text „Weiter“ lautet und zusätzlich ein aria-label="Weiter zum nächsten Schritt" gesetzt wird, hören Screenreader-Nutzer teils beide Varianten.
Halten Sie sich an das Prinzip „so wenig wie nötig, so klar wie möglich“.
Testen und optimieren: So prüfen Sie Ihre Benennungen
Wie stellen Sie sicher, dass Ihre Namen für grafische Bedienelemente wirklich funktionieren?
Führen Sie kurze, gezielte Tests mit Screenreadern wie NVDA, JAWS oder VoiceOver durch. Navigieren Sie per Tastatur und hören Sie, welche Namen vorgelesen werden und ob sich der Fluss natürlich anfühlt.
Fragen Sie Testpersonen – idealerweise auch blinde oder sehbehinderte Nutzer –, ob sie ohne visuelle Hinweise verstehen, was die Elemente tun.
Notieren Sie Stellen, an denen Fragen wie „Was passiert, wenn ich hier klicke?“ auftauchen.
Genau dort brauchen Sie präzisere Funktionsnamen.
In agilen Teams bietet es sich an, Naming-Reviews fest in den Design- und Dev-Workflow einzubauen. Checklisten mit Beispielen für gute und schlechte Namen helfen, Qualität auch bei neuen Komponenten konstant hochzuhalten.
Konkrete To-dos: So verbessern Sie Ihre UI ab heute
Wenn Sie Ihre Namen für grafische Bedienelemente sofort verbessern wollen,
starten Sie mit einem Mini-Audit.
- Listen Sie alle klickbaren Icons, Bilder und Buttons auf wichtigen Seiten oder Screens.
- Prüfen Sie dann, ob jedes Element einen klaren, Funktions-beschreibenden Namen im Code besitzt.
- Ersetzen Sie leere oder sinnlose
alt-Attribute durch Funktionsbeschreibungen. - Ergänzen Sie
aria-labelfür Icons ohne sichtbaren Text (z.B.aria-label="Zurück"). - Vereinheitlichen Sie Bezeichnungen für gleiche Aktionen (z.B. überall „Weiter“).
- Dokumentieren Sie Ihre Standards in einem kurzen Styleguide.
Motivieren Sie Ihr Team, diese Standards konsequent umzusetzen. Schulen Sie Designer, Entwickler und Redakteure gemeinsam, damit allen klar ist, warum durchdachte Namen für grafische Bedienelemente die Nutzererfahrung, Barrierefreiheit und Conversion-Rate spürbar verbessern.