WebAIM  - 无障碍记

快速参考
测试Web内容可访问性

注意

此资源被设计成打印为一个页面的PDF文件。一个HTML版本也可用以下。

测试与WAVE

  • 在运行报告wave.www.kanehsu.com。对于非常复杂的或非公开的网页,使用的WAVE Chrome或Firefox扩展
    • 观看的WAVE网页概述视频。
  • 错误图标旗已知问题。其他图标识别潜在的问题或功能。单击图标突出显示相应的元素,并进一步使用参考面板。
  • 使用细节小组审查页面的问题。点击一个图标,找到它的页面。取消选中图标可以隐藏它们。
  • 关掉样式简化页面视图,并检查阅读和通航秩序。
  • 点击在页面底部的按钮,查看与WAVE图标的页面代码。

图片

  • 确保替代文本(以绿色显示)输送的等效内容和/或功能的形象。
  • 寻求新的方式与真正的文本替换文本的图像。
  • 内容通过CSS的图像传送必须有替代文本。

标题和地区/地标

  • 使用结构体面板的侧边栏审查标题
  • 主标题通常应该是一个

  • 确保标题和地区/地标反映页面结构。
  • 寻找跳过标题级别(例如,

    )。

对比

咏叹调

形式

  • 确保形式控件具有描述性标签

其他常见的WAVE检查

  • 页语言指定(例如,)。
  • 如果有数据表确保表头都存在,并有正确的范围。
  • 寻找具有类似暧昧的链接文本链接“点击这里。”
  • 确保页面标题是描述性和简洁。

使用清单

检查键盘辅助

  • 与Mac,按首次测试控制+ F7使全键盘辅助功能。
    • 在Safari中,选择首选项>高级>辅助功能>按Tab键突出显示每个项目...
  • 导航仅使用页面键盘
    • 标签:导航交互元素(链接,表单控件等)
    • Shift + Tab键:导航倒退。
    • 输入:激活链接或按钮,提交大多数形式。
    • 空格键:激活复选框和按钮,展开一个选择菜单,或滚动窗口。
    • 方向键:导航单选按钮,选择/下拉菜单,滚动条,选项卡板,树菜单等
  • 查找鼠标仅相互作用(例如,翻转的菜单)。
  • 确认每一个聚焦元素有一个键盘焦点指示灯/轮廓具有至少3:1倍的对比度。
  • 确保在任何“跳过”链接正常工作和对视力正常的键盘用户可见。
  • 确保通航秩序是合乎逻辑的和直观。
  • 测试对话框,弹出窗口。你可以浏览并关闭对话框?请问焦点回归到合理的地方?
    • 直到被解散模式对话框必须保持注意力集中。
    • 丢失焦点时的非模态对话框必须关闭。
    • 退出还应该关闭所有对话框和菜单。

测试内容缩放

  • , 按按Ctrl / CMD和:
    • +在放大(较大)
    • -缩小(小)
    • 0复位到100%
  • 对于WCAG 2.0 - 放大到200%
  • 对于WCAG 2.1 - 调整视1280个像素宽,放大到400%。避免水平滚动除非所需的内容(例如,数据表或图)。
  • 纯文字缩放(推荐) - 在火狐选择视图>缩放>缩放文本仅。缩放到130-150%

测试使用屏幕阅读器

  • WebAIM教程:NVDAVoiceOver会
  • 专注于导航,表单和动态内容。
  • 通过ARIA提供的信息准确吗?
  • 是导航的形式读出时的形式指令和错误的反馈?
  • 是否所有的动态变化和更新访问?万博体育官网网址

扫描其它问题

  • 标题成绩单媒体。
  • 信息不依赖于颜色,声音,形状,大小或位置。
  • 动画或更新内容或媒体可以暂停或停止。
  • 无频闪内容/视频,可能导致癫痫发作