zurück zur Originalseite

Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Alternativtextoptimierung abhängig vom Code veröffentlicht in 2017zuletzt bearbeitet in

Die Herausforderung, die richtige Textalternative für eine Grafik zu formulieren, wird nicht alleine 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 typischen 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 verlinkt, und sowohl Grafik als auch ein Text im Teaser werden mit der gleichen Detailseite verknüpft. 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.2 verlangen, dass aktive Elemente der Webseite mit gleicher Funktionalität auch 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.2, aber insbesondere auf Webseiten, auf denen viele doppelte Links vorkommen, ist die Bedienung für Tastaturnutzende (einschließlich Screenreadernutzenden) unnötig erschwert.

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

Dialogfenster in JAWS 2018: Option 'Doppelte Links filtern'.

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

Leere Alternativtexte für Teaser-Grafiken

Es geht aber nicht alleine um Screenreadernutzende. Es gibt auch andere Nutzende, die per Tab-Taste durch eine Seite navigieren. Für sie besteht die Unannehmlichkeit, dass doppelt so viele Links vorhanden sind, wie eigentlich erforderlich.

Um die Zahl der Tab-Stopps 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 gibt es nur einen Tab-Stopp für den Teaser und Screenreader ignorieren die Grafik. 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 der Informationsgehalt eher beiläufig ist. 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änzen, sollte die Grafik nicht verlinkt sein.

<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 Klickfläche des Links vergrößert werden. Dazu ist zunächst ein Container für den Teaser erforderlich.

<article>
<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>
…
</article>

Mit folgendem CSS ist der vollständige Inhalt des article-Elements anklickbar:

article {
position:relative;
}
article a::after {
position:absolute;
inset:0;
content:'';
}

Überschriften leiten Abschnitte ein

Der Aufbau des Teasers mit einer der Überschrift vorangestellten Grafik hat einen "Schönheitsfehler": Überschriften sollten Abschnitte von Inhalten einleiten, um eine bedeutungsvolle Reihenfolge zu gewährleisten, während in einem typischen Aufbau eines Teasers die Überschrift der Grafik folgt. In einem Screenreader kann bei mehreren aufeinander folgenden Teasern die Zuordnung der Grafik zu einem Teaser uneindeutig sein:

Durch die Gruppierung mit dem article-Element erhalten Nutzende eine zusätzliche Information. Der Beginn und das Ende des article-Elements werden von Screenreadern erfasst und an Nutzende weitergegeben. Im letzten Code-Beispiel können Nutzende von Screenreadern feststellen, zu welcher Überschrift eine Grafik zugeordnet werden muss.

Auch wenn zusammengehörige Inhalte gruppiert werden, sollten Überschriften Abschnitte immer einleiten. Wenn Grafik und Überschrift in der Lesereihenfolge vertauscht werden, kann die visuelle Reihenfolge mit CSS verändert werden:

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

Das CSS kann wie folgt aussehen:

article header {
display:flex;
flex-direction: column-reverse;
}

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

zurück zur Originalseite