binary-control-name-present

Binäre Steuerelemente haben einen zugänglichen Namen

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass Steuerelemente vom Typ checkbox, radio und switch einen nicht leeren zugänglichen Namen bereitstellen.

Anwendbarkeit. Gilt für Elemente, deren role-Attribut zu checkbox, radio oder switch aufgelöst wird (das erste Token, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen, sodass role="foo switch" und role="SWITCH" zählen), die im Accessibility Tree enthalten sind. Ein natives <input type="checkbox">/<input type="radio"> liegt nur dann im Geltungsbereich, wenn es eine dieser Rollen explizit trägt; ohne role-Attribut gehört es zu form-control-programmatic-label-present. 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 Steuerelement hat einen nicht leeren zugänglichen Namen aus aria-label, aus einem aria-labelledby, das zu nicht leerem Text aufgelöst wird, oder aus title. Eine native Checkbox bzw. ein nativer Radiobutton akzeptiert zusätzlich ein zugeordnetes <label>, die labels-API, ein umschließendes <label> oder label[for], wobei für Determinismus höchstens vier Labels gelesen werden; jedes andere Element akzeptiert seinen eigenen Teilbaumtext, da diese Rollen name-from-content sind.

Beispiele

pass
<div role="switch" tabindex="0" aria-checked="false" aria-label="Bluetooth"></div>

aria-label gibt dem Switch einen zugänglichen Namen.

fail
<div role="switch" tabindex="0" aria-checked="false"></div>

Der Switch hat über keinen unterstützten Mechanismus einen Namen.

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 Bedienelement, 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 das Bedienelement, über die Internals oder anders gesetzt, und der Screenreader sagt ihn an.

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

Quellcode ansehen