Accessability 项目初试

6

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-labelplaceholder (屏幕读取器读取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>

你可能感兴趣的

载入中...