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>