网站无障碍功能的10条基本准则

2018-04-0715:37:26网页制作Comments4,003 views字数 6107阅读模式

十条关于网站无障碍功能的准则，它们能保证你的网站对任何人（包括残疾人）都是可用的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

W3C的主席蒂姆·伯纳斯-李说过一句话：“网络的力量在其普遍性”。作为以制作网站为生的人来说，我们的责任就是要使每个人都能够访问它们。网络无障碍功能看起来好像是论文里的一个艰巨任务，但实际上它比听上去的容易的多。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

我们设计的这十条准则，就是为了保证所有的网站都是普世的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

这些准则不仅能帮助读屏的用户，也能改善在连接较慢时的浏览用户体验。我们把这些准则根据实现的先后顺序排了序，帮助你了解在这个过程中可能花费的时间和精力。在你感到收获颇丰之前，相信我们的话：本文干货满满，值得一看！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

首先谈第一件事：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

Web Accessibility是什么？

根据W3C的标准，网络无障碍功能就是所有人都可以感知、理解、浏览网络，并与其交互，或者向网络作出贡献。也就是说，网络无障碍功能包括影响网络访问的所有条件，包括人的视觉，听觉，身体，言语，认知以及神经功能障碍等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

关于这个主题，你在网上可以找到非常多的内容，而且如果感兴趣的话，你真的应该深入看看网络无障碍计划Web Accessibility Initiative（WAI）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

言归正传，下面是就是这十项准则。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

1.不依赖颜色值（约45分钟）

颜色是个很有力的工具，我们常常用各种颜色来表达或交流情感。但是，我们不能过于相信颜色能够传递给用户的信息。为什么呢？比如，绝大多数人都知道绿色表示正确，红色代表错误，但如果我们只使用颜色来表示这一信息会怎样呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

色盲是一种非常常见的视觉障碍。它影响了大约全世界4.5%的人口（甚至比IE11的用户还多，你懂的...）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

如果我们只通过颜色告诉用户输入正确与否，那么这4.5%的色盲症的人群就无法得知这一信息了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

颜色可以辅助错误提示信息，但是我们绝不应当只用颜色。为了让所有的用户都能正确获得提示信息，我们应该增加对应的标签或者图标来提示输入的信息正确与否。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

caniuse.com提供了一个有趣的解决方案，他们提供了一个调色板的方式来显示对应的兼容性列表。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

最理想的是在设计的时候就检查颜色对比度是否能满足符合要求，因此一定要让你和设计团队有正确的工具进行检查。我们推荐Sketch的插件Stark plugin，来检查你的设计是否能满足无障碍的需求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

2.不要禁止缩放行为（约五分钟）

在这个自适应设计遍布的时代，我们总会犯一些违反自适应性的错误。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

一个常见的错误就是使用maximum-scale=1.0，因为它禁止了在移动设备上网页的缩放功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

散光影响欧洲、亚洲约30%~60％的成年人，但模糊的内容会影响到所有年龄和国籍的人（嗨，妈妈，说的就是你！）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

允许网页放大不仅是WCAG的另一个准则，也是简化这些人日常生活的工具。所以下一次你建站时，不妨想一想像我妈这样视力下降看东西模糊不清的用户。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

除了可以让用户在移动设备上自由放大，还要注意，在桌面浏览器放大200%的时候，你的页面布局仍然还能看么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

3.重新了解alt属性（约45分钟）

不管你开发网站有多久，当你知道这些关于alt属性这些有名却又神秘的提示后，你可能还是会感到惊讶。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

alt是每个img标签强制要求的属性，但空的alt属性是依然有效。如果一张图片是装饰性的或者不需要了解其内容，你只要使用alt=""就可以了。
屏幕阅读器会告诉用户这个标签是一个图像，所以alt不需要多余的信息，比如说“Picture of”，直接说图片的内容即可。
图像的功能与其意义一样重要：如果你的logo图像直接链接到网站主页，那么它的alt文本应该是“Home Page”而不是“Logo”。
alt的替代文本不仅是为了增加可访问性。有时，数据连接缓慢的用户会禁用图像，从而实现更快的浏览体验。因此，每次写图像的alt属性时，都要记住还有这样的用户存在！

然而你的网站并不是每一幅图像都是用img标签写的，对吧？你还可能用到一两个SVG做图片，或者全部的图标都是SVG。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

我们怎样让SVG变得无障碍呢？幸运的是，可扩展矢量图形标准已经把这些内容包括进来了。为了描述这个矢量，既有短描述的标签 <title>，也有较长描述的标签<desc>。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

<symbol id="langIcon">
    <title>Language Icon</title>
    <desc>Longer description</desc>
    <path d="M0 2C6.47 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z" />
</symbol>

4.给视频加副标题和说明

这可能是WCAG最难实现的标准之一，不是说技术实现很难，而是说这件事很耗时。要完成这一点，有下面几种方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

以YouTube为例。你在上传视频的时候，你可以选择关闭说明。这些内容会自动生成，但在某些情况下可能并不准确，语言、背景噪音、演讲者的口音都可能影响内容的准确性。不过总得来说，大部分还是容易实现的，而且在大部分英语视频的摘要抽取也能正常工作。
如果我们追求100%的准确性说明，YouTube就不那么可靠了，所以我们要么自己写视频摘要，或者找第三方来做。YouTube可能会使用最常见的字幕格式，（.srt, .sub, .sbv），也允许我们在平台上填写字幕；如果你不懂得如何使用字幕软件，这项功能其实非常方便，当然我们也可以在不用授权账户权限的情况下请求社区的力量帮助翻译内容。
不过也许你并不想用YouTube当平台。也许你只要使用在自己的服务器上的HTML5视频。不用担心！HTML5也有tag，你就可以轻松的增加若干的文字说明和字幕文件，和你常用的WebVTT格式非常相似。

<video controls>
    <source src="movie.mp4"  type="video/mp4">
    <track label="English Captions"  kind="captions"  srclang="eN"  src="captions.vtt"  default>
    <track label="Subtitulos en español"  kind="captions"  srclang="es"  src="subs.vtt">
</video>

5.语义=无障碍功能（约45分钟）

你还记得font标签么？我希望你不记得，毕竟那是一段黑暗的年代。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

虽然现在大家都已经有了共识，但是语义支持并不是HTML5与生俱来的。从第一个HTML页面开始，语义支持就存在了，而且之后有了长足的改进。HTML5标准引入了新的语义标签，以便日常使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

这是很好，不过语义难道不是只给SEO用的么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

并不尽然。当你有意识的选择一个标签而不是一个链接的时候，你就已经刻意改变了元素的含义，提供了不同层次，并且建立了页面的树状信息结构。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

读屏软件不会放过这一点。实际上，语义信息是非常有用的工具之一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

要记住，能力越大责任越大，所以，一定要为每个元素使用正确的语义标签，从h1到全新的main标签都是。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

6.使用正确的标记（约30分钟）

另外还有一些，是我想和大家讨论的，容易出错的和略有争议的部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

Time vs. Datetime

时间元素通常可以有很多格式，比如用ISO8601的标准显示的时区格式，或者时长。 Datetime是帮助显示时间代表内容的可选属性之一。我们看一下例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

<time>14:54</time> Hours and minutes
<time>2018-06</time> Year and month
<time>-03:00</time> Time zones
<time>2h 32m</time> Harry Potter 2 Duration
<p>CSSConf Argentina took place on <time datetime=”2016-08-07”>August 7th</time></p>

Del 和 Ins

网络变化很快，但不要因为担心变化过多而不注意细节。我们可以使用同时ins和del和datetime属性来标记内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

ins元素表示文档里额外增加的内容：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

<ul>
    <li><ins datetime="2017-08-02">Icecream</ins></li>
    <li>Candy</li>
    <li>Pasta</li>
</ul>

del表示删除的内容：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

<ul>
    <li><del datetime="2017-06-05">Rewatch Harry Potter 8</del></li>
    <li><del datetime="2017-06-05">Cry because ____ dies.</del></li>
    <li><del datetime="2017-06-06">Write article</del></li>
    <li>Order room</li>
</ul>

Button vs. 标签

拿点爆米花吃吧，下面这段很棒。我们应该用哪一个？一起来看一下: 标签通常表示链接，指向另一个在当前窗口或者打开新窗口的页面。但，这个标签在会触发一些行为比如收放菜单或者图片库的时候，就不适用了。而button元素则是这些情况的正确选择，通常和JavaScript一起使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

同样button标签也常常和input type="button"混淆，但这二者的不同，通常依赖上下文，（文字、图片文字、或者仅仅只有文字等）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

使用button标签的时候，一般需要考虑两件事：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

第一，就是这个按钮的上下文是否足够清晰，（以一个关闭“X”按钮为例），我们一定要给它增加额外的aria-label属性来帮助用户理解其作用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

<button aria-label="Close">X</button>

其次，如果有需要使用a标签（比如一个搜索框或者一个灯箱效果的图片集），那么这时候更应该使用a标签以及javascript控制效果，而不应该单独使用a标签。图片库常常就是使用a标签以及href链接，这样如果禁用了js那么浏览器也能正常处理点击事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

但是...文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

7.必要时使用role属性（约1小时）

为了告诉读屏器用户我们的链接会触发一个动作，并不是普通标签，我们必须添加一个值为“button”的role属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

但要注意！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

在写JavaScript的时候，你不仅应当在用户点击的时候调用函数，也要给用户按下空格键的时候也要调用。要这样做是因为用户在使用键盘浏览的时候和使用鼠标点击链接的行为是不同的，这两种方式都应该能够正确的触发事件.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

<a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">
    Button
</a>

function handleBtnClick(event) {        
    // Do something
}

function handleBtnKeyPress(event) {
    // Check to see if space or enter were pressed
    if (event.keyCode === 32 || event.keyCode === 13) {
        // Prevent the default action to stop scrolling when space is pressed
        event.preventDefault();
        // Do something
    }
}

在 MDN上有更多的相关内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

要记住，aria属性并不都是必要的，除非像上面的例子这样，你就不必要遵守这个规则。HTML语义元素都有一个默认的role，比如，导航是“navigation”，链接是“link”，等等。也就是说，只在需要改变默认值时，才需要使用角色属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

8.隐藏元素（约1小时）

HTML和CSS里是有一些方法是用来隐藏元素的。下面这个表应该能帮你找到需要使用的对应方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

方法	作用效果	读屏软件	兼容性
CSS: visibility: hidden;	把元素从视图中隐藏，但其占据的位置依然存在（效果类似opacity: 0）	不可读	各处通用
CSS: display: none;	把元素从视图和空间流中都隐藏掉，下一个元素会替代这个元素的位置	不可读	各处通用
HTML5: hidden attribute	和display: none;一样	不可读	IE11+
Aria-hidden = “true”	内容可见，但在辅助工具中会被忽略	不可读	IE11+
CSS: .visuallyHidden class	元素在视图和流中都隐藏起来	可读	各处通用

如果你希望在视图中隐藏元素，但是读屏软件依然能找到这个元素，那就适合用最后一种方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

这种方法很适合一些标签或者需要调过内容的链接。visuallyHidden伪类就属于那种方便你收藏起来以便各种项目都能用的CSS。如果你想，也可以改个名字，比如.pottersCloak，FYI.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

9.遵循网站无障碍功能标准（大约每周花30分钟）

网络无障碍是很难达到，所以就有了标准和一些规范作为指导。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

读到这里，你可能会问：前面这些规范都是怎样起作用的呢我们应该何时使用？CSS的规则 display:none 和visibility:hidden 这两者有什么区别呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

W3C标准和WCAG的规范起初读起来可能会很枯燥，但其实非常可靠也很有教育意义。你应该赶紧去看看，沉浸在信息的汪洋大海中。我想你也一定会发现很多你从来没有用过的的代码实践。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

10.审计和复查（约3小时）

如果你掌握了这些知识，那么来测试一下吧。下面是审查网络无障碍功能的一些很好的工具。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3211.html

ChromeVox: Mac和Windows用户通用，你可以用这款Chrome插件来测试你的网站。
Accessibility Developer Tools for Chrome: 另一个你可以每天都来测试无障碍功能的浏览器插件。
Color Filter: 用来测试你的网站配色是否对色盲、色弱人群有影响。
W3C Validator: W3C的官方测试工具，确保你的HTML符合网络无障碍功能的各项条件。
A11Y Compliance Platform: 互联网无障碍审查局（BOIA）提供了一个分级报告，报告概述了根据WCAG A/AA 的一些关键点测试时，你的网站的评分。
WAVE: 由WebAIM做的一款网络无障碍功能评估的工具。