浅谈网页中提升SVG文件可访问性的几种方法

（推荐教程：htML教程）

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。本文就来为大家介绍7个提升网页SVG文件可访问性的方案。

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

如果你的 SVG 是作为 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 role="img" aria-label="Simply Accessible"> 的形式添加说明，是因为如果 svg> 不是在可聚焦元素里使用的时候，有些屏幕阅读器不会正确朗读 aria-label 属性。

6、支持 IE8- 浏览器

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

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

7、色彩对比

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

更多编程相关知识，请访问：编程入门！！

以上就是浅谈网页中提升SVG文件可访问性的几种方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！