Techniken für WCAG 2.0

Zum Inhalt

-

H2: Kombination nebeneinander liegender Bild- und Textlinks für die gleiche Ressource

Anwendbarkeit

HTML- und XHTML-Dokumente, die Links enthalten.

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, eine unnötige Duplizierung zu vermeiden, die auftritt, wenn nebeneinander liegender Text und Symbolversionen von Links in einem Dokument enthalten sind.

Bei viele Arten von Links liegen sowohl einen Text als auch einen Symbol-Link nebeneinander. Oft werden Text und Symbol in unterschiedlichen Links gerendert, zum Teil, um eine geringfügige visuelle Trennung voneinander herzustellen. Visuell scheinen sie der gleiche Link zu sein, aber sie werden von vielen Menschen als zwei identische Links wahrgenommen, was verwirrend sein kann. Um dies zu vermeiden, lassen manche Autoren den Alternativtext des Bildes weg, aber dies wäre ein Fehler bei Erfolgskriterium 1.1.1, da die Textalternative nicht den gleichen Zweck erfüllen würde wie der grafische Link. Die bevorzugte Methode, um dies zu adressieren ist es, Text und Bild in einem Link aneinander zu fügen und keinerlei Textalternative für das Bild zur Verfügung zu stellen, um die Verdopplung auszuschließen.

Manchmal werden der Text- und der Symbol-Link in unterschiedlichen, nebeneinander liegenden Tabellenzellen gerendert, um das Seiten-Layout zu begünstigen. Obwohl die WCAG 2 die Benutzung von Layout-Tabellen nicht verbieten, werden CSS-basierte Layouts empfohlen, um die definierte, semantische Bedeutung der HTML-Tabellen-Elemente zu bewahren und konform zur Programmier-Praxis der Trennung von Präsentation und Inhalt zu sein. Wenn CSS benutzt wird, kann diese Technik angewendet werden, um die Links zu verknüpfen.

Beispiele

Beispiel 1

Das Symbol und der Text sind im gleichen a-Element enthalten.

Code-Beispiel:

			 <a href="products.html">
   <img src="icon.gif" alt="" />
   Products page
 </a>      

Beispiel 2

Ein Link enthält ein Symbol und Text und die Hilfe der Site bezieht sich auf das Symbol. Das img hat eine Textalternative, bei der es sich um den Namen handelt, der für das Symbol in der Hilfe der Site benutzt wird und der das Anklicken des Homepage-Symbols beschreibt.

Code-Beispiel:

			<a href="foo.htm">
  <img src="house.gif" alt="home page icon"/>
  Go to the home page
</a>     

Fehler-Beispiel 3

Dieses Beispiel demonstriert ein Versagen bei der Anwendung dieser Technik. Ein Symbol- und ein Text-Link sind nebeneinander. Die Textalternative für das Bild und der Textlink daneben lauten gleich, was zu einem „Stotter“-Effekt, da der Link zweimal gelesen wird.

Code-Beispiel:

				<a href="products.html">
   <img src="icon.gif" alt="Products page" />
 </a>
 <a href="products.html">
   Products page
 </a>  

Fehler-Beispiel 4

Dieses Beispiel demonstriert ein Versagen bei der Anwendung dieser Technik. Ein Symbol- und ein Text-Link sind nebeneinander. In dem Bemühen, das Stottern zu entfernen, ist die Textalternative für das Bild leer. Allerdings hat nun einer der Links ein unbekanntes Ziel, was sein eigenes Linktext-Problem ist.

Code-Beispiel:

				<a href="products.html">
   <img src="icon.gif" alt="" />
 </a>
 <a href="products.html">
   Products page
 </a>     

Fehler-Beispiel 5

Dieses Beispiel demonstriert eine fehlerhafte Implementierung dieser Technik. Das Symbol und der Text sind im gleichen a-Element enthalten. Allerdings ist die Textalternative für das Symbol ein Duplikat des Linktextes, was zu einem "Stotter"-Effekt führt, der die Beschreibung zweimal gelesen wird.

Code-Beispiel:

				<a href="products.html">
  <img src="products.gif" alt="Products page"/>
  Products page
</a>    
            

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für jedes a im Inhalt, der ein img-Element enthält:

  1. Prüfen Sie, ob es kein daneben liegendes a-Element gibt, welches das gleiche href-Attribut und die gleiche Beschreibung hat

Für jedes a im Inhalt, das in einer Tabelle enthalten ist:

  1. Prüfen Sie, dass es kein a-Element in einer daneben liegenden Tabellenzelle gibt, welches das gleiche href-Attribut und die gleiche Beschreibung hat.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.