浅谈网页中提拔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）使用的会员。举一个例子，设计图标的时候，可以思考使用实心的背景加上色彩鲜亮边框。
