Zugängliche SVG -Symbole

Die Bestimmung des am meisten zugänglichen HTML für ein SVG -Symbol ist nicht einfach, da die Funktion auf einer Website unterschiedlich ist. Während mehrere Experten eine Anleitung bieten, läuft eine vereinfachte Zusammenfassung auf drei Schlüsselszenarien zurück: dekorative Symbole, eigenständige Symbole und Symbole in Links.

Szenario 1: Dekorative Ikonen Wenn das Symbol rein ästhetische Zwecke dient und seine Abwesenheit keinen Einfluss auf das Verständnis hat, verstecken Sie es vor assistiven Technologien wie Screen -Lesern:

<svg ... aria-hidden="true"><https:><https:>
<p>Dies verhindert, dass das Symbol benachbarte Textbezeichnungen stört, die bereits den erforderlichen Kontext liefern.<https:>
<p><strong>Szenario 2: eigenständige Symbole <https:><https:>
</https:></https:></strong>Wenn ein Symbol als in sich geschlossener, sinnvoller Handlungsauslöser ohne sichtbares Textetikett fungiert, funktioniert der folgende Ansatz in modernen Browsern gut:<https:>
<pre class="brush:php;toolbar:false"><svg role="img"><title>Deskriptive Etikett <https:> ... <https:> <https:>
<p> Dies ist effektiv, ob sich das SVG in einem Element wie <code> <button> <https:> oder Funktionen als Taste befindet selbst. <https:>
<p> <strong> Szenario 3: Ikonen innerhalb Links <https:> <https:>
<p> Wenn das Symbol Teil eines Links ist, ist der Text des Links von entscheidender Bedeutung. Wenn sich ein sichtbarer Text innerhalb des Links befindet, gilt das Symbol als dekorativ (Szenario 1). Wenn jedoch die SVG <em> <https:> der Link (verpackt in <code> <a> <https:>), ein zugängliches Etikett: <https:>
<pre class="brush:php;toolbar:false"> <a aria-label="Descriptive Label" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"> <svg ... aria-hidden="true"> <https:> <https: link> <https:>
<p> Alternativ in der <code> <a> <https:> Element neben dem versteckten Text geben Svg
<p> Dieser Ansatz übereinstimmt mit den Empfehlungen der Zugänglichkeit verschiedener Experten auf diesem Gebiet.</p></https:></a></code></p></https:></https:></https:></svg></a>

Das obige ist der detaillierte Inhalt vonZugängliche SVG -Symbole. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!