img-alt-decorative
Ausgeschlossene <img>/<canvas>/<svg> müssen dekorativ sein (manuelle Prüfung)
Markiert <img>-, <canvas>- und <svg>-Elemente, die aus dem Accessibility Tree ausgeschlossen sind (aria-hidden, role="none"/"presentation", leeres alt oder ein unbeschriftetes svg/canvas), zur manuellen Prüfung, ob sie rein dekorativ sind.
Anwendbarkeit. Gilt für sichtbare <img>-, <canvas>- oder <svg>-Elemente, die auf eine der folgenden Arten aus dem Accessibility Tree ausgeschlossen sind: ein aria-hidden auf dem Element selbst oder einem Vorfahren, ein explizites role="none"/"presentation", das nicht durch Fokussierbarkeit aufgehoben wird, ein <img alt=""> (die native dekorative Markierung, mit derselben Aufhebung durch Fokussierbarkeit; nur ein buchstäblich leeres alt, alt=" " ist also keine), ein unbeschriftetes <svg>, dessen implizite Rolle graphics-document ist (ohne Neuangabe der Rolle img/graphics-symbol, ARIA-Namen, direktes Kind <title>/<desc> mit Text an beliebiger Stelle unter den Kindern oder Fokussierbarkeit), oder ein unbeschriftetes <canvas> ganz ohne explizite Rolle. Ein Element wird übersprungen, wenn ein Vorfahre, dessen Name für seinen Inhalt steht, einen vom Autor vergebenen Namen hat (aria-label, aria-labelledby, title oder ein zugeordnetes <label>): Dieser Name ersetzt, was das Bild gesagt hätte (der übliche Fall: ein reiner Icon-Button, der über aria-label benannt ist). Ein solcher Vorfahre hat eine Rolle, die ihren Namen aus dem Inhalt bezieht (link, button, heading, cell, option, tab, treeitem, menuitem...), oder eine mit präsentationalen Kindern (img, slider, progressbar...). ACT e88epe überspringt das Element unter jedem Vorfahren, der vom Autor benannt ist; diese Regel fragt weiterhin nach unter einer benannten Landmark, figure, group, region, einem dialog oder einem zusammengesetzten Widget (listbox, menu, grid...), deren Name einen Container beschriftet und nichts darüber sagt, was ein Bild darin zeigt: <figure aria-label="Photo: DR"> nennt den Urheber eines Fotos. Auch ein Link oder Button, der durch seinen Text benannt ist, nimmt ein Bild neben dem Text nicht aus: Ein Dateityp-, Externer-Link- oder Bewertungs-Icon kann sagen, was der Text nicht sagt, und ACT lässt es anwendbar. Ein Element in einem [inert]-Teilbaum oder hinter einem geöffneten modalen Dialog bleibt wie andere ausgeblendete Inhalte außen vor, so wie img-alt-present es auslässt: Es nimmt keine Interaktion an, und keine assistive Technologie erhält es.
Erwartung. Eine manuelle Prüfung ist nötig, um zu bestätigen, dass das ausgeschlossene Element rein dekorativ ist und keine Information vermittelt, die Nutzenden sonst entgehen würde.
Was ein Befund meldet.
element:img,svgodercanvas.sameImageCount: wie viele Befunde dieses Ergebnisses dasselbe Bild zeigen, dieser eingeschlossen: ein <img> mit derselben aktuellen Quelle (currentSrc, sonstsrc) oder ein Inline-<svg> mit denselben Root-Attributen, die seine Darstellung ändern (viewBox, width, height, class, style, fill, stroke, color), und demselben Markup. 1 bei einem canvas, einem Bild ohne Quelle oder Markup zum Vergleichen oder einem per Lazy Loading geladenen <img>, dessendata:-Platzhalter für eindata-srcoderdata-srcsetsteht.sameImageFirst: true beim ersten davon in Dokumentreihenfolge, sodass man eine Kopie prüfen und die übrigen mitzählen kann.reasonCode:IMAGE_ONLY_CONTROL_CONTENT, wenn das Bild der einzige Inhalt eines Links oder Buttons ist (kein Text und kein anderes Bild darin): Das Steuerelement erhält dann von ihm keinen Namen, ob es nun dekorativ ist oder nicht, wobeicontrolContentdie Rolle des Steuerelements nennt (linkoderbutton). SonstEXCLUDED_ELEMENT_REVIEW.
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
<img src="quarterly-trend.png" alt="">
Mit alt="" als dekorativ gekennzeichnet, aber ein Dateiname wie „quarterly-trend“ deutet darauf hin, dass es sich tatsächlich um ein informatives Diagramm handeln könnte, nicht um Dekoration.
<button aria-label="Close"><img src="x-icon.png" alt=""></button>
Das eigene aria-label des Buttons liefert bereits den zugänglichen Namen; ob das Icon dekorativ ist, ist hier keine zu prüfende Frage für dieses Element.
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.
EXCLUDED_ELEMENT_REVIEW
- Suchen Sie das im Bericht genannte Bild, svg oder Canvas und betrachten Sie es auf der Seite.
- Fragen Sie sich, was Nutzenden fehlen würde, wenn es entfernt würde: eine Information, eine Beschriftung, die Daten eines Diagramms oder nichts.
- Vermittelt es etwas, prüfen Sie, ob sichtbarer Text in der Nähe bereits dasselbe sagt.
Bestanden. Das Bild ist rein dekorativ (ein Abstandhalter, Trenner, Ornament oder ein Bild, dessen Inhalt der Text bereits wiedergibt), sodass durch das Verbergen nichts verloren geht.
Nicht bestanden. Das Bild vermittelt Informationen, die sonst nichts auf der Seite liefert, und ist dennoch vor assistiven Technologien verborgen; das verstößt gegen WCAG 1.1.1.
IMAGE_ONLY_CONTROL_CONTENT
- Suchen Sie den im Bericht genannten Link oder die Schaltfläche; ihr einziger Inhalt ist ein verborgenes Bild.
- Lesen Sie den berechneten Namen des Bedienelements im Bereich „Barrierefreiheit“ oder navigieren Sie mit einem Screenreader dorthin und hören Sie hin.
- Vergleichen Sie, was angesagt wird, mit dem, was das Bedienelement tut.
Bestanden. Das Bedienelement wird weiterhin mit einem Namen angesagt, der sagt, was es tut.
Nicht bestanden. Das Bedienelement wird ohne Namen oder nur mit seiner Adresse angesagt, weil sein einziges Bild verborgen ist; das verstößt gegen WCAG 1.1.1 (F89).