Techniken für WCAG 2.0

Zum Inhalt

-

H30: Bereitstellung eines Linktextes, der den Zweck eines Links bei anchor-Elementen beschreibt

Anwendbarkeit

HTML- und XHTML-Dokumente, die Links enthalten, (<a href>-Elemente)

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist, den Zweck eines Links zu beschreiben, indem man einen beschreibenden Text als Inhalt des a-Elements zur Verfügung stellt. Die Beschreibung lässt einen Benutzer diesen Link von anderen Links auf der Webseite unterscheiden und hilft dem Benutzer zu bestimmen, ob er dem Link folgt. Der URI des Ziels ist im Allgemeinen nicht ausreichend deskriptiv.

Wenn ein Bild der einzige Inhalt eines Links ist, dann beschreibt die Textalternative für das Bild die spezifische Funktion des Links.

Wenn der Inhalt eines Links sowohl Text als auch eines oder mehrere Bilder enthält und falls der Text ausreichend ist, um den Zweck des Links zu beschrieben, dann können die Bilder eine leere Textalternative haben. (Siehe H67: Weglassen des alt-Textes und des title-Attributs für img-Elemente bei Bildern, die von assistierenden Techniken ignoriert werden sollen (HTML) .) Wenn die Bilder Informationen vermitteln, die über den Zweck des Links hinausgehen, dann müssen sie auch einen angemessenen alt-Text haben.

Beispiele

Beispiel 1

Beschreibung des Zwecks eines Links in HTML im Textinhalt des a-Elements.

Code-Beispiel:

			<a href="routes.html">
  Current routes at Boulders Climbing Gym
</a>

Beispiel 2

Benutzung des alt-Attributs für das img-Element, um den Zweck eines grafischen Links zu beschreiben.

Code-Beispiel:

			<a href="routes.html">
   <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> 
</a> 

Beispiel 3

Benutzung eines leeren alt-Attributs, wenn das Anchor-(a)-Element Text enthält, der neben dem img-Element den Linkzweck beschreibt. Beachten Sie, dass der Linktext auf der Seite neben dem Bild erscheinen wird.

Code-Beispiel:

			<a href="routes.html">
  <img src="topo.gif" alt="" />
  Current routes at Boulders Climbing Gym
</a>

Beispiel 4

Eine Site erlaubt es Benutzern, Feedback zu Produkten zu geben, wenn der Benutzer eingeloggt ist, indem man auf den „Feedback“-Link einer Produkt-Detailseite klickt. Andere Benutzer oder der Hersteller des Produktes können eine Antwort auf jegliches Feedback geben. Der Feedback-Link zeigt ein Symbol vor dem „Feedback“-Text an, wenn es eine Antwort zum Feedback des Benutzers gibt. In der Hilfe wird dieses Symbol als Sprechblase beschrieben, die Anführungszeichen enthält und das Symbol selber ist als Beispiel enthalten. Die Textalternative des Symbols im Hilfetext lautet: „Antwort erhalten-Symbol“. Die gleiche Textalternative wird auf der Produkt-Detailseite benutzt (wenn es eine Antowrt gibt), um die Erkennbarkeit dieses Symbols durch mehrere Modalitäten zu ermöglichen.

Code-Beispiel:

			<a href="prod_123_feedback.htm">Feedback <img src="response.gif" width="15" height="15" alt="Response received icon" /></a>

Beispiel 5

Ein Link enthält Text und Symbol und das Symbol gibt zusätzliche Informationen zum Ziel.

Code-Beispiel:

			<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>

Beispiel 6

Der Jahresbericht der Firma „MyCorp“ wird auf der Firmen-Website als PDF-Datei zur Verfügung gestellt und das jährliche Firmenbudget wird als Excel-Datei auf der Website bereitgestellt.

Anmerkung: Viele Benutzer ziehen es vor, den Dateityp zu kennen, wenn sie eine Datei öffnen und das dazu führt, dass eine neue Anwendung geöffnet wird, um die Datei anzusehen; daher wird es oft als nützlich angesehen, diese zusätzlichen Informationen aufzunehmen. Dies ist allerdings für die Konformität mit diesem Erfolgskriterium nicht notwendig.

Code-Beispiel:

			<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für jeden Link im Inhalt, der sich dieser Technik bedient:

  1. Prüfen Sie, ob in dem a-Element Text oder eine Textalternative für Nicht-Text-Inhalt enthalten ist.

  2. Wenn ein img-Element der einzige Inhalt des a-Elements ist, prüfen Sie, ob die Textalternative den Linkzweck beschreibt

  3. Wenn das a-Element ein oder mehrere img-Element(e) enthält und die Textalternative der/des img-Elements/Elemente leer ist, prüfen Sie, ob der Text des Links den Linkzweck beschreibt

  4. Wenn das a-Element nur Text enthält, prüfen Sie, ob der Text den Linkzweck beschreibt

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.