Barrierefreie Bedienelemente: Warum Alternativtexte für Icons, Buttons und Logos unverzichtbar sind

Grafische Bedienelemente wie Icons, Logos oder Teaserbilder sind auf modernen Webseiten zentral für die Benutzerführung. Doch wenn Bilder nicht angezeigt werden oder Menschen die Seite mit einem Screenreader nutzen, gehen Informationen schnell verloren. Hier setzt Prüfschritt 9.1.1.1a an: Interaktive und funktionale grafische Inhalte müssen mit passenden Alternativtexten versehen sein, damit sie für alle zugänglich sind.

Warum sind Alternativtexte bei Bedienelementen wichtig?

Für blinde Nutzende oder bei deaktivierter Bildanzeige bleiben Grafiken ohne Alternativtext unsichtbar. Alternativtexte sorgen dafür, dass Bedienelemente auch für assistive Technologien verständlich und nutzbar sind.

Ein geeigneter Alternativtext beschreibt dabei nicht das Aussehen, sondern stets Funktion oder Ziel des Bedienelements. Ein Button mit Disketten‑Icon erhält daher den Alternativtext „Speichern“ – nicht „Diskette“.
 Bei verlinkten Grafiken beschreibt der Alternativtext das Ziel des Links. Das Bildmotiv wird nur dann ergänzend benannt, wenn es zusätzliche, relevante Informationen enthält, die nicht bereits im Linktext enthalten sind.

Was fordert der Prüfschritt konkret?

Die Anforderungen an Alternativtexte basieren auf der europäischen Norm EN 301 549 und entsprechen den gesetzlichen Vorgaben zur digitalen Barrierefreiheit. Für eine nachhaltige Umsetzung gilt:

• Verlinkte und interaktive Grafiken, Bilder, SVGs sowie Icon Fonts benötigen funktionale und äquivalente Alternativtexte, sofern sie nicht rein dekorativ sind.
• Bei Buttons benennt der Text die Aktion, etwa „Suchen“, „Absenden“ oder „Menü öffnen“.
• Bei Teaserbildern und Logos beschreibt der Alternativtext das Linkziel, z. B. „Startseite“ oder „Zum Artikel“.
• Textalternativen sollen kurz, eindeutig und nicht redundant sein.
• Das title‑Attribut ist kein Ersatz für Alternativtexte. Maßgeblich ist immer das alt‑Attribut; title liefert höchstens zusätzliche, nicht essenzielle Informationen.
• Werden Bedienelemente als CSS‑Hintergrundbilder eingebunden, muss die Bedeutung anderweitig textlich zugänglich gemacht werden – etwa über sichtbaren oder für assistive Technologien zugänglichen Text oder, falls erforderlich, über ein aria-label.

Typische Fehlerquellen

• Fehlende oder weggelassene alt‑Attribute
• Unklare, zu lange oder missverständliche Alternativtexte
• Bedienelemente, die nur als CSS‑Hintergrundbild oder Icon Font umgesetzt sind, ohne Textersatz
• Alternativtexte, die das Aussehen statt der Funktion beschreiben

Tipps für die Praxis

• Alternativtexte müssen die Grafik in ihrer Funktion vollständig ersetzen können.
• Ist ein Logo als Link zur Startseite eingebunden, sollte das alt‑Attribut den Namen des Auftritts und den Hinweis „Startseite“ enthalten.
• Bei Symbolen wie einer Lupe ist die Aktion anzugeben („Suche“), nicht das Motiv.
• Bei Icon Fonts oder SVGs als Bedienelementen ist ein zugänglicher Text oder ein geeignetes ARIA‑Attribut erforderlich.

Redundanzen vermeiden

Sind Bild und Text gemeinsam Teil eines Links, bildet der Text den zugänglichen Namen des Links. Er übernimmt die Funktion der Bildalternative und muss das Linkziel eindeutig beschreiben. Das Bild gilt in diesem Fall als dekorativ und erhält ein leeres, aber vorhandenes alt‑Attribut (alt="").

Testen Sie selbst

Prüfen Sie Ihre Webseite z. B. mit Browser‑Entwicklertools oder bei ausgeschalteten Bildern. Stellen Sie sicher, dass alle interaktiven Grafiken und Bedienelemente über klare, funktionale Textalternativen verfügen und weiterhin nutzbar sind.

Fazit

Alternativtexte für Bedienelemente sind ein zentraler Baustein digitaler Inklusion. Sie machen Webseiten für Menschen mit Seheinschränkung bedienbar und sorgen zugleich für eine robuste Nutzererfahrung – auch bei technischen Einschränkungen. Sorgfältig umgesetzte Alternativtexte tragen wesentlich zu barrierefreien und zukunftssicheren Webangeboten bei.

Text: Stiftung Pfennigparade