如何提高Web可访问性
准则
万维网联盟 Web 可访问性推进组织制定了 Web 内容可访问性指南，即 WCAG，以便残疾人士（包括视觉、听觉、身体、语音、认知、语言、学习和神经系统残疾）可以更方便的访问 Web 内容。
第一套指南 WCAG 1.0 于 1999 年 5 月发布，并于 2008 年 12 月更新为 WCAG 2.0，于 2018 年 6 月更新为 WCAG 2.1。WCAG 2.2 计划于 2022 年 6 月发布，WCAG 3.0 则计划于几年后发布。WCAG 的更新总是向后兼容。因此，如果符合 WCAG 2.1，也必将符合 WCAG 2.0。
1.与技术无关：换句话说，准则可以应用于各种 Web 内容格式，而不仅仅是 HTML。因此，WCAG 2.1 可以涵盖由 PDF、Flash、JavaScript 和其他当前和未来 Web 技术生成或提供的内容。
2. 可测试：每个准则均以一种可进行客观测试的方式编写，以确保一组无障碍专家都同意内容符合该准则要求。无障碍准则的一个挑战是，虽然一些准则在技术上可以测试，但另一些准则需要人为判断来确定是否成功达到了准则要求。
3. 支持优先实施和上下文实施：WCAG 2.1 准则被赋予优先权，其中涉及不遵循准则对特定残障用户群体可能产生的影响。这使得作者能够针对特定情况根据最重要的准则做出明智的决策。此外， 还引入了支持的辅助功能的概念。这可以让作者决定如何更好地利用那些可能没有全面的无障碍支持，或者可能要求用户具有特定的辅助型技术和/或浏览器的 Web 技术，以便从无障碍功能中受益。
对于 WCAG 指南的每个版本，成功标准有三个等级 —— A、AA 和 AAA。
等级 A：最低要求 等级 AA：一般要求 等级 AAA：强化要求
成功标准的赋级需要综合考虑以下因素：是否有可能所有网站和内容类型都达标 该标准是否会限制外观、感受或功能 如果不符合标准，不存在变通方法
目前，大多数政府标准要求网站满足 WCAG 2.1 AA 级标准。目前，所有涉及组件设计或开发的 Viget 项目都致力于实现 WCAG 2.1 AA 级标准。
让多媒体内容可访问
大部分的视频都需要字幕。为了满足 AA 级要求，你必须为所有预录和直播视频提供字幕。要达到 AAA 级强化标准则需要提供手语翻译。
大多数人不知道的是，为了达到 AA 级标准，还需要为所有预录和直播视频提供音频描述。而要达到 AAA 级强化标准，则需要对所有视频进行扩展音频描述。
但什么是音频描述？音频描述是提供视频中视觉元素信息的解说，为盲人和视力障碍者提供帮助。
关于视频，你还应该知道的是，视频应该可以控制，甚至是背景视频。要达到最低标准 A，就需要针对所有自动播放的音频和视频提供暂停和停止按钮。要满足 AAA 级标准，则需要有控制背景音频的能力。
不仅仅要考虑视频的控制问题。对于由交互触发的运动动画，如当鼠标悬停或滚动时移动的图片，要满足 AAA 级标准，就必须提供一种方法来禁用这些动画。
图片可访问性
装饰性
如果一张图片在网页上只是为了装饰好看并无实际太多信息，那么他不具备信息性，这种图片应该给alt设置为空
信息型
对于有信息描述的图片，例如一个装满红枣的盘子或者一只生气的大公鸡。又或者是某个有标志性的图标，这种图片应该把alt设置成视觉上显示的内容
功能性
有功能性的图标，例如搜索、打印机图标、新建窗口等有功能的图标alt应该设置传达将发起的操作（图片的用途）而不是图片的描述
如何为图片编写alt文本呢
宜在 alt 文本中描述的内容
物体的摆放位置 图片风格，如绘画或图表 颜色 人名 服饰 动物 情绪，如微笑或哭泣 周围环境
不宜在 alt 文本中描述的内容
颜色描述 图片类型，如“……图片”或 “……标志” 显而易见的细节，如某人有两只眼睛、一个鼻子和一张嘴 和图片焦点无关的细节，或与相关文案上下文无关的细节 描述过于诗意或详细
建议：尽量保持 alt 文本短而精
例如：
好的文本：皮蛋
更好的文本：一个白色盘子上有6个上面放着雪里红调料的皮蛋
如何为人物编写alt文本呢
当涉及到在 alt 文本中描述人时，需要格外谨慎。或许你可以准确地描述某人的衣服或发型，但你可能无法说出一个人的具体情况。外表可能具有欺骗性。你可能无法仅凭外表就准确了解某人的种族、民族、性别认同或能力。
除非这些具体情况与上下文有关，否则你应该完全避免包括它们。如果你确实想包括这些内容，那么你应该设法询问对方他们会如何描述自己。
例如：
让本文可访问
为了使文本更易于理解，文本内容最好不要超过8年级，这可以有效的帮助有认知障碍或学习障碍的用户。同事也有助于依赖屏幕阅读器的用户。屏幕阅读器的用户每秒的阅读速度是正常人的3-5倍，所以文本内容越简单越有效越好。
同样，还应该避免使用技术术语或缩略语，否则要对其进行解释或注明全称。AAA 级指南要求，除非提供解释，否则不要使用不常见的词语。
文本大小与间距
为了满足 AA 级标准，文本应可以调整到 200% 而不损失内容或功能，这意味着你仍然可以看到所有的文本，即使是必须水平滚动才能看到。然而，为了满足 AAA 级标准，文本必须能够调整到 200% 而且不会出现滚动条。
AAA 级指南还指出，内容块的宽度不应超过 80 个字符，而且文本不应该两端对齐，也就是说，不应该左右边距同时对齐。
标题
屏幕阅读器能够按标题来浏览页面，所以它们可以读取所有的 H2，直到找到想要的内容，然后它们可以读取所有的 H3，不断缩小信息的查找范围，直到找到所需的具体内容。所以使用得当，标题类似于目录或者大纲。可以帮助用户快速的找到要找的内容。
页面上不要用为了样式用标题标签设置样式，这样会导致误导用户，不利于阅读。同时要尊重层次结构，不要从H2跳到H4。
列表
列表为屏幕阅读器用户提供了有关列表的信息，帮助他们决定如何继续。所以在添加列表时，要正确选用列表格式（无序或有序列表）。屏幕阅读器可以识别列表的 HTML，并据此向用户提供列表项的数量，以及识别任何嵌套列表及其项数。如果是用户不感兴趣的东西，那么屏幕阅读器还允许用户跳过列表，而不是强迫他们把整个列表听完
链接
为了使用户阅读简单，链接内容最好简单明了，让用户可以阅读链接文本就可以知道这是个链接并且知道他将会去哪里。这就是为什么说像“点击这里 ”和“更多内容”这样的链接文本不是好链接文本的原因。对于它们，用户得了解上下文内容，才能知道链接的用途。
链接最好不要用原始的URL，因为屏幕阅读器会全部读出来。同事链接文本里不要有无用的符号。最后不要给非链接文本加下划线。这样用户会感到困惑，他们会不知道页面上哪些带下划线的文本是链接哪些不是。虽然这对所有用户来说都是一个问题，但对有认知或学习障碍的用户来说，这个问题尤其突出。
颜色
永远不要用颜色作为区分功能的唯一标准。这对于视力障碍的用户来说是一个灾难。
错误的示例：
争取的示例：
对于残疾人士特别是视觉障碍的用户来说，他们想要获取网页内容会比正常人难上几倍，希望可以通过web同学的努力可以使用户得到更好的体验。
参考：https://mp.weixin.qq.com/s/28uaweP8NvSDkeYdWf7vKA
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。