Barrierefreie Links und Buttons: Was dabei wichtig ist

Links und Buttons gehören zu den wichtigsten Bedienelementen jeder Website. Über sie navigieren Nutzer von Seite zu Seite, öffnen Menüs, verschicken Formulare oder starten Aktionen. Damit das für alle Menschen funktioniert, unabhängig von einer Beeinträchtigung, sollten Links und Buttons möglichst barrierefrei gestaltet sein.

Warum barrierefreie Links und Buttons wichtig sind

Insbesondere für blinde Menschen, die einen Screenreader (ein Bildschirmleseprogramm) nutzen, ist es wichtig, dass ein Link oder Button aussagekräftig ist. Screenreader erstellen im Hintergrund eigene Listen: eine Liste aller Links und eine Liste aller Buttons. Nutzer springen darüber gezielt durch die Seite. In den Programmen JAWS und NVDA erreicht man Schaltflächen zum Beispiel mit der Taste B. Das funktioniert aber nur, wenn jedes Element auch ohne umgebenden Text verständlich ist.

Auch Menschen, die ausschließlich die Tastatur bedienen, profitieren. Sie erreichen Links und Buttons mit der Tabulatortaste und brauchen einen gut sichtbaren Fokus, um zu erkennen, wo sie sich gerade befinden. Und Menschen mit motorischen Einschränkungen kommen mit ausreichend großen Klickflächen deutlich besser zurecht.

Am Ende profitieren alle Nutzer. Klare Links und Buttons sind schneller zu erfassen und erhöhen die Benutzerfreundlichkeit (Usability) deiner gesamten Website.

Links und Buttons: der feine, aber wichtige Unterschied

Bevor es um die Gestaltung geht, lohnt ein Blick auf eine häufige Fehlerquelle: die Verwechslung von Link und Button. Beide sehen manchmal ähnlich aus, haben aber eine unterschiedliche Bedeutung.

Ein Link führt zu einem Ziel. Er bringt Nutzer zu einer anderen Seite, zu einem Dokument oder zu einer anderen Stelle auf derselben Seite. Technisch ist er ein Anker im HTML, also das Element <a> mit einer Zieladresse (dem Attribut href).

Ein Button löst eine Aktion aus. Er verschickt ein Formular, öffnet ein Menü, schließt ein Dialogfenster oder legt einen Artikel in den Warenkorb. Technisch ist er im HTML das Element <button>.

Als Faustregel gilt: Führt das Element irgendwohin, ist es ein Link. Tut es etwas auf der aktuellen Seite, ist es ein Button.

Wichtig für die technische Umsetzung: Nutze für Links und Buttons immer die passenden HTML Elemente und keine nachgebauten Varianten aus einem div. Native Elemente bringen Tastaturbedienung, Fokus und die richtige Rolle für Screenreader von Haus aus mit. Ein div mit der Rolle Button wird nicht automatisch zu einem echten Button. Das korrekte Verhalten müsstest du sonst mühsam von Hand nachbauen.

Was macht einen Textlink barrierefrei?

Ein barrierefreier Textlink wird von allen Nutzern leicht erkannt und verstanden, unabhängig von einer Beeinträchtigung. Dafür sollte er diese Kriterien erfüllen:

Aussagekräftiger Linktext: Die Beschriftung gibt einen klaren Hinweis darauf, wohin der Link führt. Gut geeignet sind zum Beispiel:

• „Zum Hauptmenü"
• „Preispläne ansehen"
• „Bild vergrößern"

Vermeide dagegen nichtssagende Formulierungen wie „Hier klicken" oder ein alleinstehendes „Mehr", die ohne Kontext nicht verständlich sind.

Ausreichender Kontrast: Der Linktext hebt sich mit einem Kontrast von mindestens 4,5:1 vom Hintergrund ab. Das ist besonders für Menschen mit einer Sehbeeinträchtigung wichtig.

Erkennbar als Link: Der Link unterscheidet sich sichtbar vom übrigen Text. Setze dabei möglichst zwei Merkmale ein, zum Beispiel eine andere Farbe und eine Unterstreichung. Denn manche Menschen können Farben nur schwer erkennen oder unterscheiden. Farbe allein reicht deshalb nicht aus.

Sichtbarer Fokus und Tastaturbedienung: Der Link ist mit der Tabulatortaste erreichbar und beim Fokussieren deutlich hervorgehoben.

Kontext über ARIA, wenn nötig: Lässt sich ein wiederkehrender Linktext wie „Mehr erfahren" nicht vermeiden, kann ein zusätzliches Beschriftungsattribut (aria-label) den fehlenden Kontext für Screenreader ergänzen.

Beispiele für barrierefreie Textlinks

Viele Beispiele für barrierefreie Textlinks findest du direkt auf unserer Website. Ursprünglich haben wir aber zum Beispiel in der Blogübersicht mit der allgemeinen Beschriftung „Mehr erfahren" gearbeitet und diese gezielt durch Aria-Attribute für Screenreader-Nutzende um Informationen ergänzt.

Beispiel für einen Textlink mit aria-Label: So könnte ein solcher Link im Code ausshen. Ohne zusätzliche Beschriftung liest ein Screenreader allerdings nur den sichtbaren Text vor, also lediglich „Mehr erfahren":

<a href="/blog/barrierefreie-links-und-buttons">Mehr erfahren</a>

Mit einem aria-label ergänzt du den fehlenden Kontext. Der Screenreader liest dann statt „Mehr erfahren" den vollständigen Beitragstitel vor:

<a href="/blog/barrierefreie-links-und-buttons"
   aria-label="Mehr erfahren über barrierefreie Links und Buttons">
  Mehr erfahren
</a>

Beachte dabei: Das aria-label ersetzt den sichtbaren Linktext für Screenreader vollständig. Achte deshalb darauf, dass die Beschriftung den sichtbaren Text weiterhin enthält („Mehr erfahren über …"). So findet auch die Sprachsteuerung den Link zuverlässig, denn Nutzer sprechen in der Regel den sichtbaren Text an.

Auch hat sich die Bedeutung der Mehr-erfahren-Links auf unserer Website aus dem Kontext ergeben; zum Beispiel aus dem Blogtitel. Da Screenreader-Nutzende aber häufig eine Linkliste zur Navigation verwenden, fehlt ihnen die Kontextinformation. Beschreibenden Linktexte können sie hingegen auch ohne den umgebenden Text sofort verstehen.

Daher ist es besser überall auf einer Website mit sprechenden Links zu arbeiten. Hier kommt ein Beispiel. Auf der Seite der Web Accessibility Initiative (WAI) findest du ebenfalls ein Beispiel (die Seite ist in englischer Sprache):

Hier geht es zum Beispiel für einen barrierefreien Textlink auf der WAI-Website

Grundsätzlich ist es am Besten immer mit sprechenden Textlinks zu arbeiten, die das Linkziel für alle Nutzenden klar benennen.

Was macht einen Button barrierefrei?

Für Buttons gelten viele der gleichen Grundregeln wie für Links, ergänzt um einige Besonderheiten:

Klare Beschriftung (Accessible Name). Jeder Button braucht einen verständlichen Namen, der die Aktion beschreibt, zum Beispiel „Newsletter abonnieren" statt „Absenden". Buttons, die nur aus einem Symbol bestehen (etwa ein Kreuz zum Schließen), brauchen einen zusätzlichen Namen über aria-label, etwa „Dialog schließen". Für einen Screenreader ist ein reines „X" sonst nichtssagend.

Ausreichender Kontrast. Der Beschriftungstext braucht einen Kontrast von mindestens 4,5:1. Für die Fläche des Bedienelements selbst und für funktionale Symbole gilt ein Mindestkontrast von 3:1 zur Umgebung, auch in den Zuständen bei Fokus und bei Maus darüber.

Ausreichend große Klickfläche. Die WCAG 2.2 verlangt für Bedienelemente eine Mindestzielgröße von 24 x 24 Pixeln (Stufe AA). Als bewährte Praxis gelten 44 x 44 Pixel, vor allem auf Touchgeräten. Größere Flächen helfen besonders Menschen mit motorischen Einschränkungen.

Tastaturbedienung und sichtbarer Fokus. Ein Button lässt sich mit der Tastatur erreichen und mit der Eingabetaste oder der Leertaste auslösen. Beim Fokussieren ist er klar hervorgehoben.

Zustände mitteilen. Ändert ein Button einen Zustand, sollte dieser auch für Screenreader erkennbar sein. Bei einem aufklappbaren Menü teilt zum Beispiel aria-expanded mit, ob es geöffnet oder geschlossen ist. Bei einem Umschalter zeigt aria-pressed, ob er aktiv ist.

Deaktivierte Buttons sparsam einsetzen. Inaktive Buttons haben oft einen schwachen Kontrast und werden leicht übersehen. Setze sie nur ein, wenn sie zum Verständnis wirklich beitragen.

Häufige Fehler und wie du sie vermeidest

Ein paar Stolperfallen begegnen uns in Beratungsprojekten immer wieder:

• Nichtssagende Beschriftungen. „Hier klicken", „Mehr" oder „Weiter" ohne Kontext helfen niemandem. Beschreibe stattdessen das Ziel oder die Aktion.
• Nachgebaute Elemente. Ein Link oder Button aus einem div verliert Fokus, Rolle und Tastaturbedienung. Nutze die nativen HTML Elemente.
• Fokus nur bei der Maus. Ein Fokus, der nur beim Überfahren mit der Maus sichtbar wird, hilft Tastaturnutzern nicht. Sorge für einen deutlich sichtbaren Fokus bei allen interaktiven Elementen.
• Nur Farbe als Unterscheidung. Wer Farben schwer unterscheidet, erkennt den Link sonst nicht. Ergänze ein zweites Merkmal wie eine Unterstreichung.
• ARIA als vermeintliches Allheilmittel. Laut dem WebAIM Million Report 2025 weisen Seiten mit ARIA im Schnitt sogar mehr Fehler auf als Seiten ohne. Die Regel lautet: erst sauberes HTML, dann ARIA nur dort ergänzen, wo es wirklich gebraucht wird.

Checkliste für barrierefreie Links und Buttons

Für Links:

• Aussagekräftiger Linktext, der das Ziel klar beschreibt (zum Beispiel „Mehr zur Barrierefreiheit lesen" statt „Hier klicken")
• Sichtbar als Link erkennbar, zum Beispiel durch Unterstreichung und Farbe
• Farbkontrast von mindestens 4,5:1 zum Hintergrund
• Nicht nur Farbe als Hinweis, sondern ein zweites Merkmal
• Mit der Tabulatortaste erreichbar und beim Fokus deutlich hervorgehoben
• Bei wiederkehrenden Texten zusätzlicher Kontext über aria-label

Für Buttons:

• Klarer Name, der die Aktion beschreibt (auch bei reinen Symbolbuttons über aria-label)
• Echtes Buttonelement (<button>) statt nachgebautem div
• Kontrast von 4,5:1 für den Text und mindestens 3:1 für Fläche und Symbole
• Klickfläche von mindestens 24 x 24 Pixeln, besser 44 x 44 Pixel
• Mit Tastatur bedienbar (Eingabetaste oder Leertaste) und mit sichtbarem Fokus
• Zustände wie geöffnet oder aktiv über ARIA mitteilen (zum Beispiel aria-expanded)

Barrierefreie Links und Buttons sind kein Selbstzweck

Barrierefreie Links und Buttons sind kein Selbstzweck. Sie helfen Menschen mit Beeinträchtigung, deine Website eigenständig zu nutzen, und verbessern gleichzeitig die Bedienbarkeit für alle. Der wichtigste Schritt ist oft schon getan, wenn du klare Beschriftungen wählst, die passenden HTML Elemente einsetzt und einen sichtbaren Fokus sicherstellst.

Kostenfreie Beratung

Du hast Fragen zum Beitragsthema barrierefreie Links und Buttons oder generell zu einer barrierefreien Website? Dann vereinbare eine kostenfreie Beratung mit uns.

Hier kommst du zu unserem Anfrageformular