Dieser Artikel widmet sich dem Thema “Links in HTML”. Welche Barrieren gibt es und wie können sie vermieden werden?

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 bzw. ein neuer Tab geöffnet werden soll, dann 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 sie 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.

Die gute Nachricht ist, dass sie sich mit wenig Aufwand umgehen lassen.

Es muss ein neuer Tab sein

Wenn wir das Quellcode-Beispiel von oben mal bemühen und es barrierefrei machen wollen, dann bekommen wir Folgendes. <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 erlaubt es allen Besuchenden, zu wissen, 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:

Fragen, Anregungen und mehr

Bei Fragen oder weitergehendem Interesse rufen Sie mich gerne unter 030 280 400 an.

Dennis Westphal

Interessante Artikel zum Weiterlesen