Zweiter Blick: Links barrierefrei

BarrierefreiheitDarstellungsoptionen



Textlinks barrierefrei

Bedeutung von reinen Textlinks

Als reine Textlinks bezeichne ich Links, die unmittelbar über eine textuelle Beschriftung verfügen. Im Gegensatz dazu sind Grafiklinks erst einmal ein Bild, das zu verlinkten Inhalten führt.

Vorteile bei körperlichen Beeinträchtigungen

Es sind die Links, die das Internet so attraktiv machen. Um einen Ausdruck nachzuschlagen oder sich in einen neuen Inhalt zu vertiefen, ist kein Gang zum Bücherschrank erforderlich. Es genügt ein Klick, um zu neuen Inhalten zu gelangen.

Gerade für Menschen mit Sehbeeinträchtigungen oder mit körperlichen Einschränkungen bietet das Internet enorme Vorteile. Gedruckte Unterlagen aus dem Bücherregal zu holen ist oft ohne persönliche Assistenz nur mühsam oder gar nicht möglich. Und für blinde Menschen gestaltet sich ein selbständiges Nachschlagen in analogen Werken nur höchst mühsam und uneffizient.

Linktypen nach deren Kontextabhängigkeit

Zur Unterscheidung der Anforderungen an die barrierefreie Umsetzung scheint mir folgende Differenzierung von Linktypen nach deren Auftreten im Kontext von Relevanz:

Blocklinks
Als Blocklinks bezeichne ich Links, die für sich allein stehen, gegebenenfalls in einem eigenen Absatz oder als Teil einer Linkliste in einem Listenelement (<li>) erscheinen.
Kontextuelle Links
Als kontextuelle Links bezeichne ich Links, die sich in innerhalb eines anderen Blockelements (Absatz, Listenelement) befinden (In-Line Links).
Tabellarische Links
Als tabellarische Links bezeichne ich Links, die eine ganze Tabellenzelle einnehmen (<td>) und deren Bedeutung sich aus Zeilen- oder Spaltenüberschrift erschließt. Sie sind eine Mischung aus Blocklink und kontextuellem Link.

Textliche Gestaltung von Links

WCAG Anforderungen an die textliche Gestaltung von Links

In den WCAG wird die Linkbeschriftung als verständlicher Linkzweck behandelt, sei es im Kontext (Erfolgskriterium 2.4.4 (Konformitätsstufe Level A)) oder allein stehend (Erfolgskriterium 2.4.9 Konformitätsstufe Level AAA).

Blocklinks beschriften

Da Blocklinks für sich einen ganzen Absatz oder ein Listenelement darstellen, muss der Text des Links für sich stehend den Linkzweck wiedergeben. Die Beschriftung des Links soll also möglichst knapp und präzise den Inhalt der Zielseite angeben.

Als Faustregel wird sich die Linkbeschriftung am Seitentitel oder der Formulierung der Überschrift der verlinkten Seite orientieren. Voraussetzung ist natürlich, dass diese selbst aussagekräftig den Inhalt erfassen.

Der Text des Links zu einzelnen verlinkten Seiten sollte innerhalb eines Webauftritts möglichst einheitlich gestaltet werden.

Kontextuelle Links beschriften

Ausdrücke zum Nachschlagen

Auf Wikipedia und auch auf den Seiten von Zweiter Blick finden sich im Hauptinhalt (<main>-Bereich) innerhalb eines Absatzes immer wieder Links zu einzelnen Ausdrücken. Diese erlauben es, unbekannte Ausdrücke nachzuschlagen oder zu einem einzelnen Punkt weiterführende Informationen zu erhalten. Die Linkbeschriftung besteht in diesem Fall aus dem Ausdruck oder einer Kurzbeschreibung des Inhalts, wie sie auch in einer Abschnittsüberschrift formuliert sein könnte.

Mehr und Hier

Problematischer sind kontextuelle Links, die lediglich aus der Beschriftung mehr oder hier bestehen. Im folgenden ein Beispiel dazu:

Details zur Geschichte Tirols finden sie hier.

Der Code dazu sieht folgendermaßen aus:

<p>Details zur Geschichte Tirols finden sie <a href="geschichte.html">hier</a>.</p>

Da sich der Link im unmittelbaren Kontext eines <p>-Tags befindet, aus dem sich der Linkzweck erschließt, sind die Anforderungen an Erfolgskriterium 2.4.4 (Konformitätsstufe Level A) erfüllt.

Das Erfolgskriterium 2.4.9 Konformitätsstufe Level AAA verlangt darüber hinaus, das sich der Linkzweck alleine aus der Beschriftung erschließt. Der Link müsste also etwa folgendermaßen dargestellt werden:

Mehr zur Geschichte Tirols.

Tabellarische Links beschriften

Wenn eine Datentabelle zur übersichtlichen Darstellung von einer größeren Anzahl von Links verwendet wird, muss sich der genaue Linkzweck aus der jeweiligen Spalten- bzw. Zeilenüberschrift erschließen.

Visuelle Darstellung von Links

Kontraste für alle Linkzustände

Visuelle Zustände können sich bei Links ändern, wenn diese schon einmal besucht wurden, der Mauszeiger gerade darüber streicht (HOVER-Effekt) oder sich der Fokus gerade darauf befindet.

Der Helligkeitskontrast zwischen Schriftfarbe und Hintergrund muss auch bei besuchten Links oder Effekten gewährleistet bleiben. Wenn besuchte Links ausgegraut werden, muss sich durch Fokus- oder HOVER-Effekte der Kontrast ausreichend verstärken.

Es ist auch darauf zu achten, dass bei alternativen Angeboten für die visuelle Darstellung (Kontrastmodus oder Inversmodus, ...) für alle Linktypen ein adäquates Kontrastschema verfügbar ist.

Links unterstreichen

Dass es sich um einen Link handelt, muss visuell wahrnehmbar sein. Für Navigationslisten wird dies üblicherweise aus dem Kontext, etwa der Positionierung im Kopfbereich oder an einem Seitenrand verständlich sein.

Für kontextuelle Links innerhalb eines Textes im Hauptinhalt hat es sich eingebürgert, Links mit einer Unterstreichung zu versehen. Eine rein farbliche Differenzierung würde Probleme bei Farbfehlsichtigkeiten verursachen oder mangelhafte Helligkeitskontraste zwischen Schriftfarbe und Hintergrund.

Fokuseffekte für Links

Browser ermöglichen es, mit der Tabulator-Taste von Schaltfläche zu Schaltfläche zu springen. Sehende Menschen, die auf diese Weise Webseiten mit der Tastatur bedienen, sind darauf angewiesen, dass das Link deutlich erkennbar ist, auf dem sich der Fokus jeweils befindet.

Browser verfügen über Indikatoren für den Fokus. Deren Sichtbarkeit kann durch deutlichere Fokuseffekte jedoch verbessert werden.

Visuelle Effekte werden zweckmäßig in einer Zentralen CSS-Datei gespeichert. Der Code für den auf Zweiter Blick erscheinenden Effekt sieht folgendermaßen aus:

a:focus { background-color: yellow; color: black; border-bottom: black dotted 1px; }

Größe der Schaltflächen

Es ist fein, wenn die Bedienfläche für die Maus oder am Touch Screen möglichst maximiert wird. Insbesondere bei motorischen Beeinträchtigungen stoßen wir ansonsten auf Bedienungsprobleme, sei es wegen persönlicher Einschränkungen oder widriger Umstände, etwa auf einer holprigen Zugstrecke.

In den WCAG 2.1 wurde für Schaltflächen wohl im Hinblick auf Smart Phones eine Mindestgröße von 44 × 44 Pixel eingeführt, sofern sich die Schaltfläche nicht innerhalb eines Textes befindet.

Ich erweitere auf Zweiter Blick die horizontale Bedienfläche für Blocklinks mittels der CSS-Anweisung display: block; auf die gesamte verfügbare Bildschirmbreite für den jeweiligen Bereich.

Optimierung für Screen Reader

Screen Reader verfügen über Funktionalitäten, eine Liste aller Links einer Webseite in einem eigenen Dialogfenster darzustellen. Das Drücken eines Buchstabens führt in dieser Liste zum ersten Link mit dem jeweiligen Buchstaben am Anfang. Das Drücken von K führt beispielsweise zu Kontakt, Kommentar, usw. jeweils in der Reihenfolge des Auftretens im Code der Webseite. Dies ist für Nutzer von Screen Readern eine wertvolle Navigationshilfe.

Deshalb sollten folgende textuelle Gestaltungen in der Regel vermieden werden:

  • Die Geschichte Tirols
  • Hier geht’s zur Geschichte Tirols
  • Mehr zur Geschichte Tirols
  • Geschichte Tirols

Ansonsten liefert der Screen Reader eine Liste hauptsächlich mit den Anfangsbuchstaben D, H und M oder gar Sonderzeichen, die nicht direkt angesprungen werden können.

Es genügt jeweils Geschichte Tirols als Beschriftung des Links und das kommt auch der Nutzung von Screen Readern entgegen.

Empfehlungen

Empfehlungen für die Gestaltung von rein textuellen Links

Ich füge meine alte, mittlerweile überarbeitungsbedürftige Checkliste für Links im Folgenden an.

  1. Es muss visuell wahrnehmbar sein, dass es sich um ein Link handelt.
  2. Es muss visuell wahrnehmbar gemacht werden, wenn sich der Fokus auf dem Link befindet.
  3. Es sollte visuell wahrnehmbar sein, wenn sich die Maus über dem Link befindet (HOVER-Effekte).
  4. Der Kontrast sollte bei allen Linkzuständen (auch besucht, HOVER- oder Fokuseffekt) ausreichend sein.
  5. Der Text des Links soll möglichst knapp und präzise den Inhalt der Zielseite angeben.
  6. Der Text des Links zu einzelnen verlinkten Seiten soll innerhalb eines Webauftritts einheitlich sein.
  7. Handelt es sich um eine liste von Links, sollte die Liste mit dem entsprechenden Mark Up realisiert werden.
  8. Der Link sollte sich nicht automatisch in einem neuen Fenster öffnen
  9. Es ist fein, wenn die Bedienfläche für die Maus möglichst maximiert wird.
  10. Es ist für Nutzer von Screenreadern bei der Navigation fein, wenn der Text des Links nicht mit einem Sonderzeichen oder Artikel beginnt oder Einleitungen, wie „Hier geht’s zum …".