本文摘自PHP中文网,作者青灯夜游,侵删。
(推荐教程:html教程)
SVG是一种图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。本文就来为大家介绍7个提升网页SVG文件可访问性的方案。
1、作为图片使用的 SVG 文件
如果你的 SVG 是作为 <img>
的 src 引入的,务必为 <img>
添加 role="img"
属性:
1 2 3 4 5 6 7 | < 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)的兄弟元素作为图标的文本语义说明。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | < 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"
属性。
1 | < svg focusable = "false" >...</ svg >
|
原因是为:在 IE 浏览器上关于 SVG 的一个 BUG。大家知道,SVG 默认是不会被聚焦的,但在 IE 中,如果 SVG 包含在像链接、按钮这样的可聚焦元素里时,使用 Tab 是可以被聚焦的。这就导致父元素聚焦后,子元素又被聚焦的情况发生。
4、Safari 10 的 BUG
在 Safari 10 中,如果 <svg>
中包含 <use>
,务必在两者中间使用空格隔开。
1 | < svg > < use >...</ use > </ svg >
|
否则,使用键盘 Tab 访问到这里的时候,跳不过去。不够之后的版本的已经修复了,如果你的网页需要支持 Safari 10 的话,就需要注意这个。
5、作为图片使用的 SVG
有时需要将 SVG 文件作为单独的图片使用,那么跟第二条类似的是,添加一个视觉隐藏元素作为语义说明使用。
1 2 3 4 | < 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>
标签会被显示出来,因此需要支持此类浏览器的话需要隐藏它们。
1 2 | <!-- 下面语句的作用范围从 IE5~IE9 -->
<!--[ if !IE]> --> <desc>...</desc> <!-- <![endif]-->
|
7、色彩对比
设计 SVG 图标时,一定要考虑到色弱用户、或在高对比黑色背景主题下(High Contrast theme)使用的用户。举一个例子,设计图标的时候,可以考虑使用实心的背景加上颜色鲜明边框。
更多编程相关知识,请访问:编程入门!!
以上就是浅谈网页中提升SVG文件可访问性的几种方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html a标签是怎么使用的?Html a标签的使用总结
Html标题,段落,换行,水平线,特殊字符应该如何使用
在Html文档中嵌入javascript的四种方法
Html中的段落文本如何换行?一篇文章告诉你换行标签br的用法
Html设置表格边框样式
Html页面底部多出很多空白部分是什么原因
Html怎么导入图片
Html中图片显示不出来怎么办
Html 超级链接详细讲解
Html如何给table表单加边框
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 浅谈网页中提升SVG文件可访问性的几种方法