option-name-present
Optionen haben einen zugänglichen Namen
Prüft, dass Elemente mit role="option" einen nicht leeren zugänglichen Namen bereitstellen.
Anwendbarkeit. Gilt für Elemente, deren role-Attribut zu option aufgelöst wird (das erste Token, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen, sodass role="foo option" und role="OPTION" zählen), die im Accessibility Tree enthalten sind. Ein Element mit passender impliziter Rolle, aber ohne role-Attribut, fällt nicht darunter. 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, aus title oder, da role="option" seinen Namen aus dem Inhalt bezieht, aus dem Text seines eigenen Teilbaums. Dabei zählt der eigene Name eines Nachfahren (ein <img alt>, aria-label oder title) als dessen Beitrag, nicht nur seine Textknoten.
Beispiele
<div role="option" tabindex="0">Apple</div>
Sichtbarer Textinhalt ist für role="option" eine gültige Namensquelle.
<div role="option" tabindex="0"></div>
Kein Name und kein Inhalt.
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 Option 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 Option, aus dem Inhalt gewonnen, und der Screenreader sagt ihn an.
Nicht bestanden. Die Option 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 Option 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 Option, aus dem verschachtelten Inhalt gewonnen, und der Screenreader sagt ihn an.
Nicht bestanden. Die Option 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 Option, 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 Option, über die Internals oder anders gesetzt, und der Screenreader sagt ihn an.
Nicht bestanden. Die Option hat keinen Namen im Barrierefreiheitsbaum, und der Screenreader sagt nur die Rolle an; das verstößt gegen WCAG 4.1.2.