Accessability 项目初试

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）
input 与label一起使用 (屏幕读取器可以根据label直接计算出Input name)

// best practice 1
<input id="check" type-"checkbox" checked>
<label for="check">input name</label>

//best practive 2
<label>
<input type="checkbox" checked> input name
</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>

Videos

• Captions: video标签的头部
• Description: 详细说明
• Navigation: 保证键盘可以完全控制videos

工具

• iphone: VoiceOver
• NVDA: Firefox 支持最好
• Jaws: 付费产品
• ChromeVox: 谷歌浏览器插件
• accessibility 测试网站：

http://wave.webaim.org/