SVG fallback 及可读性

Fufu

| 导语 这里谈到的svg回退,不针对于动画的回退,针对于面对高清屏的日益普及项目中所利用svg矢量图形,所做的图片和图标的回退。目前类似的高清处理方案还有icon fonts,也有多倍图,经过项目中不断尝试和总结,svg目前可能是最符合我们预期的方案,无论是浏览器渲染后的效果,还是出于对设计师的工作成本的考虑,以及后期各个环节人员配合的效率来看,svg都有过人之处。(具体推演过程参看ISUX博文

1. 为什么使用SVG

体积小,可压缩

与同类图片相比,在体积上有优势,同时作为一种XML文件,对gzip的压缩支持度好。

矢量,清晰

可以任意改变大小,不会影响图片质量。

可交互

可对图形元素进行操作。

2. 支持高清屏

2.1常见的svg使用方法

1

2.2 background-image

从最基本的背景图说起。

使用方法如下图:

2

因为各种方法的浏览器支持度会有些许差别,所以单独罗列(点击图片可查看):

3

回退:

常用的有两种方法,1.使用类名来区分,对不支持的浏览器,单独加载png; 2. 使用-webkit-image-set 写法对支持svg的高清屏,使用svg图片,对于普通屏使用1倍png。

4

2.2 img标签

用法与图片无异,非常简单。

5

浏览器支持(点击图片可查看):

6

回退:

主要有两种方法,一种通过脚本方式,对不支持的浏览器加载普通图片。

(线上有很多成熟的库可以用,比如Modernizr, 是一个开源的功能检测类JS库,可允许基于用户不同UA,开发不同的体验,即在支持HTML5和CSS3的浏览器中利用这些特性开发,又不会牺牲其他不支持这些特性的浏览器的支持,即,比如检测到有CSS3特性时,可以选择是否创建一个基于JS的回退,对不支持的UA降级体验。)

7

另外一种方法使用标签的支持性与svg支持可以达到降级效果,如果附加上srcset属性,则可以更加细化支持到不同宽度屏幕的精确掌控。

8

<img srcset="graph-small.png, graph-medium.png 400, graph-large.png 800" alt=“qcloud-logo”>

虽然这种写法简单易行,然而ie至今也不支持元素,那会牺牲掉ie9/10/11下高清屏的体验效果。

2.3 inline SVG

此外SVG还有如标题三种使用方法。

9

浏览器支持度(点击图片可查看):

10

回退:

对于此类都可以使用为不支持浏览器提供图片的方式。

11

特别想说:如果行内的svg大家要使用DataURI的方式以达到减少HTTP请求的目的,那么Base64并不是一个好的选择,它只会造成页面的臃肿,也不利于页面压缩。

2.4 一些思考

在使用SVG之初,还是要考虑清楚是否一定需要对高清适配,此外要采用SVG的图片是否适合做成SVG,再比如,如果SVG承担一部分的动画和可交互效果,那么回退的结果是否会对一大部分用户造成体验上的损失。最后,现在没有一个完美的svg回退效果,所以使用时,需谨慎。

3. SVG的可读性

由于SVG采用的是XML的语法,图形的里的文本内容可以被浏览器,搜索引擎和读屏软件读取,所以本身具有可读性好,有利于SEO,对无障碍友好等特点。

3.1 inline SVG

12

对于inlineSVG,可以使用标签对图形进行描述,要注意的是,title标签一定要是第一个子元素。

3.2 img标签

对于图片方式引入的SVG,以腾讯云的业务为例,如果要展示下图的场景,建议代码如下。

13

14

这里面有两点值得注意,1,aria标签;2. alt标签的alternative text

3.2.1 ARIA标签

ARIA是无障碍的一个建议标准,如果要对读屏软件友好,我们需要对图形添加一些无障碍的属性。role="group"或 role="img"指定角色,然后在选择对应的属性进行文字注释,比如上图用到了 aria-labelledby

其中较为常用的标签有以下几种:

属性 适用场景
aria-hidden 用于无实际意义的图片,告诉读屏器可以不读此处内容
aria-label 用于不可见的文字标签
aria-labelledby 用于可见的文字标签
aria-describedby 用于较长的文字描述

这里要注意的是,aria-label与aria-labelledby是一对相爱相杀的怨侣,在W3C中,对他们两个的适用范围有着严格的规定:

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. There may be instances where the name of an element cannot be determined programmatically from the content of the element, and there are cases where providing a visible label is not the desired user experience. Most host languages provide an attribute that could be used to name the element (e.g., the title attribute in HTML [HTML]), yet this could present a browser tooltip. In the cases where a visible label or visible tooltip is undesirable, authors MAY set the accessible name of the element using aria-label. As required by the text alternative computation, user agents give precedence to aria-labelledby over aria-label when computing the accessible name property.

3.2.2 Alternative text

无论是SVG,还是一张普通的图片,我们都需要为它添置alt标签,即使没有内容需要写,但也需要留下一个为空的alt标签:alt="".

什么是一个好的alternative text呢,先举个例子

Example 1:

15

如上图,页面中要对照片alt标签设置文字,以下哪个选项是最合适的?

A.“fufu的一张照片”

B.“fufu是个学武奇才”

C.   Alt 标签置空 alt=“”

D.“fufu”

A选项的描述毫无意义,B选项中的内容与下面文字有重合,C为空,然后图片又不是确实没有内容,D为最合适的描述。


Example2:

16

如上图,页面中要对照片alt标签设置文字,以下哪个选项是最合适的?

A.“图片”

B.“fufu”

C.   图片不需要alt属性

D.  Alt标签置空,即 alt=""

A选项无法描述照片内容,B选项的文字与下面标题重复,C选项是在与规范作对,D选项是最好的选择


Example3:

17

如上图,照片是可点的,页面中要对照片alt标签设置文字,以下哪个选项是最合适的?

A.“查看更多”

B.“fufu的相册入口”

C.   fufu

D.  Alt标签置空,即 alt=""

之前连续选D,但这次再选D就不对了,:)

A选项显然与内容不符,B选项无法从照片中看出来是相册的入口,D选项不能描述链接及图片的指向,因此C选项告诉用户是用一个fufu的链接是最合适的。


Example4:

18

如上图,照片及文字同时可点,页面中要对照片alt标签设置文字,以下哪个选项是最合适的?

A.“查看更多”

B.“fufu的相册入口”

C.   fufu

D.  Alt标签置空,即 alt=""

此处最佳的选择应该是D,其他原因与上题相似,这里因为有了标题可点,再写fufu有重复之嫌,所以选择D即可。


讲到这里,文章到了尾声,研究了一些规范和资料,所以写了这篇笔记,希望大家读完可以有些收获。

Fufu
Fufu
体验设计
[译] B2B vs. B2C 网站:关键用户体验差异
上一遍
茶·花·小黄脸——QQ新增表情
下一遍
4,463
QQ空间 新浪微博 Facebook Google+

相关推荐

留下你的想法吧