欢迎订阅专栏：万字解析 WCAG 2.1 AA 网页内容无障碍指南
前言
本篇继续介绍第三章节 3. Understandable 可理解性 中的规则。
WCAG 2.1 官方文档：Web Content Accessibility Guidelines (WCAG) 2.1 中文：Web内容无障碍指南 (WCAG) 2.1
3. Understandable 可理解性
3.1 Readable 可读性
3.1.1 Language of Page 网页语言 A
解读：需要正确设置页面的语言（html上的lang属性），如果支持多语言，也需要正确设置跟当前页面语言对应的属性值。分两种情况：
- 如果网站不支持多语言，只支持一个语言，那
html标签上的lang属性得设置对应的语言，比如zh、或者zh-CN - 如果网站支持多语言，得根据当前页面的语言设置对应的
lang值。
多语言开发方案：
- 首先得获取当前用户的默认语言，一种是获取浏览器settings设置的语言，用JS
navigator.language或navigator.languages获取；另一种是判断用户IP所在的国家。 - 通过JS动态更改lang值：
document.documentElement.setAttribute('lang', lang) - 然后如果用户手动切换语言，需要动态变化lang值。
效果可以看下微软官网，默认语言应该是判断了IP国家，默认lang是zh-CN 
然后切换US语言后，lang就变为了en-US 
3.1.2 Language of Parts 局部语言 AA
内容里每个段落或短语的人类语言可以编程式确定，除了文本中专有名词、术语、不确定语言的词汇、已经融入到本地语言的词语或短语。
解读：同上，这里强调页面局部内容的语言。html中是给局部元素加lang属性，如：<blockquote lang="zh">
3.2 Predictable 可预测性
3.2.1 On Focus 焦点 A
解读：比如当元素获得焦点时，个别会有比较大的焦点样式变化，比如变高变宽了，尽量避免这种样式变化，可能会导致上下文样式啊、布局等变化，所以需要尽量简化焦点样式。
3.2.2 On Input 输入 A
解读：举两个例子：
- 比如一个下拉select选择框，一般UI是点击下拉框时，下拉框会浮动在表单上方的；但是如果做成不是浮动，那就会把表单下面内容给挤下去，导致了上下文位置变化，这种就是不允许的。
- 比如有个语言select选择框，当语言变化时，由于不同语言的文字长短不一样，可能会导致上下文位置变化，这种就需要给用户一个提示，提示在选择选项时将更改语言，简单说就是让用户知道这是一个切换语言选择框。
3.2.3 Consistent Navigation 一致性导航 AA
解读：多个页面的相同导航，位置和顺序要固定，保持一致。设计上的规范了，一般网站都满足。
3.2.4 Consistent Identification 一致性标识 AA
解读：理解是一个网站里，所有页面里用到的功能类似的组件，其样式、交互、功能都需要保持一致性，也就是需要用到的UI库，或者从设计上，需要统一主题、风格、及交互规范。
3.3 Input Assistance 辅助输入
3.3.1 Error Identification 错误标识 A
如果输入错误能够被自动发现，错误类型应能被标识，并且用文本描述给用户。
解读：表单中的可输入控件，如果输入错误，可以自动提示，有特殊样式标识，并且需要提示错误信息。 其实就是表单错误提示，比如一个必填输入框，当输入空值，或者格式不对时，点Save按钮时会验证，并且在输入框底部出现红色提示语。提示语可以是红色文字、或者popup形式，都可以。 但是这里得注意role和aria属性的用法，如下图微软的登陆页面：
- 输入框必填，需要给
input设置aria-required="true"标识是个必填项； - 出错误提示语时，需要给提示语div元素设置
role="alert"标识是个提醒元素，并且设置aria-live="assertive"读屏相关属性，用来中断屏幕阅读器当前的阅读，将更新的内容优先通知给用户，以确保用户能够及时获得重要信息。
3.3.2 Labels or Instructions 标签或说明 A
当需要用户输入内容时，要给出标签或说明。
解读：需要在用户输入之前，能知道输入内容的限制或建议。分两方面：
- 设计上：需要给field加红星标识必填项，加描述提示语标识输入的内容格式等。
- 无障碍上：需要设置必要的
role和aria属性，标识必填或提示等，比如：- 如上例，给
input加type="email"标识是个email输入框。 - 如上例，给
input设置aria-required="true"标识是个必填项； - 再比如给
input设置aria-label、aria-labelledby或aria-describedby等描述，提示用户该输入框作用、格式要求等。
- 如上例，给
3.3.3 Error Suggestion 错误建议 AA
如果输入错误能够被自动发现，且修改建议已知，则提供建议给用户，除非它会危及安全或影响内容目的。
解读：检测到用户输入的具体错误，应向用户提供正确输入的建议。比如注册页面的username输入框，空值、重名、包含非法字符这些验证，都需要给出不同的具体错误信息。
3.3.4 Error Prevention (Legal, Financial, Data) 错误预防（法律、金融、数据） AA
对于用户操作将引起法律承诺或或者金融交易的网页、修改或删除数据存储系统里的用户可控数据的网页、提交用户测试响应的网页等，对于这些网页，以下部分至少有一为真：
可逆 提交是可逆的。
检查 用户输入的数据将被检查是否有输入错误，并为用户提供一个改正错误的机会。
确认 提供一个机制用于最后提交之前审查、确认和纠正信息。
解读：法律确认、财务交易之类的操作、或者一些用户数据删改的操作，系统需要有足够的验证、确认，可逆（cancel）。
- 比如涉及交易的操作，交易操作需要足够的确认步骤，让用户准确看到交易的面额、支付方式等信息，并且在最终支付操作之前，随时可以取消操作；
- 再比如删除用户数据页面，点删除按钮时需要弹框确认，给足够提示信息，再次点确认才会真正被删除，且还需要在弹框提供cancel按钮。
总结
WCAG 2.1 指南中的第三章节 3. Understandable 可理解性 就说完了，下一篇会继续介绍第四章节 4. Robust 鲁棒性 和 第五章节 5. Conformance 一致性 中的规则。
关于前几章节介绍，欢迎阅读并订阅专栏：万字解析 WCAG 2.1 AA 网页内容无障碍指南