<svg>-Elemente mit der Rolle img, graphics-document oder graphics-symbol müssen einen zugänglichen Text haben
Laut Web-Accessibility-Standards müssen SVG-Elemente mit der Rolle img, graphics-document oder graphics-symbol eine zugängliche Textalternative haben.
Warum es wichtig ist
Das Bereitstellen von Textalternativen ermöglicht es, Informationen auf verschiedene Weise durch verschiedene unterstützende Technologien darzustellen.
Zum Beispiel kann eine Person, die ein Bild nicht sehen kann, den Alternativtext über einen Sprachsynthesizer hören. Eine Person, die eine Audiodatei nicht hören kann, kann den Text der Alternative anzeigen lassen.
Behebung des Problems
Alle SVG-Elemente, die direkt in HTML eingebunden werden, sollten mit einer oder einer Kombination der folgenden Methoden versehen werden, um eine zugängliche Textalternative bereitzustellen.
Gutes Codebeispiel
Verwendung des title-Attributs:
<svg role="img" title="Ein brauner Kreis">
<circle
cx="30"
cy="30"
r="10"
fill="brown">
</circle>
</svg>
Kopieren Verwendung des SVG-<title>-Elements:
Das <title>-Element bietet eine zugängliche Kurztextbeschreibung für jedes SVG-Container- oder Grafikelement.
<svg role="img">
<title>Ein beschreibender Titel für das SVG-Element</title>
<path d="...." />
</svg>
Kopieren Verwendung des aria-label-Attributs:
<svg xmlns="http://www.w3.org/2000/svg">
<circle role="img" cx="50" cy="50" r="40" stroke="black" fill="red" aria-label="Ein roter Kreis mit schwarzem Rand"></circle>
</svg>
Kopieren Verwendung des aria-labelledby-Attributs:
<div id="first">Erster</div>
<div id="name">Name</div>
<svg role="img" aria-labelledby="first name">
<path d="...." />
</svg>
Kopieren Testfälle
Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.