button-name-present

Buttons haben einen zugänglichen Namen

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

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

Anwendbarkeit. Gilt für <button>, <input type="button">, <input type="submit">, <input type="reset"> und Elemente, deren role-Attribut zu button aufgelöst wird (sein erstes bekanntes, nicht abstraktes Token, ohne Berücksichtigung der Groß-/Kleinschreibung, sodass role="foo button" zählt und role="link button" nicht), sofern das Element im Accessibility Tree enthalten ist. role="presentation"/"none" nimmt ein Element aus dem Geltungsbereich, sofern nicht ein globales ARIA-Attribut oder die Fokussierbarkeit seine Rolle gemäß der Konfliktauflösung für präsentationale Rollen wiederherstellt. Ein Custom Element, dem seine ElementInternals die Rolle button 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 verwendet (aria-labelledby, aria-label, ein zugeordnetes <label>, title). Fehlt dieser, greift ein <input>-Button auf sein value-Attribut zurück, und type="submit"/type="reset" greifen auf den Standardwert des User Agents, „Submit“/„Reset“, zurück, weshalb diese beiden nie namenlos sind. Fehlt beides, greift ein Button, dessen Rolle den Namen aus dem Inhalt bezieht, auf den Text seines Teilbaums zurück und zählt dabei den eigenen Namen jedes Nachfahren (ein <img alt>, aria-label, das <title>-Kind eines <svg> oder title), nicht nur Textknoten.

Was ein Befund meldet.

refs.accessibleName: was die Suche nach einem programmatischen Namen (aria-labelledby, aria-label, <label>, title) ergeben hat. Darin ist mechanism die Quelle, bei der sie stehen geblieben ist, none, wenn es keine gab, und flags gibt an, warum ein vorhandenes Benennungsattribut keinen Namen geliefert hat, zum Beispiel aria-label-empty oder aria-labelledby-empty-or-unresolvable.

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

<button>Save</button>

Der Textinhalt des Buttons ist sein zugänglicher Name.

fail

<button></button>

Der Button hat keinen 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`

Suchen Sie die im Bericht genannte Schaltfläche und notieren Sie den Text oder das Symbol, das auf dem Bildschirm angezeigt wird.
Ö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.
Navigieren Sie mit einem Screenreader zum Element und hören Sie sich den angesagten Namen an.

Bestanden. Der Barrierefreiheitsbaum zeigt einen Namen für die Schaltfläche, aus dem Inhalt gewonnen, und der Screenreader sagt ihn an.

Nicht bestanden. Die Schaltfläche hat keinen Namen im Barrierefreiheitsbaum, da der Inhalt keinen ergibt; das verstößt gegen WCAG 4.1.2.

`name_contentTooDeep`

Suchen Sie die im Bericht genannte Schaltfläche und notieren Sie den auf dem Bildschirm angezeigten Text.
Ö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.
Navigieren Sie mit einem Screenreader zum Element und hören Sie sich den angesagten Namen an.

Bestanden. Der Barrierefreiheitsbaum zeigt einen Namen für die Schaltfläche, aus dem verschachtelten Inhalt gewonnen, und der Screenreader sagt ihn an.

Nicht bestanden. Die Schaltfläche hat keinen Namen im Barrierefreiheitsbaum, da der Inhalt keinen ergibt; das verstößt gegen WCAG 4.1.2.

`name_internals`

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

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

Nicht bestanden. Die Schaltfläche hat keinen Namen im Barrierefreiheitsbaum, und der Screenreader sagt nur die Rolle an; das verstößt gegen WCAG 4.1.2.

Quellcode ansehen