slider-name-present

Schieberegler haben einen zugänglichen Namen

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass Elemente mit role="slider" einen nicht leeren zugänglichen Namen bereitstellen. Ein natives <input type="range"> prüft form-control-programmatic-label-present.

Anwendbarkeit. Gilt für Elemente, deren role-Attribut zu slider aufgelöst wird (das Attribut ist eine Fallback-Liste: Sein erstes bekanntes, nicht abstraktes Token ist, ohne Berücksichtigung der Groß-/Kleinschreibung, die Rolle, sodass role="foo slider" zählt und role="link slider" nicht), die im Accessibility Tree enthalten sind. Ein Element mit passender impliziter Rolle, aber ohne role-Attribut, fällt nicht darunter. Ein natives <input type="range"> ohne die Rolle gehört zu form-control-programmatic-label-present. Ein Custom Element, dem seine ElementInternals diese Rolle 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 einen nicht leeren zugänglichen Namen aus aria-label, aus einem aria-labelledby, das zu nicht leerem Text aufgelöst wird, oder aus title. role="slider" erhält seinen Namen nur vom Autor, daher wird Text aus dem Teilbaum nie akzeptiert: Text innerhalb eines eigenen Slider-Widgets wird nicht zuverlässig als dessen Name bereitgestellt. Bei einem beschriftbaren Element (<input role="slider">) zählt auch ein zugeordnetes <label>. Bei einem textartigen <input> oder einer <textarea> zählt der Platzhalter zuletzt (die letzte Namensquelle nach HTML-AAM): Eine Beschriftung, die nur aus einem Platzhalter besteht, ist eine Frage von 3.3.2, kein fehlender Name.

Beispiele

pass
<div role="slider" tabindex="0" aria-label="Volume" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>

aria-label benennt den Schieberegler. Ein natives <input type="range"> liegt nicht im Geltungsbereich dieser Regel; form-control-programmatic-label-present prüft es.

fail
<div role="slider" tabindex="0" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>

Kein zugänglicher Name aus irgendeinem unterstützten Mechanismus.

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 den im Bericht genannten Schieberegler, 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 Schieberegler, über die Internals oder anders gesetzt, und der Screenreader sagt ihn an.

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

Quellcode ansehen