本文首先介绍什么是网站可访问性、残障人士如何访问网站；然后提供一些开箱即用的建设无障碍网站的操作指南，让你能够立即在项目中使用；最后介绍了如何检测网站的可访问性。

什么是网站可访问性

网站可访问性指的是残障人士(包括全盲和低视力、失聪和听力衰退、学习障碍、精神局限、行动受限、语言障碍、光敏性以及多重残障)在使用网站时不会遇到障碍，也就是说他们可以认知、理解网站、在网站上导航以及与网站组件进行交互。

残障人士如何访问网站

残障人士大概可以分为视觉障碍、听觉障碍、肢体障碍和认知障碍四大类。每类群体都有特定的访问网站的方式和页面要求。

视觉障碍

主要包括色盲、色弱和全盲和视力衰退等。全盲用户主要靠读屏软件来接收页面信息；色盲和色弱的用户对页面色彩要求比较高，包括颜色的选择和对比度的使用；视力衰退的用户有时需要放大页面上的文字和图片来阅读。

听觉障碍

主要包括耳聋或者听力衰退等。这类用户对页面上的一些音频信息有一定的要求，包括音频内容的可暂停、音量的调节、音频字幕等。

肢体障碍

主要是肢体残缺。这类用户主要借助一些软件或者硬件来访问网站，比如手臂残疾者借助一些物体敲击键盘来访问我们的网站。这就对我们网站的键盘可访问性有很高的要求，其中包括能通过键盘聚焦页面的交互组件、触发相应的键盘事件来进行交互、快速导航到主要内容区域等。

认知障碍

主要包括学习障碍和聚焦障碍、语言障碍、精神局限等。这类用户需要页面内容清晰易懂、能够重复多次阅读、内容可以灵活调节，这就要求我们页面上一些滚动区域的内容可以随时停止和重启、一些复杂的内容的能够配以简单易懂的说明文字、相同的链接使用相同的文字、页面上动画的设计不会引起用户不适等。

让你的网站无障碍

清晰的网站结构

1、通过ARIA中的role或者HTML5中语义化的标签main、header等来为页面提供Landmark，常见的有Landmark有navigation、search、banner、contentinfo、complementary；

2、使用H1~H6表示标题文字，用H元素组织页面区块；

网站样式和内容

1、确保你的设计有足够的颜色对比（字体颜色和背景色），这对低视力和色盲用户有益。级要求正常文本最小对比度为7:1，大号文本为4.5:1，AA级的建议是正常文本最小对比度为4.5:1，大号字体为3:1；

2、颜色不作为传递信息的唯一渠道，比如必填项、错误提示等信息的传递；

3、为html标签提供lang属性；

4、当页面内容的语言与html标签语言不同时，使用lang属性为内容标明语言；

5、尽量保证DOM顺序和视觉顺序一致；

6、页面缩放时能保证内容排版的正常阅读；

7、页面中必须包含一个title元素，并且不能为空；

8、移除页面上的i和b标签，用css实现加粗等样式。要强调的词、短语和句子，请用em，strong实现；

9、最大化兼容当前和未来的用户代理(包括辅助技术)；

10、为页面提供一个无障碍帮助文档的链接，用于说明页面无障碍使用方法；

11、为页面上的非文字内容提供替换文本，如图片，ASCII，SVG，Charts，Graphs等；

Form

1、form表单里面的表单元素必须有一个独一无二的label。一般通过label配合for，id使用或者aria-label，aria-labelledby实现；

2、如果页面上有多个表单，submit和resetbutton必须是独一无二的；

3、Invalid的表单输入值使用aira-invalid属性标识非法性；

4、必填元素使用required或aria-required来标识；

5、错误信息提示：为关联的表单输入项添加aria-describedby链接到错误提示或者使用ARIA中的role=alert或LiveRegion；

6、input=images必须有alt或者titile属性，且不为空；

7、输入框的描述文字或者错误提醒里面应提供正确例子和格式说明；

8、使用fieldset和leg为表单内容提供说明文字；

Table

1、使用th来定义row或者column中数据的标题；

2、数据表格必须有name和descption且不能相同。使用caption、summary、title、aria-label、aria-labelledby等属性实现；

3、尽量不要使用table布局，仅用于数据展示；

Link和导航

1、链接应该聚焦在本页面，如果需要在新窗口打开页面需要提前告知用户该行为；

2、使用aria-label，aria-labelledby或title为链接提供说明文本，描述去向；

3、链接的描述文字必须是独一无二的，相同的链接描述文字应该一致；

4、如果一个链接包含一个图片和文字，并且alt中的内容和文字类似/相同，那么alt的属性应该为空；

5、保证不会的用户不知情的情况下刷新和跳转页面；

Image

1、为img标签提供替换文本，使用alt或者aria-labelledby等属性；

2、纯装饰性图片提供alt=""，role="presentation"或者用background-image实现；

3、避免提供与相邻链接或文字类似/相同的alt文字，造成冗余；

4、为一组图片的第一个item提供替代文本，比如商品评分star图片组

5、提供图片验证码的替代文本，并提供针对不同类型感官直觉的输出方式，如语音验证码

6、有背景图片的应该提供图片缺失或者不可用时的背景色

Hn

1、每个页面应该有且仅有一个H1标题且包含在main区块或者banner区块；

2、同级标题的内容必须是独一无二的，不能相同；

3、H标签里面必须包含可视性文本，H2~H6中除了img的alt属性外，还应该包含文字内容；

4、标题合理嵌套，方便屏幕阅读器理解文档结构，如H2嵌套H3，不要跳级嵌套；

键盘可访问性

1、提供可以直接导航到主内容区域的链接和快捷键；

2、用Tab导航时，获取focus的顺序必须有意义，尽量和视觉效果保持一致，且在获取焦点时样式上要和未获得焦点的元素不同；

3、页面上所有的交互功能必须可以通过键盘来完成。不要使用双击处理程（onDblClick），因为键盘不能执行这个行为。鼠标事件要提供对应的keydown、keypress、keyup、onfocus等事件；

4、不要有键盘陷阱，保证用户不会被困在某个弹窗里（不能退出）或者迷失焦点元素里。可以使用tabindex="-1"从Tab顺序中移除一个元素；

5、为页面上的公有区域比如公共导航，提供可以直接跳过的快捷键；

6、保证提供的页面快捷键不会和浏览器标准快捷键相冲突；

7、保证所有的menu子菜单可通过键盘打开并在其中导航；

多媒体和动画

1、音频必须要有配套的可替换文字和描述文字；

2、音频内容在页面加载时自动播放，超过3s的内容要让用户可以自主的暂停和重启内容；

3、页面上不要出现闪动频率高于3次/s的内容，以免引起不适；

4、如果用户的交互是受时间限制的，需要提供一个方式让用户可以关闭，调整这个时间限制；

5、滚动内容或者自动更新的内容在页面加载完成自动开始，更新或移动频率低于5s时，需要提供一个可以停止和重启的功能；

检测网站的可访问性

建站完成之后，可以使用一系列的测评工具对页面的可访问性进行检测。其中包括使用测评插件、键盘可访问性检测、内容检测、屏幕阅读器、其他方式等。

测评插件

目前比较流行的测评插件有Chrome的WAVE，Firefox的AccessibilityEvaluationToolbar。

键盘检测

在只是用键盘的情况下访问网站。

内容检测

缩放浏览器75%~200%进行检测，看页面上信息展示是否完整。

屏幕阅读器

使用主流的阅读器主要包括JAWS，NVDA，VoiceOver来阅读网站。

其他方法

邀请身边的残障朋友使用网站等。

参考文献

AccessibleRichInternetApplications(WAI-ARIA)1.0

网站内容无障碍指南2.0/WebContentAccessibilityGuidelines(WCAG)2.0中文版

TestYourSiteforAccessibility

WebAccessibilityInMind

原文作者：小冉/饿了么前端