欢迎订阅专栏：万字解析 WCAG 2.1 AA 网页内容无障碍指南
前言
万字解析 WCAG 2.1 AA 网页内容无障碍指南（一）：概念需求 上篇文章介绍了 WCAG 2.1 指南的基本概念和需求分析。
本篇介绍详细介绍下指南中的第一章节 1. Perceivable 可感知性 ，对每条规则进行理解、分析，并提供开发解决方案、和测试建议等。
WCAG 2.1 官方文档：Web Content Accessibility Guidelines (WCAG) 2.1 中文：Web内容无障碍指南 (WCAG) 2.1
1. Perceivable 可感知性
1.1 Text Alternatives 替代文本
1.1.1 Non-text Content 非文本内容 A
解读：给非文本元素添加辅助描述属性，比如给img加alt，给icon加aria-label。因为盲人是看不到图片和图标长啥样的，所以需要借助读屏软件可以读出图片或图标的作用。
如果网速不佳等原因造成无法加载图片文件时，将在图片的位置显示alt里的文字；而且对于SEO支持也好，方便搜索引擎抓取内容。
html
<img src="/logo.png" alt="Logo">
<span class="icon-warning" aria-label="some message"></span>不仅限于img和icon，比如下面例子，是GitHub站点的logo图标，是一个a标签套了个svg，然后没有任何文字信息，这是就需要给a标签加aria-label，告诉用户这是一个Homepage link。 
1.2 Time-based Media 时基媒体
1.2.1-5 字幕相关
- 1.2.1 Audio-only and Video-only (Prerecorded) 纯音频和纯视频（预录） A
- 1.2.2 Captions (Prerecorded) 字幕（预录） A
- 1.2.3 Audio Description or Media Alternative (Prerecorded) 音频描述或媒体替代（预录） A
- 1.2.4 Captions (Live) 字幕（直播） AA
- 1.2.5 Audio Description (Prerecorded) 音频描述（预录） AA
解读：这几个规则类似就一起说了，如果网页有在线播放视频或者音频类似功能（或者直播），需要提供字幕或者其它形式的等效信息，能让视听障碍的人也可以了解其内容。分三种情况：
- 视频或音频文件是固定的，或者可配的，也就是说文件是网站自己的，这种情况就可以给视频加上内置字幕，或者在页面上视频内容旁边加上描述性文字，能在不播放情况下也能了解视频内容。
- 视频或音频是网站使用者，也就是用户自己上传的，这种就需要在上传页面加上上传字幕文件的功能了，非必填，用户可以选择不上传，但是功能得有，然后在播放视频时同步显示字幕内容，显示在视频内，外都行。
- 直播，这个没整过，可能得用些类似AI识别功能。
也可以选择一些第三方视频音频存储库，并且支持在线播放和字幕自动识别功能，比如YouTube、Office365等等，把视频直接上传上去，然后通过iframe内嵌播放就行了。
1.3 Adaptable 适应性
1.3.1 Info and Relationships 信息和关系 A
解读：使用一些特殊HTML标签、HTML role属性或者aria-xx辅助属性，来标记元素的作用结构等。
语义化标签包括：H1-6、Header、Nav、Aside、Article、Footer等，如果用div代替，则需要设置对应的role来标识。
举个🌰，比如下图，是GitHub repository settings页面的左侧导航：
- 导航外层用
nav、nav-list标签。 - 展开收起按钮定义
aria-expanded属性，标识展开状态。 url加role="list"，标识是个list。
以上这些都属于这个规则，另外，通过AXE DevTool也可以扫描这些标签、role、aria属性用法是否正确。 
注意：AXE DevTool只会扫描标签role aria属性关联用法是否正确，是否少属性等，并不会识别元素属性用的什么合理，举个🌰：
比如一个不是导航功能的地方，用了nav标签实现了内容，但是AXE DevTool不会识别当前内容是不是导航，所以并不会扫出来问题。
1.3.2 Meaningful Sequence 有含义的顺序 A
解读：意思是页面上的内容、以及html中的元素顺序，需要是一个有意义的、正确合理的顺序，比如先有header、再有导航、然后是页面部分，需要自上而下、从左到右这种合理的顺序。
这部分更多是设计方面了，一个项目有个专业的设计团队的不可缺少的。
1.3.3 Sensory Characteristics 感官特性 A
用于理解内容和操作内容的指示，应该不完全依赖于组件的感官特性，如形状、大小、视觉位置、方向、或声音。
解读：一些非文字的指示内容，提供辅助属性描述。比如没有文字的图标、指示图等，需要加tooltip或aria-label。 和1.1.1规则类似，更多的是设计上的要求，比如下图饼图，用颜色区分了不同分类，但是对于色盲用户，就很难区分了。
对于这个例子，两个方案：1. 把文字信息也显示在饼图内；2. 或者把百分比值现在是右侧分类后面。 
1.3.4 Orientation 定位 AA
不应该将内容的视图和操作限定为单一的显示方向，例如纵向或横向，除非使用特定的显示方向是必要的。
解读：体现在移动设备上，要求横屏纵屏都可以合理展示及操作页面内容。不能限制内容只能在一个方向显示。 这个是移动端响应式支持了。
1.3.5 Identify Input Purpose 明确输入目的 AA
用于收集用户信息的每个输入框的目的可以在以下情况下编程式确定：
- 输入字段的用途在"用户界面组件的输入目的"部分有定义；
- 使用支持识别表单输入数据的预期含义的技术来实现内容。
解读：
- 需要给输入框对应对应的type，比如邮箱地址就是
type='email'，电话号码就是type='tel'。 - 需要给部分 address、email、contact number 等输入框添加支持
autocomplate的功能。比如有个提交个人信息的表单，可能需要用户重复的提交，这些可能重复填同样内容的输入框就需要支持autocomplate的功能，即让浏览器记住之前填的内容，下次输入时浏览器会自动提示历史记录。
开发方案：
- 很好实现；
- 就是给
input加autocomplate属性，值跟type一样也有不同类型。需要外层有form表单元素，已提交form形式提交，还需要给每个input定义唯一固定id，这样浏览器才能正确识别，参考下面例子。
如果不是用form提交的，是用的post api发请求，需要加一个隐藏的form表单元素，然后submit按钮点击时submit这个虚拟form，达到让浏览器记住效果，参考下面例子：
jsx
<form autocomplete="on" onsubmit="return false;">
<input id="btn1" type="submit" style="display:none;" />
</form>
...
<div>
<input type="email" />
<button onclick="saveFn">save</button>
</div>
...
// js
function saveFn() { btn1.click(); api.post(...); }1.4 Distinguishable 可辨别性
1.4.1 Use of Color 颜色用途 A
颜色并不是作为传达信息、表明动作、提示响应或区分视觉元素的唯一视觉手段。
不能单纯用颜色区分信息。同 1.1.1 和 1.3.3，不再解读了。
1.4.2 Audio Control 音频控制 A
如果网页音频自动播放超过3秒钟，提供一个机制用以暂停或停止音频，或者控制独立于全局系统音量的音频音量。
解读：很好理解了，比如进某个页面自动播放了视频，需要提供一个快捷键之类的功能暂停、停止、或者静音。
1.4.3 Contrast (Minimum) 对比度（最小） AA
解读：文字颜色对比度问题，就是文本和文本的背景图像至少要有4.5:1的对比度。WCAG可访问性最经典，也是问题最多的一个规则了，要求是有一定对比度，这样文字才会显示更清晰，更容易识别。
这个单纯的颜色设计问题了，需要设计团队给项目提供一个颜色系统，避免出现此类问题。
通过AXE Tool能扫描网页不符合的对比度问题，参见上面测试章节，扫描结果参考下图 
另外也有些tool可以测试颜色的对比度，比如：WebAIM: Contrast Checker
1.4.4 Resize Text 调整文本 AA
解读：文字放大有两种方式：
- 用浏览器的zoom放大，pc端是ctrl+(+-)，移动端是双指缩放；
- 页面提供A+A-按钮，点击可以改变所有文字大小，一般是用rem实现的。
以上方式下，要求保证功能、样式、布局都显示合理。只要文字显示完整，不会有截断，遮挡问题就行（可以省略）。
开发方案：这里主要说下浏览器的zoom，放到200%效果如下，WCAG官网效果是自动隐藏了左侧导航，让右侧可视内容更大，效果更好，见下图。 
其实是该网站做了响应式，即浏览器分辨率小于1280px时，会隐藏导航，实现方式大概两种：
- 用css Media Queries：
@media (min-width: 1280px) { - 用js：
window.addEventListener('resize', (e) => { console.log(document.documentElement.clientWidth)
然后当浏览器缩放时，也就相当于浏览器分辨率变化，比如放大时，分辨率会相应变小，所以基本上可以说，浏览器缩放也是网页响应式的一个效果
1.4.5 Images of Text 文本图像 AA
解读：相比"带文字的图片"，选择直接用文字来说明更好。如果必须使用图片，需要加alt属性定义文字说明。
1.4.10 Reflow 反复滚动 AA
内容可以在不丢失信息或功能，且在下面两种规格里无需滑动滚动条的情况下呈现：
解读：页面需要在小分辨率下（手机端320分辨率），不出现横向滚动条。就是说移动端需要支持最小320分辨率，并且不会因为横向内容过长超出屏幕，导致出横向滚动条。
网站支持响应式问题了，只是要求最低分辨率更小些，现在市面上大部分手机分辨率都比320大的，只有比较老旧的型号手机是320，所以测试上比较困难。
1.4.11 Non-text Contrast 非文本对比 AA
以下内容在视觉呈现时，与相邻颜色的对比度至少为3：1： 用户界面组件 识别用户界面组件和状态所需的可视化信息，除非活动组件或组件的外观由用户代理确定且未被作者修改; 图形图像 理解内容所必需的图形部分，除非图形的某种特定呈现对所传达的信息至关重要。
解读：文字颜色对比度。同1.4.3
1.4.12 Text Spacing 文本间距 AA
在使用支持以下文本样式属性的标记语言实现的内容中，通过设置以下所有内容并且不更改其他样式属性，不会丢失任何内容或功能：
- 行高（行间距）至少为字体大小的1.5倍;
- 将段落间距设置为字体大小的至少2倍;
- 字母间距（跟踪）至少为字体大小的0.12倍;
- 字间距至少为字体大小的0.16倍。
解读：文字内容间距要求不要太紧密（指line-height样式属性），而且文字内容尽量可以显示完整，如果不完整需要省略加tooltip。
line-height一般不会有问题；对于过长的文字，如果容器显示不下，需要文字省略加tooltip，参考下面实现：
css
.text-ellipsis { // 文字单行省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-ellipsis-wrap { // 文字多行省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
word-wrap: normal;
}1.4.13 Content on Hover or Focus 悬停或焦点内容 AA
当收到、之后移除指针悬停或键盘焦点时，所触发的附加内容也从可见、之后变为隐藏。在这种情况下，以下为真： 可清除的 除非附加内容传达输入错误或不掩盖或替换其他内容，否则可以使用一种机制来关闭附加内容而不移动指针悬停或键盘焦点; 可悬停的( 如果指针悬停可以触发额外内容，那么指针可以从附加内容上挪开，而附加内容不会消失; 持久性的 在用户移除或解除指针悬停和键盘焦点、或附加内容不再有效之前，附加内容都要保持可见。
解读：当鼠标浮动或者点击操作触发的附加内容（比如popup、tooltip），需要在鼠标移开、再次点击、点close按钮等方式使附加内容消失。说白了就是popup或tooltip弹出后不能一直显示，得有合理的方式隐藏。
举个🌰：鼠标浮动到一个按钮时，弹出popup（最好是延迟几百毫秒弹出），那鼠标滑动到popup上时（或者点击popup内容），需要保持popup不关闭，当鼠标移出按钮或者popup时，需要popup自动关闭；
再举个🌰：鼠标点击按钮弹出popup时，那鼠标移开并不会自动关闭popup，需要点击其它区域（除了popup其它区域，包括按钮）时，需要关闭popup。
总结
WCAG 2.1 指南中的第一章节 1. Perceivable 可感知性 就说完了，下一篇会继续介绍第二章节 2. Operable 可操作性 中的规则。
欢迎订阅专栏：juejin.cn/column/7300...