Techniken für WCAG 2.0

Zum Inhalt

-

F89: Fehler bei den Erfolgskriterien 2.4.4, 2.4.9 und 4.1.2, weil ein leeres alt bei einem Bild benutzt wird, wenn das Bild der einzige Inhalt in einem Link ist

Anwendbarkeit

Inhalt, der Links enthält.

Dieser Fehler bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Verschiedene assistierende Techniken verwenden unterschiedliche Reparatur-Strategien, wenn sie es mit Links zu tun haben, denen einen Textalternative fehlt. Bei HTML kann es sein, dass sie, wenn vorhanden, das title-Attribut des anchor oder den Wert des src-Attributs des img-Elements benutzen.

Beschreibung

Diese Fehlersituation tritt auf, wenn ein Link nur Nicht-Text-Inhalt enthält, wie z.B. ein Bild, und der Nicht-Text-Inhalt so implementiert wurde, dass er von assistierenden Techniken ignoriert werden kann. Da es sich bei einem Link um ein interaktives Steuerelement handelt, kann der Benutzer per Tab dorthin gehen und es aktivieren. Da es innerhalb des Links keinen Text-Inhalt gibt, der als Name benutzt werden kann, verwenden assistierende Techniken eine Vielzahl an Reparatur-Techniken, um irgendeinen Namen zu finden, den sie für den Link benutzen können.

Oft werden auf einer Seite sowohl Text als auch Bilder benutzt, um zu dem gleichen Ziel zu verlinken. Dies führt zu einem „Stotter“-Effekt, wenn zwei nahezu identische (zwei nahe beieinander liegende) Links den gleichen Namen haben und Autoren versuchen, die Redundanz zu entfernen, indem sie ein leeres alt-Attribut für das Bild bereitstellen. Dies macht das Problem leider oft schlimmer. H2: Kombination nebeneinander liegender Bild- und Textlinks für die gleiche Ressource (HTML) ist die empfohlene Herangehensweise, um die Anzahl an separaten Links und die unerwünschte Redundanz zu reduzieren.

Beispiele

Fehlerbeispiel 1: HTML-Suchergebnisse

Eine Such-Site gibt Suchergebnisse zurück, die sowohl einen Text- als auch einen Bild-Link zu der Treffer-Site beinhalten. Das Bild hat ein leeres alt-Attribut, da das Ergebnis bereits einen Link mit einer Textbeschreibung enthält. Der Screenreader ignoriert den Bild-Link allerdings nicht, sondern benutzt Heuristik, um irgendeinen Text zu finden, der den Zweck des Links beschreiben könnte. Der Screenreader könnte beispielsweise ansagen: „football dot gif Football Scorecard“.

Code-Beispiel:

				 <a href="scores.html">
   <img src="football.gif" alt="" />
 </a>
 <a href="scores.html">
   Football Scoreboard
 </a>
}

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob der Link nur Nicht-Text-Inhalt enthält.

  2. Prüfen Sie, ob der Nicht-ext-Inhalt so implementiert wurde, dass er von assistierenden Techniken ignoriert werden kann.

Erwartete Ergebnisse