对于这种特殊类型的测试,我们常规的缺陷报告表格并不提供足够的字段来包含所有必要的信息。此外,在 Bug Report Requirements 和 Bug Report Attachments 的教程文章中还有针对辅助功能报告的额外要求。
每个辅助功能报告都必须遵守的额外义务在以下章节中有详细描述。你可以在文章末尾找到两个示例,展示了遵守规则的辅助功能报告。
标题
你的缺陷标题必须满足以下格式,具体取决于辅助功能级别(A 或 AA)和 WCAG 成功检查点:
A级问题 | AA级问题 |
[A] [WCAG成功标准]: <缺陷标题> | [AA] [WCAG成功标准]: <缺陷标题> |
[A] [1.1.1]: 有意义的图像没有alt属性 | [AA] [4.1.2]: 注销链接未带角色 |
占位符必须替换为常规缺陷报告中使用的缺陷描述。例如:
[A] [1.1.1] 社交媒体链接通告不准确
以下是一些常见辅助功能问题的缺陷标题示例。请随意使用并根据你的需要进行调整:
[A] [4.1.2] 未带角色的注销链接
[A] [2.4.3] 以不正确的状态通告的筛选按钮
[A] [2.4.2] 页面标题不唯一且不具描述性
[AA] [2.4.7] 注销按钮下的测试链接无法看到焦点轮廓
复现步骤
通用规则
第一步:除了测试URL的调用,还要在第一步中包含你在测试中使用的工具的名称。在下面的模板中用例如NVDA、JAWS、WAVE等替换<工具>占位符:
1. 使用<工具>,打开<测试URL>,例如:使用NVDA,打开https://www.test.io
多个元素:如果一个检查点对同一类型的多个元素(例如按钮或链接)失败,将这些重复的元素分组在一个报告中。
多个发生:要记录同一页或不同页面上的相同问题的多个相同事件,请在实际结果下列出它们,标题为“其他发生”。
描述的操作:由于视障或盲人不使用鼠标,不要描述鼠标操作。相反,描述键盘和触摸板操作,例如:
使用TAB键导航到用户帐户
按ENTER键激活注销链接
向左滑动以聚焦汉堡菜单
自动化工具:欢迎使用工具如WAVE来识别问题,但你的报告,包括你的步骤,必须从用户的角度来描述。在步骤中,不能描述你如何使用自动化工具以及工具的报告,而必须像没有使用任何工具一样,基于WCAG检查点来描述一切。
颜色对比问题
你的步骤必须按照以下方式(替换占位符):
打开<测试URL>
...
...
测量<元素名称>的颜色对比比例
具有相同颜色设置的问题只能报告一次。例如,蓝色前景文本在白色背景上和白色前景文本在蓝色背景上属于相同颜色设置,不能提交两次。
实际结果
在实际结果字段中,除了常规的实际结果,你还需要提供哪个检查点失败了,例如:
失败的WCAG 2.1检查点:1.3.2 A级
附件
必须附加的附件取决于辅助功能问题的类型:
颜色对比:屏幕截图
所有其他问题:屏幕录像
屏幕截图:与常规测试一样,问题必须在屏幕截图上标出。
屏幕录像:在录制屏幕录像时,请在到达有问题的元素之前减慢操作。如果你在录制时以正常速度执行操作,观众将错过问题。如果在录制时执行操作太快,测试领导可能会要求你提供改进的录像。
键盘导航问题
在录制屏幕录像时,你的录像必须包括你在录制过程中按键盘的按键,否则观众无法理解问题。在你的计算机上启用屏幕键盘,它对Windows和macOS都可用。虚拟键盘会覆盖屏幕的一部分,你只需点击一个按钮来模拟相应的按键。
表单模板
我们目前没有针对辅助功能报告的表格,因此我们暂时使用可用性报告的表格。为了使所有报告看起来都一样,它们必须格式化。在下面,我们提供了一个格式化的模板,希望你使用它。
只需将模板复制粘贴到可用性表单的单文本字段中,替换占位符(例如<工具>、<URL>等)并输入你的信息。
注:
如果你没有使用工具找到问题,例如对于键盘导航问题,第一步应该是常规的:打开<URL>
如果你需要更多或更少的步骤,只需相应调整编号。
#####步骤
1. 使用<工具>,打开<URL>
2.
3.
4.
5.
#####实际结果
<实际结果>
失败的WCAG 2.1检查点(s): X.X.X A/AA级
######预期结果
<预期结果>
示例
屏幕阅读器示例
标题:
[AA] [2.4.3]: 焦点未被固定在汉堡菜单模态框中
步骤:
使用VoiceOver,打开https://test.io/
向右滑动以聚焦汉堡菜单
双击以激活它
在扩展的汉堡菜单模态框中滑动观察
实际结果:
焦点继续在模态框后面的背景内容中移动,这不是叠加的汉堡菜单的一部分。
失败的WCAG 2.1检查点(s): 2.4.3 A级
预期结果:
焦点应该被固定在汉堡菜单模态框中。来自底层页面的隐藏元素不应该被聚焦和通告。
键盘导航示例
标题:
[AA] [2.4.7] "获取演示"链接没有可见的焦点轮廓
步骤:
使用NVDA,打开https://test.io/
按TAB键以聚焦"获取演示"按钮,位于"您是否个性化"部分下并观察
实际结果:
"您是否个性化"部分的"获取演示"链接没有焦点轮廓。
其他出现情况:社交媒体图标
失败的WCAG 2.1检查点(s): 2.4.7 A级
预期结果:
可操作元素在获得焦点时必须具有可见的焦点轮廓。
颜色对比示例
标题:
[AA] [1.4.3] "获取演示"链接的蓝色文本与蓝色背景的白色文本不符合颜色对比要求
步骤:
滚动到"获取演示"链接
测量"获取演示"链接的颜色对比比例
实际结果:
"获取演示"链接未达到颜色对比要求。蓝色前景文本(#21BEF4)在白色背景(#FFFFF)上的对比比例仅为2.15:1。
失败的WCAG 2.1检查点(s): 1.4.3 A级
预期结果:
小文本的对比比例应至少为4.5:1。大文本(14 pt粗体或18 pt及更大)的对比比例应至少为3:1。