Barrierefreie Links in HTML

Datum der Veröffentlichung

Einen Link in HTML setzt man mit <a href="Zielseite.html">Linktext</a>.

In diesem Beispiel wird ein Link zur fiktiven HTML-Datei “Zielseite.html” gesetzt und mit dem Text “Linktext” im Browser angezeigt.

Öffnen der Zielseite in neuem Tab oder Fenster

Wenn die Seite nicht verlassen, sondern ein neues Fenster oder ein neuer Tab geöffnet werden soll, sieht der Quelltext dafür wie folgt aus: <a href="Zielseite.html" target="_blank">Linktext</a>. Ob ein neuer Tab oder ein neues Fenster geöffnet wird, liegt an den individuellen Browsereinstellungen.

Hier ergibt sich aber bereits die erste Barriere. Nutzenden von Hilfstechnologien ist nicht klar, dass dieser Link in einem neuen Tab geöffnet wird. Spätestens beim Schließen des Browsers wundert man sich dann darüber, dass so viele Tabs geöffnet sind. Das lässt sich aber dadurch lösen, dass man diese Zusatzinformation in Klammern dazu schreibt. Ein Title-Attribut löst das Problem hingegen nicht. In der Regel werden diese Zusatzangaben von Screenreadern ignoriert.

Fertig machen zum Ankern

Wer bestimmte Inhalte innerhalb der eigenen Seite direkt aufrufbar machen möchte, der muss zwei Dinge tun. Zuerst muss er die Bereiche mit einer ID auszeichnen. Beispielsweise eine Überschrift <h3 id="sprung2">Überschrift, die total wichtig ist</h3>. Anschließend sieht unser Link, um direkt zu dieser Überschrift zu springen, so aus: <a href="#sprung2">Linktext</a>.

Die ID, die wir festgelegt haben, ist “sprung2”. Diese ID kann vollkommen frei definiert werden. So lässt sich beispielsweise ein Inhaltsverzeichnis am Anfang des Artikels realisieren.

Barrieren

Beim Setzen von Links gibt es zwei Fallstricke:

  • Links in einem neuen Tab/Fenster
  • Links mit nicht aussagekräftigen Linktexten

Die gute Nachricht ist, dass sich diese Hürden mit wenig Aufwand überwinden lassen.

Es muss ein neuer Tab sein

Wenn wir das Quellcode-Beispiel von oben bemühen und es barrierefrei machen wollen, dann bekommen wir <a href="Zielseite.html" target="_blank">Linktext (Seite öffnet in neuem Tab)</a>. Durch die Zusatzinformation in Klammern weiß man, welches Verhalten zu erwarten ist. Dieser Ansatz vermittelt allen Besuchenden, dass eine Seite in einem neuen Tab geöffnet wird - unabhängig davon, ob Screenreader oder andere Hilfstechnologien genutzt werden.

Das Verstecken dieser Information ist eine neue Barriere. Auch wenn es hübscher aussieht.

Linktexte

Ein guter Linktext funktioniert auch ohne den Text, der daneben steht. “hier gibt es unsere Blogartikel” ist also weniger geeignet als “hier gibt es unsere Blogartikel”.

Die Praxis

Im folgenden Screencast zeige ich die Auswirkungen dieser theoretischen Ausführungen in der Praxis:

Screencast: Links in HTML mit Screenreadern

Profile picture for user dennis.westphal

Dennis Westphal

Dennis ist IT-Berater bei der Gesellschaft zur Entwicklung von Dingen. Sein Gebiet ist die Barrierefreiheit. Hilfreich dabei: Dennis ist seit Geburt blind. Seine Screencasts erstellt er mit Open-Source-Software.