Stellen Sie sicher, dass Links mit demselben zugänglichen Namen einen ähnlichen Zweck erfüllen
Web-Accessibility-Richtlinien besagen, dass Links mit demselben zugänglichen Namen einen ähnlichen Zweck erfüllen sollten.
Warum es wichtig ist
Wenn Links mit demselben Namen unterschiedliche Ziele haben, kann dies für Nutzer von Screenreadern verwirrend sein. Konsistente und aussagekräftige Linkbeschreibungen helfen Nutzern, schnell zu entscheiden, welche Links sie anklicken möchten.
Behebung des Problems
Um Verwirrung bei Benutzern zu vermeiden, müssen identische Links denselben Zweck beschreiben.
Diese Korrektur stellt sicher, dass Benutzer entscheiden können, ob sie einem Link folgen möchten.
Gute Codebeispiele
Linkzweck durch „aria-label“ klarstellen:
<h4>Nachbarschafts-Nachrichten</h4>
<p>
Steuererhöhung in Seminole: Die Stadtmanager von Seminole schlagen eine 75%ige Erhöhung der Grundsteuern für das kommende Haushaltsjahr vor.
<a href="steuererhoehung.html" aria-label="Mehr über die Steuererhöhung in Seminole lesen">[Mehr lesen...]</a>
</p>
<p>
Baby-Bürgermeister: Die Wähler von Seminole wählen den jüngsten Bürgermeister der Stadt, indem sie gestern den 3-jährigen Willy "Dusty" Williams zum Bürgermeister wählen.
<a href="babybuergermeister.html" aria-label="Mehr über den neuen Baby-Bürgermeister von Seminole lesen">[Mehr lesen...]</a>
</p>
Kopieren Beschreibung des Zwecks eines Links in HTML im Textinhalt des Elements:
Bereitstellung eines Linktextes, der den Zweck eines Links für Ankerelemente beschreibt:
Beispiel 1: Beschreibung des Zwecks eines Links in HTML im Textinhalt des a-Elements.
Beispiel 2: Verwenden des Alt-Attributs für das Img-Element, um den Zweck eines grafischen Links zu beschreiben.
<a href="routes.html">
<img src="topo.gif" alt="Aktuelle Routen in der Boulders Kletterhalle" />
</a>
Kopieren Beispiel 3: Verwenden Sie ein leeres Alt-Attribut, wenn das Ankerelement (a) zusätzlich zum Bildelement Text enthält, der den Zweck des Links beschreibt. Beachten Sie, dass der Linktext auf der Seite neben dem Bild angezeigt wird.
<a href="routes.html">
<img src="topo.gif" alt="" />
Aktuelle Routen in der Boulders Kletterhalle
</a>
Kopieren Beispiel 4: Eine Website ermöglicht es angemeldeten Nutzern, Feedback zu Produkten zu geben, indem sie auf der Produktdetailseite auf den Link „Feedback“ klicken. Andere Nutzer oder der Hersteller können auf das Feedback reagieren.
Der Feedback-Link zeigt vor dem „Feedback“-Text ein Symbol an, wenn eine Antwort auf das Feedback des Nutzers verfügbar ist. Die Hilfe beschreibt dieses Symbol als Sprechblase mit Anführungszeichen und zeigt das Symbol selbst als Beispiel an.
Die Textalternative für das Symbol im Hilfetext lautet „Symbol für erhaltene Antwort“. Dieselbe Textalternative wird auf den Produktdetailseiten verwendet (sofern eine Antwort verfügbar ist), um die Identifizierung dieses Symbols über mehrere Modalitäten hinweg zu ermöglichen.
<a href="prod_123_feedback.htm">Feedback
<img src="response.gif" width="15" height="15" alt="Symbol „Antwort erhalten“ /></a>
Kopieren Beispiel 5: Ein Link enthält Text und ein Symbol und das Symbol bietet zusätzliche Informationen zum Ziel.
<a href="WMFP.pdf">
Programm des Woodend Musikfestivals
<img src="pdficon.gif" alt="PDF-Format"/>
</a>
Kopieren Beispiel 6: Der Jahresbericht des Unternehmens „MyCorp“ wird auf der Unternehmenswebsite als PDF-Datei bereitgestellt und das jährliche Unternehmensbudget wird auf der Website als Excel-Datei bereitgestellt.
<p>
<a href=”2009mycorp_report.pdf”>MyCorp Jahresbericht 2009 (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp Jahresbudget 2009 (Excel)</a>
</p>
Kopieren Beispiel 7: Verwenden eines Links zum Umschließen von Elementen auf Blockebene in HTML5.
<article>
<a href="news.html">
<h3>Haushaltsdebatte im Parlament geht weiter</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Die Abgeordneten setzten die intensive Debatte über drei heikle Themen rund um den Haushalt des kommenden Jahres fort.</p>
<p>Weiterlesen</p>
</a>
</article>
Kopieren Testfälle
Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.