link-name-present

Links haben einen zugänglichen Namen

automaticWCAG 2.4.4, 2.4.9, 4.1.2 (AAA)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass Links einen nicht leeren zugänglichen Namen bereitstellen.

Anwendbarkeit. Gilt für <a href>, <area href> und Elemente, deren role-Attribut zu link aufgelöst wird (sein erstes Token, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen), die im Accessibility Tree enthalten sind. Ein <a> ohne href ist kein Link und wird nicht erfasst. Ein <a href>/<area href>, dessen explizite Rolle eine andere bekannte Rolle als link, eine von link erbende DPUB-Rolle, none oder presentation ist, ist kein Link und wird nicht erfasst (ACT c487ae, nicht anwendbares Beispiel 1). Ein Custom Element, dem seine ElementInternals die Rolle link geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, zählt wie ein natives Element mit dieser Rolle.

Erwartung. Das Element hat einen nicht leeren zugänglichen Namen. Zuerst wird ein programmatischer Name herangezogen (aria-labelledby, aria-label, ein zugeordnetes <label>, title); fehlt dieser, greift das Element auf den Text seines eigenen Teilbaums zurück. Dabei zählt der eigene Name jedes Nachfahren (ein <img alt>, aria-label oder title), die Form hinter dem verbreiteten Logo-Link <a><img alt="..."></a>. Der Rückgriff auf den Inhalt entfällt, wenn eine explizite, bekannte Rolle vorhanden ist, die ihren Namen nicht aus dem Inhalt bezieht (das erste bekannte Token der Fallback-Liste der Rolle); bei einem role-Attribut ohne bekanntes Token wird auf die implizite Rolle zurückgegriffen.

Was ein Befund meldet.

  • refs.accessibleName: was die Suche nach dem programmatischen Namen ergeben hat: present, value, mechanism (das Attribut oder Element, aus dem der Name käme, none, wenn es keins gibt) und flags (Hinweise, warum eine Quelle keinen Namen geliefert hat). null, wenn keine Suche stattfand.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

pass
<a href="/x">Read more</a>

Der Textinhalt des Links ist sein zugänglicher Name.

fail
<a href="/x"></a>

Kein Textinhalt, kein aria-label und kein aria-labelledby.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

name_closedContent

  1. Suchen Sie den im Bericht genannten Link und notieren Sie den Text oder das Symbol, das auf dem Bildschirm angezeigt wird.
  2. Öffnen Sie den Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und lesen Sie den zugänglichen Namen des Elements, den der Browser aus Inhalt ermittelt, den kein Skript lesen kann.
  3. Navigieren Sie mit einem Screenreader zum Element und hören Sie sich den angesagten Namen an.

Bestanden. Der Barrierefreiheitsbaum zeigt einen Namen für den Link, aus dem Inhalt gewonnen, und der Screenreader sagt ihn an.

Nicht bestanden. Der Link hat keinen Namen im Barrierefreiheitsbaum, da der Inhalt keinen ergibt; das verstößt gegen WCAG 2.4.4 und 4.1.2.

name_contentTooDeep

  1. Suchen Sie den im Bericht genannten Link und notieren Sie den auf dem Bildschirm angezeigten Text.
  2. Öffnen Sie den Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und lesen Sie den zugänglichen Namen des Elements, den der Browser aus seinem gesamten verschachtelten Inhalt ermittelt.
  3. Navigieren Sie mit einem Screenreader zum Element und hören Sie sich den angesagten Namen an.

Bestanden. Der Barrierefreiheitsbaum zeigt einen Namen für den Link, aus dem verschachtelten Inhalt gewonnen, und der Screenreader sagt ihn an.

Nicht bestanden. Der Link hat keinen Namen im Barrierefreiheitsbaum, da der Inhalt keinen ergibt; das verstößt gegen WCAG 2.4.4 und 4.1.2.

name_internals

  1. Untersuchen Sie den im Bericht genannten Link, ein benutzerdefiniertes Element, und notieren Sie die Rolle.
  2. Öffnen Sie den Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und lesen Sie den zugänglichen Namen des Elements.
  3. Navigieren Sie mit einem Screenreader zum Element und hören Sie sich den angesagten Namen an.

Bestanden. Der Barrierefreiheitsbaum zeigt einen Namen für den Link, über die Internals oder anders gesetzt, und der Screenreader sagt ihn an.

Nicht bestanden. Der Link hat keinen Namen im Barrierefreiheitsbaum, und der Screenreader sagt nur die Rolle an; das verstößt gegen WCAG 2.4.4 und 4.1.2.

Verwandte Regeln

Quellcode ansehen