role-img-text-alternative-present

[role="img"/"graphics-symbol"/"graphics-document"] muss eine zugängliche Textalternative haben

automaticWCAG 1.1.1 (A)Konfidenz: highSchweregrad: seriousperceivable

Prüft, dass Elemente mit role="img", "graphics-symbol" oder "graphics-document" eine zugängliche Textalternative über aria-label, aria-labelledby, ein title-Attribut oder (bei SVG-Elementen) ein <title> als Kind bereitstellen.

Anwendbarkeit. Gilt für Elemente, deren role-Attribut zu img, graphics-symbol oder graphics-document aufgelöst wird (das erste bekannte Rollen-Token der Fallback-Liste, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen), die im Accessibility Tree enthalten sind (die Ausnahme „programmatisch verborgen“ von ACT 23a2a8: display:none/visibility:hidden/aria-hidden="true" auf dem Element oder einem Vorfahren, ohne Ausnahme für fokussierbare oder per IDREF referenzierte Elemente; diese behandeln aria-hidden-focus und duplicate-id-aria gesondert). Gemäß ACT 7d6734 erfasst dies jedes Element mit einer dieser Rollen, nicht nur die <svg>-Wurzel, z. B. ein <circle role="graphics-symbol"> in einem einfachen <svg>. Jedes <svg>-Element selbst bleibt der (bereits ACT-konformen) title/ARIA-Namen-Behandlung von svg-text-alternative-present überlassen, daher wird ein unbenanntes <svg role="img"> einmal gemeldet, dort; das <img>-Tag ist hier ausgenommen, da es eine eigene Regel hat. 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. Jedes betroffene Element hat eine zugängliche Textalternative:

aria-label mit nicht leerem Wert; ODER
aria-labelledby mit Verweis auf mindestens ein vorhandenes Element, das nicht leeren Text beiträgt; ODER
ein nicht leeres title-Attribut (laut HTML-AAM die letzte Quelle für den zugänglichen Namen); ODER
bei einem Element im SVG-Namensraum ein nicht leeres <title> als direktes Kind, an beliebiger Stelle unter den Kindern (der eigene Benennungsmechanismus von SVG-AAM, nicht nur für die <svg>-Wurzel); das erste zählt.

Was ein Befund meldet.

ariaLabel: das aria-label des Elements ohne umgebende Leerzeichen oder null, wenn es keins hat.
ariaLabelledby: die id-Liste im aria-labelledby des Elements ohne umgebende Leerzeichen oder null, wenn es keins hat.
accessibleNameInfo (nameNotResolved): der zugängliche Name, den das Element letztlich erhält: present, value, mechanism (woher der Name stammt, etwa aria-labelledby) und flags (Hinweise darauf, was schiefgelaufen ist, etwa idref-missing für einen Verweis auf eine nicht vorhandene id). Bei den anderen Befunden null.

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

<span role="img" aria-label="Notifications"></span>

aria-label liefert die Textalternative.

fail

<span role="img">notifications</span>

Textinhalt ist keine gültige Namensquelle für ein Element mit explizitem role="img".

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`

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

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

Quellcode ansehen