欢迎订阅专栏：万字解析 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支撑也好，方便搜索引擎抓取内容。
<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，到达让浏览器记住作用，参阅下面比方：
<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，参阅下面完成：
.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…
