Linkzweck (im Kontext)

Links müssen so beschriftet werden, dass ihr Ziel und Zweck klar erkennbar ist. Dies ermöglicht es assistierenden Technologien (z.B. Screenreadern), Links auch ausserhalb ihres unmittelbaren Kontexts (etwa in einer Auflistung aller Links) aussagekräftig anzusagen.

Verstehen

Links müssen auch ohne den erweiterten Kontext, der sie umgibt, verständlich sein. Blinde Menschen lassen sich häufig vom Screenreader alle Links einer Seite als eine Liste anzeigen bzw. vorlesen; Linktexte wie etwa «Weiter» oder «Mehr» sind dann wenig informativ, gerade wenn sich mehrere davon auf derselben Seite befinden (etwa auf einer News-Übersichtsseite).

Versehen Sie deshalb jeden Link mit einem möglichst aussagekräftigen Linktext. Anstelle von <p>Erfahren Sie <a href="...">mehr über unsere Firma!

verwenden Sie besser <p>Erfahren Sie <a href="...">mehr über unsere Firma!

.

Bei alleinstehenden, textlich uninformativen Links empfehlen wir, den Linktext zu ergänzen durch Inhalt, welcher visuell ausgeblendet wird: <a href="...">Mehr <span class="visually-hidden">zu unserer Firma.

Hinweis: Tatsächlich ist gemäss WCAG der Kontext ausreichend gegeben, wenn sich hilfreicher Text innerhalb desselben Paragrafen, Listenelements oder derselben Tabellenzelle befindet wie der Link. Das obige Beispiel <p>Erfahren Sie <a href="...">mehr über unsere Firma!

würde also ausreichen, wäre aber im genannten Screenreader-Szenario dennoch nicht hilfreich. Wir empfehlen deshalb, Linktexte stets unabhängig von ihrem Kontext selbstsprechend zu gestalten.

Weiteres: Links, welche auf andere Dateiformate verlinken (etwa PDF), sollten einen Hinweis auf den Formatwechsel enthalten. Zusätzlich wird dies idealerweise durch die Angabe der Grösse der verlinkten Datei ergänzt, etwa «Erklärungsdokument WCAG 2.1 (Word, 3MB)». Mehrere Links auf dasselbe Ziel sollten vermieden werden: etwa sollten bei einem News-Teaser nicht Datum, Titel und Foto separat verlinkt sein, sondern das gesamte Element als einzelner Link implementiert sein.

Verantwortlichkeiten

• Das Entwicklungsteam stellt sicher, dass generische Links angereichert werden mit aussagekräftiger (ggf. visuell versteckter) Information.
• Die Inhaltsverantwortlichen beschriften Links innerhalb von Text aussagekräftig und eindeutig.

WCAG-Text

Der Zweck jedes Links kann durch den Linktext allein oder durch den Linktext zusammen mit seinem durch Software bestimmten Link-Kontext bestimmt werden ausser in Fällen, in denen der Zweck des Links mehrdeutig für Benutzer im Allgemeinen wäre.

Code-Beispiel

<!-- Schlecht umgesetzter Teaser -->
<article>
  <a href="wahlergebnisse.html">
    <h2>Wahlresultate bekannt</h2><!-- Erste Verlinkung -->
  </a>

  <a href="wahlergebnisse.html">
    <time>Wahlergebnisse wurden publiziert</time><!-- Weitere (mehrfache) Verlinkung -->
  </a>

  <a href="wahlergebnisse.html">
    <img src="urne.jpg" alt="Urne"><!-- Weitere (mehrfache) Verlinkung -->
  </a>
</article>

<!-- Gut umgesetzter Teaser -->
<a href="wahlergebnisse.html"><!-- Einzelne Verlinkung -->
  <article>
    <h2>Wahlresultate bekannt</h2>

    <time>Wahlergebnisse wurden publiziert</time>

    <img src="urne.jpg" alt="Urne">
  </article>
</a>