Eine kurze Diskussion über verschiedene Methoden zur Verbesserung der Zugänglichkeit von SVG-Dateien auf Webseiten

(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 a1f02c36ba31691bcfe87b2722de723b eingeführt wird, fügen Sie unbedingt a1f02c36ba31691bcfe87b2722de723b role="img" Attribut: a1f02c36ba31691bcfe87b2722de723b 的 src 引入的，务必为 a1f02c36ba31691bcfe87b2722de723b 添加 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"，有些屏幕阅读器不会将 14f13b3155781d4b33a0a5a1b3842df4 认作图片，只是读出 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>

如上，为 486d7a50595533609bc98d44595dc670 添加了  aria-hidden="true"，让其对访问设备隐藏。之后的 .sr-only 就是所谓的视觉隐藏元素——只是视觉上看不见，但会被屏幕阅读读到。

3、IE 的 BUG

网页如果需要兼容 IE，那么在使用 486d7a50595533609bc98d44595dc670 的时候，需要显式添加 focusable="false" 属性。

<svg focusable="false">...</svg>

原因是为：在 IE 浏览器上关于 SVG 的一个 BUG。大家知道，SVG 默认是不会被聚焦的，但在 IE 中，如果 SVG 包含在像链接、按钮这样的可聚焦元素里时，使用 Tab 是可以被聚焦的。这就导致父元素聚焦后，子元素又被聚焦的情况发生。

4、Safari 10 的 BUG

在 Safari 10 中，如果 486d7a50595533609bc98d44595dc670 中包含 2199a63ce40299beb55b2a8b469dfcd6，务必在两者中间使用空格隔开。

<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>

之所以没有选择以 e1caa4744075712ec42c807aeb949a42 的形式添加说明，是因为如果 486d7a50595533609bc98d44595dc670 不是在可聚焦元素里使用的时候，有些屏幕阅读器不会正确朗读 aria-label 属性。

6、支持 IE8- 浏览器

在 IE8- 浏览器中，486d7a50595533609bc98d44595dc670 中的 c96025df8207a00f765545452911fa76

<!-- 下面语句的作用范围从 IE5~IE9 -->
<!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->

Wenn role="img" nicht hinzugefügt wird, interpretieren einige Bildschirmleseprogramme c473636f8c0c81b51bce154092a8ce77 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 bitte aria-hidden="true", um das Zugriffsgerät auszublenden und ein visuell ausgeblendetes (visuell ausgeblendetes) hinzuzufügen ) Das Geschwisterelement dient als textliche semantische Beschreibung des Symbols.

rrreeeWie oben wurde aria-hidden="true" für 486d7a50595533609bc98d44595dc670 hinzugefügt, um es vor dem Zugriff auf Geräte zu verbergen. Das folgende .sr-only ist das sogenannte visuell verborgene Element – ​​es ist visuell nicht sichtbar, wird aber von Bildschirmleseprogrammen gelesen.

🎜3. IE BUG🎜🎜🎜Wenn die Webseite mit IE kompatibel sein muss, müssen Sie bei Verwendung von 486d7a50595533609bc98d44595dc670 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 486d7a50595533609bc98d44595dc670 2199a63ce40299beb55b2a8b469dfcd6 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 f631d91f3578f6d394110f89765e7326 hinzuzufügen, liegt darin, dass wenn &lt ;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 <code>c96025df8207a00f765545452911fa76-Tag in 486d7a50595533609bc98d44595dc670 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!