aria-role-name-present

ARIA-Rollen, die einen zugänglichen Namen erfordern, haben einen

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass die ARIA-Rollen, für die WAI-ARIA einen zugänglichen Namen verlangt, einen nicht leeren Namen bereitstellen.

Anwendbarkeit. Gilt für Elemente, deren role-Attribut zu einer von grid, meter, progressbar, radiogroup oder tree aufgelöst wird (sein erstes Token, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen: role="foo tree" und role="TREE" zählen, role="link tree" nicht) und die im Accessibility Tree enthalten sind. Die Zugehörigkeit richtet sich nach der WAI-ARIA-eigenen Eigenschaft „Accessible Name Required: True“, nicht danach, ob eine Rolle einen Namen lediglich erlaubt: tablist, toolbar, menu, menubar und scrollbar sind name-from-author-Rollen, für die die Spezifikation keinen Namen verlangt, und liegen außerhalb des Geltungsbereichs. meter und progressbar werden auch von meter-name-present und progressbar-name-present abgedeckt, die SC 1.1.1 zugeordnet sind; diese Regel liefert für diese beiden Rollen die Abdeckung von 4.1.2. Ein Custom Element, dem seine ElementInternals eine dieser Rollen geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, liegt ebenfalls im Geltungsbereich: Das ist seine Standardrolle, und keine andere Regel prüft es.

Erwartung. Das Element hat ein nicht leeres aria-label, ein aria-labelledby, das zu nicht leerem Text aufgelöst wird, oder ein nicht leeres title. Jede Rolle in der Menge ist ausschließlich name-from-author, daher wird Text von Nachfahren nicht akzeptiert: Sonst würde ein beschriftetes Kind in einem zusammengesetzten Widget den Container bestehen lassen, der selbst keinen Namen hat. Auch der Name, den sich das HTML-Host-Element selbst gibt, zählt, da der Browser ihn unter der Rolle weiterhin berechnet: das erste <legend>-Kind eines <fieldset>, das erste <caption>-Kind einer <table> und ein zugeordnetes <label> bei einem beschriftbaren Element wie <progress> oder <meter>.

Was ein Befund meldet.

  • role: die Rolle, die einen Namen braucht, eine von grid, meter, progressbar, radiogroup und tree. Anders als der Rest von data.details ein stabiler Vertrag.

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
<div role="grid" aria-label="Orders"></div>

role="grid" erfordert einen zugänglichen Namen, und aria-label liefert ihn.

fail
<div role="grid"></div>

role="grid" erfordert einen zugänglichen Namen; keiner ist vorhanden.

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_internals

  1. Untersuchen Sie das im Bericht genannte benutzerdefinierte Element und notieren Sie seine 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 das Element, über die Internals oder anders gesetzt, und der Screenreader sagt ihn an.

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

Quellcode ansehen