Accessability(A11Y)
最近在给一个项目做移入开发环境之前的收尾工作，其中一项就是无障碍设计测试。公司内部有专业的无障碍设计把控人员，但是基本的常识还是零零总总需要学一些，看了一些资料总结了基础的一些需要知识点。
Visual 考虑色弱视弱
避免使用颜色传递信息
确保文字大小用户可以调节，带有信息的元素需加上aria标签，这样用户可以在屏幕读取器的帮助下获取信息
Hearing 考虑听觉障碍
之带用音频传递信息的元素，需要加上文字信息
确保用户在不使用音频的情况，也能获取相同信息
Mobility 考虑视力障碍无鼠标操作
用户可以在不使用鼠标，屏幕的情况下，仅凭键盘也能完成在页面上移动
仅键盘完成整个页面的浏览操作
如果任何一个动作必须使用到鼠标，即为不合理设计
所有的可编辑区域需要按序排列，确保tab键可以全部键入
合理设计键盘快捷键帮助用户快速移动
Congnition 考虑各种协助工具接入
应用需能在使用屏幕读取器等协助工具下正常运作
避免使用屏幕闪烁等设计
避免使用基于时间的设计（因为有的协助工具需要花更长的时间读取屏幕信息）
如何判断应用是否accessible？
Visual
高对比度模式下，也能方便地读取信息
非文字信息有文字信息为辅
使用屏幕读取器时，能正常浏览获取信息
黑白显示下，也能正常读取信息
<a>标签
a) 是否使用下划线（方便色盲色弱人士区分）
b)<a>标签提示信息是否合理
（例如，有的标签使用’点击这里’，在一屏有多个’点击这里’的情况下，用户无法判断各标签分别跳转到哪里）
- 在仅使用键盘操作的情况下，也能正常使用应用
例如 input,checkbox 等是否能被选中 - 所有的功能都能通过键盘进行交互
- 如果有 blur 的需求，需添加键盘操作进行实现
- 不要使用 tab-index > 0
-1: script 使用 focus
0: 允许用户 focus - 如果有元素使用了ellipses, 需要提供键盘操作能读取 ellipses的信息
- focus 操作需要明确focus到了哪个元素
- 需支持其他字体
有的协助工具会改变字体帮助用户阅读，确保在字体更改的情况下也能正常使用应用
Hearing:
- 去掉所有声音，也能正常使用
Mobility
- 去掉鼠标，触屏等工具，仅凭键盘也能正常使用
Cognition
- 带有基于时间的元素，是否能被暂停，放缓？
Angular A11Y设计
button
按钮尽量使用 button 标签，避免用 img, div, span 等标签做按钮 (button标签自带可点击，tab, focus等功能，且在屏幕读取器使用时读取按钮内容)
如果需要使用非 button 的标签做按钮，加入 role =”button” 属性
Forms
表单使用 form 标签 （自带enter键键入表单的功能）
input 使用aria-label与placeholder （屏幕读取器读取aria-label）
其他常用的aria属性
aria-describedby
aria-label
aria-labelledby
aria-disabled
aria-hidden
tab排序标签
tabindex
<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>