简单了解a11y无障碍

a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍

让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）

在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/

妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器

常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）

mdn对于障碍人士可访问性优化提供了建议：

1.使用多种方式传达内容，比如从文本到语音或是视频；
2.更易理解的内容，例如使用更通俗的语言书写的文本；
3.将注意力集中在重要内容上；
4.尽量减少干扰，例如不必要的内容或广告；
5.一致的网页布局和导航；
6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色；
7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器；
8.在不影响安全性的情况下尽可能让网站认证更简单；并且
9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。

而WCAG指南也提供了建议：

可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））

可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）

可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）

鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性