Accessability 项目初试

Accessability(A11Y)

最近在给一个项目做移入开发环境之前的收尾工作，其中一项就是无障碍设计测试。公司内部有专业的无障碍设计把控人员，但是基本的常识还是零零总总需要学一些，看了一些资料总结了基础的一些需要知识点。

Visual 考虑色弱视弱

避免使用颜色传递信息
确保文字大小用户可以调节，带有信息的元素需加上aria标签，这样用户可以在屏幕读取器的帮助下获取信息

Hearing 考虑听觉障碍

之带用音频传递信息的元素，需要加上文字信息
确保用户在不使用音频的情况，也能获取相同信息

Mobility 考虑视力障碍无鼠标操作

用户可以在不使用鼠标，屏幕的情况下，仅凭键盘也能完成在页面上移动
仅键盘完成整个页面的浏览操作
如果任何一个动作必须使用到鼠标，即为不合理设计
所有的可编辑区域需要按序排列，确保tab键可以全部键入
合理设计键盘快捷键帮助用户快速移动

Congnition 考虑各种协助工具接入

应用需能在使用屏幕读取器等协助工具下正常运作
避免使用屏幕闪烁等设计
避免使用基于时间的设计（因为有的协助工具需要花更长的时间读取屏幕信息）

如何判断应用是否accessible？

Visual

高对比度模式下，也能方便地读取信息
非文字信息有文字信息为辅
使用屏幕读取器时，能正常浏览获取信息
黑白显示下，也能正常读取信息

• 标签
  a) 是否使用下划线（方便色盲色弱人士区分）
  b) 标签提示信息是否合理

（例如，有的标签使用’点击这里’，在一屏有多个’点击这里’的情况下，用户无法判断各标签分别跳转到哪里）

• 在仅使用键盘操作的情况下，也能正常使用应用
  例如 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

W3Schools
Google
Microsoft