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/