信息无障碍 -- Accessibility

任何人在任何情况下都能平等的、便利、无障碍地获取信息、利用信息。

关键词： 可及性 - 通用性 - 易用性

Web 界面可能面对：

• 视障人士
• 听障人士
• 老年人
• 读写障碍人士
• 受环境影响，不能正常使用信息的人士

是否考虑如下的因素：

• 读屏软件
• 屏幕放大器
• 语音控制
• 键盘用户
• 点击目标较小
• 小按键

了解

• WCAG （Web Content Accessibility Guidelines）2.0
• WAI-ARIA（Accessible Rich Internet Applications） 1.0

W3C 标准

WCAG （Web Content Accessibility Guidelines）2.0

Web内容无障碍指南(WCAG)2.0

• W3C推荐标准，同时也是ISO标准;
• 广泛运用在Web内容、应用与及网站运营;
• 前瞻性的设计思路;
• 可运用在软件、移动设备等；

WCAG 2.0 支持文档

• Web内容无障碍指南(WCAG)2.0 -- 中文授权翻译
• 如何符合WCAG 2.0 （How to Meet WCAG 2.0）
• 理解WCAG 2.0 （Understanding WCAG 2.0）
• WCAG 2.0 技巧 （Techniques for WCAG 2.0）

W3C 标准

Accessible Rich Internet Applications (WAI-ARIA)1.0

可及性富互联网应用 1.0，让动态Web内容更无障碍

• 定义了可以描述widget和网页结构的角色
• 拖拽类的资源、目标的属性界定
• 为Web对象和事件提供键盘导航

WAI-ARIA 1.0 支持文档

• 用户代理实施向导 User Agent Implementation Guide
• WAI-ARIA 创作实践 WAI-ARIA 1.0 authoring practices
• WAI-ARIA 初级读本 WAI-ARIA Primer
• WAI-ARIA 发展计划 WAI-ARIA Roadmap

可感知性

--- 信息和用户界面组件必须以可感知的方式呈现给用户

• 替代文本
• 适应性

替代文本

• 非文本内容可通过简短文字说明:
  aria-label、alt、aria-labelledby为元素添加替代文本
• 非文本内容需要较长的文字描述：
  aria-describedby、longdesc为元素添加较长文字描述

							

  姓名：
  
  
此处请填写您的姓名。 

							
							

• 参考 alt 案例，了解图像的替代文本
• 参考 longdesc 案例，了解图像的长描述
• 参考 aria-describedby 案例，了解为控件添加长描述

* 注意：如果非文本内容一个装饰性内容 - 设置alt为空 或者 在CSS中设置装饰图。

适应性

• 使用h1 - h6定义标题头
• 使用ol、ul、dl定义列表或者组织链接
• 使用caption 和 summary 为数据表格定义标题和给出介绍
• 使用role 定义网页区域

							
1
2

4


7
							
							

• 使用id、header关联数据表格中的数据单元

1. 参考 h1 - h6案例，了解读屏工具的使用结果
2. 参考 role 案例，了解网页区域定义

可操作性

--- 用户界面组件和导航必须可操作

• 键盘可访问
• 可导航性

键盘可访问

• 内容和功能可被键盘操作
• 能够通过键盘的tab键导航整个页面
• 键盘焦点不会陷入页面中的某个组件或插件

1. HTML 的标准控件可以被辅助工具访问
• 参考 链接的几种类型
• 参考 按钮的几种类型

可导航性

• 提供清晰的网页标题，即title
• 能够通过键盘顺序导航

							
  
tabindex = "2"
  
tabindex = "1"
  
tabindex = "0"
  
tabindex = "-1"
 
							
							

• 标题h和标签label 具有描述性

注意：使用tabindex，可能会破坏正常的导航顺序，或者导致读屏软件跳过元素。

• 参考 tabindex 案例一，了解导航顺序
• 参考 tabindex 案例二，了解导航焦点

可理解性

--- 信息和用户界面操作必须是可理解的

• 可读性
• 辅助输入

可读性

• 定义lang属性
• 局部语言，可以被用户代理识别

辅助输入

• 定义错误并以文本形式告知
• 为需要用户输入的内容提供标签和说明

鲁棒性

可以被种类繁多的用户代理(包括辅助技术)所解析

• 兼容

兼容性

• 规范使用HTML
• 确保页面能够被正确解析
• 标签都有正确的闭合
• id是唯一的
• 确保元素没有冗余的属性
• 可被辅助技术使用，并被用户代理接受
• HTML
• 参考：HTML中的标准控件和链接
• 使用label元素关联表单控件文本标签
• 表单控件的不能使用label元素，使用title属性
• 脚本语言或其它语言在HTML中重构的控件
• 通过aria-labelledby提供控件名称
• 控件通过编程语言自绘
• 通过WAI-ARIA的role让控件可被辅助技术使用
• 通过aria-labelledby提供控件名称