Skip to main content

Barrierefreie Links & Buttons nach BFSG | Checkliste & Lösungen für barrierefreie Websites

Veröffentlicht: •Aktualisiert: •4 min read•navable Team
Checkliste barrierefreie Navigationselementebarrierefreie Linksbarrierefreie Buttonsdigitale BarrierefreiheitBFSG (Barrierefreiheitsstärkungsgesetz)WCAG 2.1Web Accessibilitybarrierefreie Navigationbarrierefreie Benutzeroberflächedigitale Inklusion

Das BFSG gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen für Verbraucher. Ob Dein Angebot erfasst ist, erklärt die BFSG-Check-Lösung. Die folgenden Prüfungen helfen Dir, technische Barrieren auf Deiner Website zu finden.

Barrierefreie Navigationselemente wie Links und Buttons ermöglichen allen Nutzern – auch mit Sehbehinderung, motorischen Einschränkungen oder kognitiven Beeinträchtigungen – eine gleichberechtigte Nutzung Deiner Website.

Deine Vorteile:

  • Bedienbarkeit prüfen: Aussagekräftige Links und per Tastatur bedienbare Buttons helfen Menschen, Aufgaben auf Deiner Website zu erledigen.
  • Erweiterung der Zielgruppe: Barrierefreie Websites erreichen Menschen mit verschiedenen Behinderungen, wodurch Du Deine Kundenzielgruppe erweitern.
  • Bessere Sichtbarkeit in Google: Google bevorzugt Websites, die den WCAG 2.1-Richtlinien entsprechen. Das bedeutet, barrierefreie Websites erhalten bessere Sichtbarkeit in Suchmaschinen.
  • Optimierte Nutzererfahrung (UX)

Barrierefreie Links sollten verständlich, leicht erkennbar und funktional sein. Dies ermöglicht es Nutzern, sie ohne Schwierigkeiten zu erkennen und zu verwenden.

✔ Beschreibender Linktext: Vermeide allgemeine Formulierungen wie "hier klicken" oder "mehr". Stattdessen sollte der Linktext den Zweck klar beschreiben, z. B. "Lies mehr über die Vorteile barrierefreier Websites für Dein Unternehmen".

✔ Visuelle Hervorhebung: Links sollten nicht nur durch Farbänderung, sondern zusätzlich durch Unterstreichung, vorangestellte Symbole oder Fettdruck hervorgehoben werden, um sie klar von normalem Text abzugrenzen.

✔ Das Linkziel klar kennzeichnen: Öffnet ein Link eine neue Seite oder ein Dokument, sollte dies deutlich gemacht werden. Bei verlinkten Dokumenten ist es verpflichtend anzugeben, dass es sich um ein Dokument handelt.

📌 Beispiel für barrierefreie Links:

  • ❌ Schlecht: "Klicke hier, um mehr zu erfahren"
  • ✅ Gut: "Lies mehr über die Vorteile barrierefreier Websites für Dein Unternehmen"

2. Barrierefreie Buttons: Nutzerführung durch klare Gestaltung

Ein barrierefreier Button muss deutlich sichtbar, einfach zu klicken und zugänglich sein, um eine effektive Interaktion zu gewährleisten.

✔ Klarer, handlungsorientierter Text: Buttons sollten immer eine klare Aktion angeben, z. B. "Jetzt anmelden" statt "Absenden".

✔ Alternativtexte für Bedienelemente: Die Funktion des Elements sollte eindeutig benannt werden (z. B. "Suchen") und die Bezeichnung so kurz wie möglich gehalten werden.

✔ Ausreichender Kontrast: Stelle sicher, dass der Buttontext ausreichend Kontrast zum Hintergrund bietet (mindestens 4.5:1).

✔ Große, klickbare Fläche: Buttons sollten eine ausreichend große Fläche bieten, um sie sowohl mit Maus, Tastatur als auch Touchscreen-Geräten einfach zu bedienen.

✔ Visuelle Rückmeldungen: Achte darauf, dass der Button eine visuelle Rückmeldung gibt, wenn er fokussiert oder gedrückt wird (z. B. durch Farbänderung oder Animationen).

📌 Beispiel für barrierefreie Buttons:

  • ❌ Schlecht: Ein Button in der gleichen Farbe wie der Hintergrund ohne Text
  • ✅ Gut: Ein Button mit klarer Beschriftung wie "Jetzt zur Anmeldung" und einem guten Farbkontrast zum Hintergrund

Häufig gestellte Fragen (FAQ) zu barrierefreien Links und Buttons

Links und Buttons sind zentrale Navigationselemente, die allen Nutzern den Zugang zu wichtigen Informationen ermöglichen. Barrierefreie Links und Buttons verbessern nicht nur die Benutzerfreundlichkeit, sondern helfen Dir auch, die BFSG-Vorgaben zu erfüllen und Deine SEO-Rankings zu verbessern.

Ein barrierefreier Link sollte beschreibend und gut sichtbar sein, während ein barrierefreier Button ausreichend Kontrast und eine klare Handlungsaufforderung bieten sollte.

Deutliche visuelle Unterscheidung: ✅ Links & Buttons müssen sich klar vom restlichen Text abheben.

Zusätzliche visuelle Hinweise: ✅ Verwende nicht nur Farbe zur Kennzeichnung.

Eindeutige Linktexte: ✅ Formuliere Linktexte präzise und kontextbezogen.

Fokus-Indikatoren: ✅ Hebe das aktuell fokussierte Element deutlich hervor.

Ausreichende Größe & Abstände: ✅ Sorge für genügend Platz zwischen klickbaren Elementen.

Weitere Kriterien findest Du im WCAG-Hub. Nutze das Accessibility Audit für maschinell prüfbare Befunde und ergänze manuelle Tests.

Weiterlesen und Quellen

Updates erhalten

Erhalte Tipps und Updates rund um Barrierefreiheit.