(Empfohlenes Tutorial: HTML-Tutorial)
SVG ist ein Bilddateiformat. Der vollständige englische Name lautet Scalable Vector Graphics, was skalierbare Vektorgrafiken bedeutet. In diesem Artikel werden Ihnen 7 Lösungen vorgestellt, mit denen Sie die Zugänglichkeit von SVG-Dateien auf Webseiten verbessern können.
1. Als Bilder verwendete SVG-Dateien
Wenn Ihr SVG als Quelle von <img> eingeführt wird, fügen Sie unbedingt <img> role="img" Attribut: <img> 的 src 引入的，务必为 <img> 添加 role="img" 属性：
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
role="img" alt="Simply Accessible">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
role="img" alt="Simply Accessible">
</a>如果不加 role="img"，有些屏幕阅读器不会将 <img src="xxx.svg"> 认作图片，只是读出 alt 值。
2、作为图标使用的 SVG
SVG 作为图标使用时，请使用 aria-hidden="true" 对访问设备隐藏，添加一个视觉上隐藏（visually-hidden）的兄弟元素作为图标的文本语义说明。
<a href="#">
<svg class="icon icon-close" viewBox="0 0 32 32" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<span class="sr-only">Close</span>
</a>
<svg display="none" version="1.1" viewBox="0 0 32 32">
<defs>
<g id="icon-close">
<path class="path1" d="M31.708 25.707v0l-9.708-9.708 9.708-9.708c0.104-0.104
0.18-0.227 0.229-0.356 0.134-0.355
0.058-0.771-0.229-1.058l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.131
0.049-0.254 0.125-0.357 0.229l-9.708
9.708-9.708-9.708c-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057
0.229l-4.586 4.585c-0.286 0.286-0.361 0.702-0.231 1.058 0.051 0.13 0.125
0.252 0.23 0.356l9.709 9.708-9.708 9.708c-0.105 0.104-0.18 0.228-0.23
0.357-0.132 0.354-0.056 0.771 0.23 1.057l4.586 4.586c0.286 0.286 0.702
0.361 1.057 0.229 0.131-0.050 0.252-0.125 0.357-0.229l9.708-9.708 9.708
9.708c0.104 0.104 0.227 0.18 0.357 0.229 0.355 0.133 0.771 0.057
1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702
0.229-1.057-0.049-0.129-0.126-0.253-0.229-0.357z">
</path>
</g>
</defs>
</svg>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
</style>如上，为 <svg> 添加了 aria-hidden="true"，让其对访问设备隐藏。之后的 .sr-only 就是所谓的视觉隐藏元素——只是视觉上看不见，但会被屏幕阅读读到。
3、IE 的 BUG
网页如果需要兼容 IE，那么在使用 <svg> 的时候，需要显式添加 focusable="false" 属性。
<svg focusable="false">...</svg>
原因是为：在 IE 浏览器上关于 SVG 的一个 BUG。大家知道，SVG 默认是不会被聚焦的，但在 IE 中，如果 SVG 包含在像链接、按钮这样的可聚焦元素里时，使用 Tab 是可以被聚焦的。这就导致父元素聚焦后，子元素又被聚焦的情况发生。
4、Safari 10 的 BUG
在 Safari 10 中，如果 <svg> 中包含 <use>，务必在两者中间使用空格隔开。
<svg> <use>...</use> </svg>
否则，使用键盘 Tab 访问到这里的时候，跳不过去。不够之后的版本的已经修复了，如果你的网页需要支持 Safari 10 的话，就需要注意这个。
5、作为图片使用的 SVG
有时需要将 SVG 文件作为单独的图片使用，那么跟第二条类似的是，添加一个视觉隐藏元素作为语义说明使用。
<a href="https://simplyaccessible.com"> <svg role="img" focusable="false"> <use xlink:href="#sa_logo"></use> </svg> <span class="sr-only">Simply Accessible</span> </a>
之所以没有选择以 的形式添加说明，是因为如果 <svg> 不是在可聚焦元素里使用的时候，有些屏幕阅读器不会正确朗读 aria-label 属性。
6、支持 IE8- 浏览器
在 IE8- 浏览器中，<svg> 中的 <desc>
<!-- 下面语句的作用范围从 IE5~IE9 --> <!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->
role="img" nicht hinzugefügt wird, interpretieren einige Bildschirmleseprogramme <img src="xxx nicht. svg"> Erkennen Sie es als Bild und lesen Sie einfach den Alt-Wert aus. 2. SVG als Symbol verwendet
Wenn Sie SVG als Symbol verwenden, verwenden Sie bittearia-hidden="true", um das Zugriffsgerät auszublenden und ein visuell ausgeblendetes (visuell ausgeblendetes) hinzuzufügen ) Das Geschwisterelement dient als textliche semantische Beschreibung des Symbols. 🎜3. IE BUG🎜🎜🎜Wenn die Webseite mit IE kompatibel sein muss, müssen Sie bei Verwendung von <svg> explizit focusable="false" hinzufügen. code> Eigenschaft. 🎜rrreee🎜Der Grund ist: ein FEHLER bezüglich SVG im IE-Browser. Wie wir alle wissen, wird SVG standardmäßig nicht fokussiert, aber wenn SVG im IE in fokussierbaren Elementen wie Links und Schaltflächen enthalten ist, kann es mit der Tabulatortaste fokussiert werden. Dies führt dazu, dass das untergeordnete Element erneut fokussiert wird, nachdem das übergeordnete Element fokussiert wurde. 🎜🎜🎜4. Safari 10 BUG🎜🎜🎜Wenn in Safari 10 <svg> <use> enthält, achten Sie darauf, dass zwischen diesen ein Leerzeichen steht. 🎜rrreee🎜 Andernfalls können Sie nicht dorthin springen, wenn Sie die Tabulatortaste der Tastatur verwenden, um hierher zuzugreifen. Das Problem wurde in späteren Versionen behoben. Wenn Ihre Webseite Safari 10 unterstützen muss, müssen Sie darauf achten. 🎜🎜🎜5. SVG als Bild verwendet🎜🎜🎜Manchmal ist es notwendig, die SVG-Datei als separates Bild zu verwenden und dann ähnlich wie beim zweiten Element ein visuell verstecktes Element als semantische Beschreibung hinzuzufügen. 🎜rrreee🎜Der Grund, warum ich mich nicht dafür entschieden habe, eine Beschreibung in der Form < ;svg> code> Einige Bildschirmleseprogramme lesen das aria-label-Attribut nicht korrekt, wenn es außerhalb eines fokussierbaren Elements verwendet wird. 🎜🎜🎜6. IE8-Browser unterstützen🎜🎜🎜Im IE8-Browser wird das <desc>-Tag in <svg> angezeigt Wenn Sie solche Browser unterstützen möchten, müssen Sie sie ausblenden. 🎜rrreee🎜🎜7. Farbkontrast🎜🎜🎜Beim Entwerfen von SVG-Symbolen müssen Sie Benutzer mit Farbschwäche oder Benutzer berücksichtigen, die kontrastreiche schwarze Hintergrundthemen verwenden (High Contrast-Theme). Erwägen Sie beispielsweise beim Entwerfen eines Symbols die Verwendung eines einfarbigen Hintergrunds mit einem farbenfrohen Rand. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über verschiedene Methoden zur Verbesserung der Zugänglichkeit von SVG-Dateien auf Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
