svg-text-alternative-quality
Textalternative von <svg> muss angemessen sein (manuelle Prüfung)
Markiert betroffene <svg>-Grafiken mit erkannter Textalternative zur manuellen Prüfung auf Angemessenheit.
Anwendbarkeit. Gilt für Inline-<svg>-Elemente, die bereits eine Textalternative haben: nicht leeren <title>- oder <desc>-Text, ein nicht leeres aria-label oder ein aria-labelledby, das zu nicht leerem Text aufgelöst wird. <desc> zählt hier als prüfenswert, obwohl es nie zum zugänglichen Namen beiträgt: Diese Unterscheidung trifft svg-text-alternative-present. Das Element muss im Accessibility Tree enthalten sein, und role="presentation"/"none" nimmt es aus dem Geltungsbereich, außer es ist fokussierbar, wodurch seine Rolle wiederhergestellt wird.
Erwartung. Eine manuelle Prüfung ist nötig, um zu bestätigen, dass die bereitgestellte Textalternative zutreffend und angemessen ist.
Was ein Befund meldet.
hasNonEmptyTitle:true, wenn das erste <title> innerhalb des <svg> Text enthält.hasNonEmptyDesc:true, wenn das erste <desc> innerhalb des <svg> Text enthält.ariaLabel: deraria-label-Wert odernull, wenn es keinen gibt.ariaLabelledBy: deraria-labelledby-Wert, also die ids, auf die er verweist, odernull, wenn es keinen gibt.ariaLabelledByText: der Text der Elemente, auf diearia-labelledbyverweist, bis zu 120 Zeichen. Wird nur ermittelt, wenn es keinaria-labelgibt; sonst oder wenn er sich zu nichts auflöstnull.reasonCode:IMAGE_ONLY_CONTROL_CONTENT, wenn das <svg> der einzige Inhalt eines Links oder Buttons ist (kein Text und kein anderes Bild darin), seine Textalternative also der Name des Steuerelements ist, wobeicontrolContentdie Rolle des Steuerelements nennt (linkoderbutton); sonstTEXT_ALTERNATIVE_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
<svg role="img" viewBox="0 0 24 24"><title>Growth chart</title><path d="M0 0h24v24H0z"/></svg>
Ein <title> ist vorhanden — es lohnt sich zu bestätigen, dass „Growth chart“ beschreibt, was das Diagramm tatsächlich zeigt, und nicht nur, dass es ein Diagramm ist.
<svg role="img" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>
Es gibt keinen <title>/<desc>-Text, kein aria-label und kein aufgelöstes aria-labelledby, das sich prüfen ließe; das ist stattdessen ein Fehler von svg-text-alternative-present.
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.
IMAGE_ONLY_CONTROL_CONTENT
- Suchen Sie den im Bericht genannten Link oder die Schaltfläche; ihr einziger Inhalt ist dieses svg.
- Aktivieren Sie das Bedienelement und notieren Sie, was es tut oder wohin es führt.
- Lesen Sie den Namen des Bedienelements im Bereich „Barrierefreiheit“ der Entwicklertools (er stammt aus der Textalternative des svg) oder springen Sie mit einem Screenreader per Tab dorthin.
- Vergleichen Sie: Sagt der Name, was das Bedienelement tut („Suche“, „Menü schließen“), und nicht nur, wie das Symbol aussieht („Lupe“)?
Bestanden. Der Name des Bedienelements sagt, was es tut oder wohin es führt.
Nicht bestanden. Der Name beschreibt das Bild, ist vage oder passt nicht zur Aktion; das verstößt gegen WCAG 1.1.1 (und lässt den Zweck des Bedienelements unklar).
TEXT_ALTERNATIVE_REVIEW
- Betrachten Sie die im Bericht genannte Grafik und notieren Sie, was sie zeigt (ein Symbol, ein Logo, ein Diagramm und seine Daten).
- Lesen Sie ihre Textalternative im Bericht (Text aus title, desc, aria-label oder aria-labelledby) oder im Bereich „Barrierefreiheit“ der Entwicklertools.
- Nennt die Textalternative die Grafik nur, wie bei Diagrammen und Schaubildern üblich, können die Details anderswo stehen: in einer Bildunterschrift, einem Text oder einer Tabelle daneben oder hinter einem Link daneben. Das zählt nur, wenn Screenreader-Nutzer sie von der Grafik aus finden und sie alles wiedergeben, was der Grafik zeigt.
- Vergleichen Sie: Sagt der Text, was die Grafik zeigt oder bedeutet? Ist die Grafik dekorativ, sollte sie stattdessen verborgen werden (aria-hidden="true").
Bestanden. Die Textalternative vermittelt, was die Grafik zeigt, oder benennt sie und eine Beschreibung, die Screenreader-Nutzer von ihr aus erreichen, liefert den Rest, oder die dekorative Grafik ist vor assistiven Technologien verborgen.
Nicht bestanden. Die Textalternative ist falsch, vage (etwa „Bild“ oder „Symbol“) oder lässt aus, was die Grafik vermittelt, und keine von ihr aus erreichbare Beschreibung liefert es; das verstößt gegen WCAG 1.1.1.