怎样实现网页无障碍

1.可感知性

1.1替代文本

  1. 非文本内容：为所有呈现给用户的非文本内容都提供相同目的
  2. 为非文本内容提供长描述，且提供相同的目的、呈现相同的信息。
  3. 使用aria-label为对象提供标签
  4. 使用aria-labelledby为非文本内容提供文本替代
  5. 使用图像群组中的一个条目的替代文本，来描述群组中所有条目
  6. 将有相同目的地的临近图片和文本链接合并
  7. 为applet提供替代文本
  8. 为img元素使用alt属性提供替代文本
  9. 使用object元素的主体提供替代文本
  10. 为ASCII艺术字、表情、脑残体提供替代文本；
  11. 为非文本内容提供简短描述作为替代文本
  12. 使用Aria-describedby为图片提供描述
  13. 在临近非文本内容的位置提供一个链接，链接到页面中的提供长描述的位置
  14. 在分文本内容附件提供一个文本长描述，并在简短描述中说明长描述的位置
  15. 为非文本内容提供长描述，长描述需要提供相同的目的呈现相同的信息
  16. 使用longdesc
  17. 使用aria-labelledby将很多个文本节点连接成一个标签
  18. 为image mape的area元素提供文本替代
  19. 提供链接文本描述链接元素的目的
  20. 使用图片作为提交按钮的使用alt属性
  21. 使用label元素连接文本标签和表单控件
  22. 当不能使用label元素的使用，使用title属性标记表单控件
  23. 提供简短文本替代，描述实时纯视频、实时纯音频内容的目的
  24. 为非文本内容提供一个简短替代文本，替代文本为可接收命名或描述性命名
  25. 提供替代文本描述验证码的目的
  26. 保证页面中包含其他验证码，使用不同模式提供相同目的
  27. 使用CSS包含装饰性图片
  28. 使用图片的空alt文本、无title属性，图片可被辅助技术忽略

2.可操作性

  1. 键盘事件无障碍使用总结

2.3可导航性

    跳过内容块。

  1. 在页面顶部添加一个链接直接跳转到主内容区域
  2. 在重复内容块开始位置添加一个链接跳转到块尾
  3. 在页面顶部添加多个链接跳转到内容的每个区域
  4. 使用ARIA路标标记页面上区域
  5. 在内容的子章节之前，提供标题元素
  6. 使用可展开折叠菜单跳过内容块
  7. 使用frame元素将重复内容块分组
  8. 基于结构标记放置内容

    9. 页面标题。

  9. 为web页面提供描述性标题
  10. 在一个大web页面集中标识web页面的关系

    11. 焦点顺序。

  11. 遵循内容中序列和关系的顺序，放置交互元素
  12. 创建一个符合逻辑的tab顺序
  13. 让DOM顺序符合视觉顺序
  14. 将动态内容拆入到DOM中并紧跟触发该内容的元素
  15. 使用设备独立的方式创建自定义窗口
  16. 使用文件对象模型页面章节重新排序

    17. 链接目的(上下文中)。

  17. 提供链接文本为锚元素描述链接目的
  18. 为图像映射的area元素提供替代文本
  19. 在页面开始提供一个控制来改变链接文本
  20. 使用脚本改变链接文本
  21. 使用title属性补充链接文本
  22. 使用CSS来隐藏部分链接文本

3.可理解性

3.1可阅读性

让文本内容可阅读可理解。

  1. 在html元素上使用语言属性
  2. 为异常或限制方式使用词汇或短语提供定义
  3. 链接到定义
  4. 使用定义列表
  5. 使用link元素链接到词汇表
  6. 使用行内定义
  7. 使用dfn元素标识一个单词的定义样例
  8. 为缩写提供扩展或解释
  9. 在展开模式之前或之后立即提供缩略词的第一次使用
  10. 使用abbr元素为缩略词提供定义
  11. 添加一个文本摘要，让低文化水平的人也可以理解
  12. 提供视觉例子，图片，样例来帮助解释思想、事件、或过程
  13. 为文本提供语音版本
  14. 使文本更易阅读
  15. 为理解内容中使用的信息、思想、过程等添加手语版本

3.2可预测性

  1. 一致性导航_20160406
  2. 一致性标识
  3. 请求变更
  4. 焦点：当任何用户界面组件接收焦点时，不会引起上下文变化。
  5. 打开新窗口时提供给用户提示信息

    6. 改变任何用户界面组件的设置不会自动导致上下文的变化，除非在使用组件之前用户被告知了此行为会导致变化。

  6. 提供一个submit按钮
  7. 使用具有选择元素的按钮执行操作
  8. 在表单的改变引起上下文的改变时，需要在提交前告知用户将要发生的改变
  9. 在选择元素上使用onchange事件，而不会引起上下文的变化

3.3帮助用户避免和纠正错误

如果输入错误能够被自动发现，错误类型应能被标识，并且用文本描述给用户；

  1. 提供给用户文本描述来确认必填却没有完成的部分
  2. 使用Aria-Invalid来标识错误区域
  3. 提供客户端验证与警报
  4. 使用aria-alertdialog确认错误
  5. 使用ARIA role=alert或者Live Regions来标识错误

    6. 当需要用户输入内容时，要给出标签或说明：为交互组件提交必要的目的说明，说明信息输入的必要性

  6. 当需要用户提供的信息不在允许的列表值里面，提供一个文本描述
  7. 当用户输入错误格式和错误值时，需要提供一个说明
  8. 使用aria-describedby属性为交互控件提供文本说明
  9. 使用aria-labelledby连接一个标签和多个文本节点
  10. 创建一个机制允许用户跳转到错误区域
  11. 使用群组的roles来区分有关表单控件
  12. 为期望数据提供模式和样例
  13. 在表单或者一系列需要填写的区域的开端提供必要的文字来描述必须输入的内容
  14. 放置标签增强关系的可预测性
  15. 使用label和legend来明确指出表单控件的必填状态
  16. 使用fieldset和legend元素来描述表单控件中的组
  17. 当标签不能用的时候,使用title属性来区分表单控件
  18. 使用临近按钮来标记区域的目的
  19. 在改变表单控件引起上下文改变之前，描述将要发生的变化

    20. 错误建议:如果输入错误能够被自动发现，且修改建议已知，则提供建议给用户，除非它会危及安全或影响内容目的。 （AA级）

  20. 使用aria-required属性来标识必填区域
  21. 提供建议修正文本
  22. 提供客户端验证，通过使用DOM添加错误信息
  23. 当数据提交成功后，提供一个成功反馈

    24. 错误预防（法律、金融、数据）: 对于用户操作将引起法律承诺或者金融交易的网页、修改或删除数据存储系统里的用户可控数据的网页、提交用户测试响应的网页等 ，对于这些网页，以下部分至少有一为真：（AA级）

  24. 用户做了请求之后可以提供一个规定时间，允许用户来修改或取消该请求
  25. 在提交之前为用户提供复查更正答案的能力
  26. 在提交按钮之外提供一个复选框
  27. 提供一种机制恢复删除信息
  28. 请求用户确认已选择的操作并继续

    29. 帮助:上下文相关的帮助是可用的。

  29. 在每一个web页面上提供一个帮助链接
  30. 在网页上使用助手提供帮助
  31. 为文本输入提供拼写检查与建议
  32. 在表单区域起始部分提供文本说明来描述必要输入
  33. 使用title属性提供上下文敏感帮助

4.鲁棒性


友情链接： 腾讯公益慈善基金会 | 黄奕聪慈善基金会 | 阿里巴巴公益基金会 | 与人公益基金会 | 浙江敦和慈善基金会

深圳市信息无障碍研究会 版权所有 粤ICP备10065437号 地址：深圳市福田区雨田路1号富莲大厦一栋一层

电话：86-755-83594195 梁振宇（CEO）：15012661056