Wie setze ich einen Link in HTML?
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: