Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Alternativtextoptimierung abhängig vom Code veröffentlicht in 2017

Teaser-Grafiken

Die Herausforderung, die richtige Textalternative für eine Grafik zu formulieren, wird nicht nur durch die Inhalte in der Grafik oder den Kontext bestimmt. Auch der Code kann die Anforderung an den Alternativtext beeinflussen.

Als Beispiel soll eine Teaser-Grafik in einem typischen Anreißertext dienen:

Screenshot eines Teasers: links ein Bild und rechts eine Überschrift, eine kurze Beschreibung und ein Link

Welcher Alternativtext sollte für die Grafik vergeben werden? Die meisten Personen würden einen Text der Art "Hand, die zwischen mehreren Fotos auswählt" – also einen identifizierenden Alternativtext – wählen.

Häufig sind Teaser-Grafiken aber auch anklickbar, und sowohl Grafik als auch Überschrift werden beide mit der gleichen Detailseite verlinkt. Verlinkte Grafiken benötigen generell einen funktionalen Alternativtext, der den Linkzweck bestimmen lässt.

Funktionale Alternativtexte für verlinkte Teaser-Grafiken

Wenn der Überschriftentext den Zweck des Links – also den Aufruf der verlinkten Seite – bestimmen lässt, dann ist der Überschriftentext ein geeigneter funktionaler Alternativtext für die Grafik. Dazu kommt, dass die Web Content Accessibility Guidelines (WCAG) 2.0 verlangen, dass Komponenten der Webseite mit gleicher Funktionalität auch Intern: konsistent bezeichnet werden.

<p><a href="kommentieren.html"><img src="textalternativen.jpg" alt="Textalternativen für Grafiken"></a></p>
<h2><a href="kommentieren.html"> Textalternativen für Grafiken</a></h2>

Dass jetzt zwei Links mit gleichem Namen aufeinander folgen, ist zwar konform zur WCAG 2.0, aber insbesondere auf Webseiten, auf denen viele doppelte Links vorkommen, ist die Bedienung für Tastaturnutzer (einschließlich Screenreadernutzer) unnötig erschwert.

Die Problematik der doppelten Links haben Screenreader im Übrigen auf dem Schirm. Im Screenreader JAWS 2018 können Linkwiederholungen ignoriert werden:

Dialogfenster für Links im Web in JAWS 2018 mit der Option 'Doppelte Links filtern' Nutzer können die Option aktivieren

Ist die Checkbox aktiviert, ignoriert der Screenreader in bestimmten Situationen die Linkwiederholungen vollständig.

Leere Alternativtexte für Teaser-Grafiken

Um die Zahl der Tabstopps für Teaser zu halbieren können Bild und Überschrift in einem Link ausgespielt werden. Es sollte jetzt ein leerer Alternativtext eingesetzt werden, weil der Link bereits einen Namen hat, der Auskunft über den Linkzweck gibt:

<h2><a href="kommentieren.html"><img src="textalternativen.jpg" alt="">
Textalternativen für Grafiken</a></h2>

Jetzt wird die Grafik von Screenreadern ignoriert. Für viele Teaser-Grafiken ist eine solche Vorgehensweise sinnvoll, denn der Informationsgehalt von Teaser-Grafiken ist meist gering. Der eigentliche Zweck solcher Grafiken ist es, die visuelle Aufmerksamkeit des Nutzers auf bestimmte Inhalte zu lenken.

Dennoch bieten manche Teaser-Grafiken einen Inhalt, auch wenn es "lediglich" in der Konkretisierung des Überschriftentextes besteht. Auch wenn die Grafik auf der Folgeseite genauer erläutert wird, stellt sich die berechtigte Frage, ob nicht doch eine identifizierende Textalternative für die Teaser-Grafik eingesetzt werden soll.

Teaser-Grafiken können doch identifizierende Textalternativen erhalten

Um Teaser-Grafiken mit identifizierenden Textalternativen zu ergänzend, sollte die Grafik nicht als Link ausgezeichnet werden.

<p><img src="textalternativen.jpg" alt="Hand, die zwischen mehreren Fotos auswählt"></p>
<h2><a href="kommentieren.html"> Textalternativen für Grafiken</a></h2>

Sollte die Grafik per Mauszeiger anklickbar, aber für die Tastaturbedienung nicht fokussierbar sein, so kann die Grafik verlinkt werden und der Link mit tabindex="-1" aus der Fokus-Reihenfolge entfernt werden.

Allerdings reicht diese Maßnahme nicht aus. Mit tabindex="-1" verhindert der Browser zwar, dass der Link fokussiert werden kann, aber semantisch handelt es sich immer noch um einen Link; imIntern: Accessibility-Tree des Betriebssystems legt der Browser nach wie vor einen Link ab. Für Screenreader steht an der Stelle eine verlinkte Grafik, die einen identifizierenden (und kein funktionalen) Alternativtext aufweist.

Mit role="none" kann dem Browser angewiesen werden, die Semantik eines Elements nicht an den Accessibility-Tree zu übertragen. Screenreader erhalten jetzt eine nicht-verlinkte Grafik mit identifizierendem Alternativtext:

<p><a href="kommentieren.html" tabindex="-1" role="none"><img src="textalternativen.jpg" alt="Hand, die zwischen mehreren Fotos auswählt"></a></p>
<h2><a href="kommentieren.html"> Textalternativen für Grafiken</a></h2>

Hinweis: Die Entfernung des Links aus der Fokus-Reihenfolge sowie die Entfernung der Semantik des Links stützt sich auf moderne Techniken, die nicht in jeder Extern: Browser-Screenreader-Kombination unterstützt werden.

Überschriften leiten Inhalte ein

Der Aufbau des Teasers mit einer der Überschrift vorangestellten Grafik hat einen "Schönheitsfehler": Überschriften sollten Inhalte einleiten, um eine Intern: bedeutungstragende Reihenfolge zu gewährleisten, während in einem typischen Aufbau eines Teasers die Überschrift auf die Grafik folgt. Vor allem wenn die Grafik als Link ausgespielt wird kann bei mehreren aufeinander folgenden Teasern die Zuordnung der Grafik zu einem Teaser in einem Screenreader problematisch werden:

Auch hierfür gibt es Lösungen. Wenn Grafik und Überschrift im HTML vertauscht werden:

<div class="teaser-header">
  <h2><a href="kommentieren.html"> Textalternativen für Grafiken</a></h2>
  <p><a href="kommentieren.html" tabindex="-1" role="none"><img src="textalternativen.jpg" alt="Hand, die zwischen mehreren Fotos auswählt"></a></p>
</div>

kann die visuelle Reihenfolge mit CSS verändert werden:

.teaser-header {
  display:flex;
  flex-direction: column-reverse;
  // flex-direction: row-reverse;
}

Jetzt erhalten Screenreader und Sprachausgaben eine Überschrift gefolgt von einer Grafik, visuell wird dank des Flexbox-Modells die Grafik aber vor der Überschrift angezeigt.

Lese-Tipps

Zur Pflichtlektüre über Textalternativen gehören: