EA-R13

Leerer Link

Diese Regel ist ein Fehler und testet folgende Barrierefreiheitsrichtlinien:

WCAG 1.1.1 Aussagekräftige Linktexte (Level A)

Hierbei handelt es sich um einen Fehler, welcher manuell behoben werden sollte.

Beschreibung

Diese Regel überprüft, dass jeder Link einen nicht leeren zugänglichen Namen hat.

Erklärung

Dieser Link hat keinen Inhalt und keine Verlinkung (href-Attribut).

Anwendbarkeit

Diese Regel gilt für jedes HTML-Element, das ein vererbender semantischer link ist, der im Zugänglichkeitsbaum enthalten ist.

Erwartung

Jedes Zielelement hat einen zugänglichen Namen, der nicht leer ist ("").

Annahmen

Die Regel geht davon aus, dass alle Links Komponenten der Benutzeroberfläche im Sinne der WCAG 2 sind. Wenn die Link-Rolle für Elemente verwendet wird, die sich nicht wie Links verhalten, bedeutet ein Scheitern dieser Regel möglicherweise nicht, dass die Erfolgskriterien nicht erfüllt sind.

Unterstützung für Barrierefreiheit

Es gibt Hilfstechnologien, die die Verwendung des title-Attributs für einen zugänglichen Namen nicht unterstützen, oder bei denen diese Funktion deaktiviert werden kann.
Für area-Elemente, die ein href-Attribut haben, aber nicht innerhalb eines map-Elements verschachtelt sind, gibt es Unterschiede zwischen Browsern und unterstützenden Technologien, ob der area in den Zugänglichkeitsbaum aufgenommen wird.
Die Implementierung von Presentational Roles Conflict Resolution variiert von einem Browser oder einer unterstützenden Technologie zum anderen. Abhängig davon können einige semantische link Elemente diese Regel mit einer bestimmten Technologie nicht erfüllen, aber Benutzer anderer Technologien werden keine Probleme mit der Zugänglichkeit haben.
Die Zugänglichkeitsunterstützung für einige Elemente, die die semantische Rolle von link erben (z.B. Elemente mit doc-* Attributen) kann je nach verwendeter assistiver Technologie variieren.

Hintergrund

Literaturverzeichnis

Tipp

Entfernen Sie leere Links.

Beispiele

Erfüllt

Beispiel 1 - Erfüllt

Dieses a Element hat einen zugänglichen Namen aus seinem Inhalt.

In neuem Tab öffnen

<a href="https://www.w3.org/WAI"> Web Accessibility Initiative (WAI) </a>

Beispiel 2 - Erfüllt

Dieses div Element hat eine explizite semantische Rolle von link und einen zugänglichen Namen von seinem Inhalt.

In neuem Tab öffnen

<div role="link" onclick="openLink(event)" onkeyup="openLink(event)" tabindex="0">
	Web Accessibility Initiative (WAI)
</div>
<script>
	function openLink(event) {
		if (event.type === 'click' || ['Enter', ' '].includes(event.key)) {
			window.location.href = 'https://www.w3.org/WAI/'
		}
	}
</script>

Beispiel 3 - Erfüllt

Dieses button Element hat eine explizite semantische Rolle von link und einen zugänglichen Namen von seinem Inhalt.

In neuem Tab öffnen

<button role="link" onclick="window.location.href='https://www.w3.org/WAI/'">Click me for WAI!</button>

Beispiel 4 - Erfüllt

Dieses a Element hat einen zugänglichen Namen über aria-label

In neuem Tab öffnen

<a href="https://www.w3.org/WAI"
	><img src="/test-assets/shared/w3c-logo.png" aria-label="Web Accessibility Initiative"
/></a>

Beispiel 5 - Erfüllt

Dieses a Element hat einen zugänglichen Namen über title.

In neuem Tab öffnen

<a href="https://www.w3.org/WAI" title="Web Accessibility Initiative"
	><img src="/test-assets/shared/w3c-logo.png" alt=""
/></a>

Nicht erfüllt

Beispiel 1 - Nicht erfüllt

Dieses a Element hat einen leeren zugänglichen Namen.

In neuem Tab öffnen

<a href="http://www.w3.org/WAI"></a>

Beispiel 2 - Nicht erfüllt

Dieses a Element mit einem Bild hat einen leeren zugänglichen Namen. Das Bild ist dekorativ und wird als solches mit einem leeren alt Attributwert markiert.

In neuem Tab öffnen

<a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" alt=""/></a>

Beispiel 3 - Nicht erfüllt

Dieses a Element mit einem Bild hat einen leeren zugänglichen Namen. Das Bild ist dekorativ, weil es einen role Attributwert von presentation hat.

In neuem Tab öffnen

<a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="presentation"/></a>

Beispiel 4 - Nicht erfüllt

Dieses a Element mit einem Bild hat einen leeren zugänglichen Namen. Das Bild ist dekorativ, weil es einen role Attributwert von none hat.

In neuem Tab öffnen

<a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="none"/></a>

Beispiel 5 - Nicht erfüllt

Dieses a Element mit einem img mit einem leeren title hat einen leeren zugänglichen Namen.

In neuem Tab öffnen

<a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" title=""/></a>

Nicht anwendbar

Beispiel 1 - Nicht anwendbar

Dieses a Element hat nicht die semantische Rolle link, weil es in button geändert wurde.

In neuem Tab öffnen

<a href="https://www.w3.org/WAI" role="button">
	Web Accessibility Initiative (WAI)
</a>

Beispiel 2 - Nicht anwendbar

Dieses a Element ist aufgrund von display: none nicht in den Accessibility Tree aufgenommen.

In neuem Tab öffnen

<a href="https://www.w3.org/WAI" style="display: none;"><img src="/test-assets/shared/w3c-logo.png"/></a>

Beispiel 3 - Nicht anwendbar

Dieses a Element ist nicht im Zugänglichkeitsbaum enthalten aufgrund von visibility: hidden.

In neuem Tab öffnen

<a href="https://www.w3.org/WAI" style="visibility: hidden;">Some text</a>

Eye-Able Audit Regel 13

Leerer Link

Beschreibung

Erklärung

Anwendbarkeit

Erwartung

Annahmen

Unterstützung für Barrierefreiheit

Hintergrund

Verwandte Regeln

Literaturverzeichnis

Tipp

Beispiele

Erfüllt

Beispiel 1 - Erfüllt

Beispiel 2 - Erfüllt

Beispiel 3 - Erfüllt

Beispiel 4 - Erfüllt

Beispiel 5 - Erfüllt

Nicht erfüllt

Beispiel 1 - Nicht erfüllt

Beispiel 2 - Nicht erfüllt

Beispiel 3 - Nicht erfüllt

Beispiel 4 - Nicht erfüllt

Beispiel 5 - Nicht erfüllt

Nicht anwendbar

Beispiel 1 - Nicht anwendbar

Beispiel 2 - Nicht anwendbar

Beispiel 3 - Nicht anwendbar

Danksagung

Ihre digitale Barrierefreiheit beginnt hier.

Über Eye-Able®

Entdecke

Quick Links

Nützliches

Kontakt