html中如何提升SVG文件可访问性-创新互联

小编给大家分享一下html中如何提升SVG文件可访问性，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。

1、作为图片使用的 SVG 文件

如果你的 SVG 是作为 的 src 引入的，务必为 添加role="img" 属性：

如果不加role="img"，有些屏幕阅读器不会将 认作图片，只是读出 alt 值。

2、作为图标使用的 SVG

SVG 作为图标使用时，请使用aria-hidden="true" 对访问设备隐藏，添加一个视觉上隐藏（visually-hidden）的兄弟元素作为图标的文本语义说明。

  
    
  
  Close



  
    
      
      
    
  

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

3、IE 的 BUG

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

...

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

4、Safari 10 的 BUG

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

否则，使用键盘 Tab 访问到这里的时候，跳不过去。不够之后的版本的已经修复了，如果你的网页需要支持 Safari 10 的话，就需要注意这个。

5、作为图片使用的 SVG

有时需要将 SVG 文件作为单独的图片使用，那么跟第二条类似的是，添加一个视觉隐藏元素作为语义说明使用。

    
  Simply Accessible

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

6、支持 IE8- 浏览器

在 IE8- 浏览器中， 中的 标签会被显示出来，因此需要支持此类浏览器的话需要隐藏它们。

 ... 

7、色彩对比

设计 SVG 图标时，一定要考虑到色弱用户、或在高对比黑色背景主题下（High Contrast theme）使用的用户。举一个例子，设计图标的时候，可以考虑使用实心的背景加上颜色鲜明边框。

以上是“html中如何提升SVG文件可访问性”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！