自动测试网页中的辅助功能问题

“问题”工具包括一个辅助功能部分,可自动报告图像上缺少可选文本、表单字段上缺少标签以及文本颜色对比度不足等问题。 默认情况下, “问题” 工具在 DevTools 底部的 “快速视图 ”面板中打开。 本文使用辅助功能测试演示网页逐步讲解问题工具的辅助功能部分。

可通过多种方式打开 “问题” 工具,例如:

  • 单击 DevTools 右上角的问题 计数器 (问题计数器) 。

  • “元素” 工具的 DOM 树中,按 Shift ,同时单击元素上的波浪下划线。

  • “命令”菜单中,键入 “问题”,选择“ 显示问题”,然后按 Enter

查看“问题”工具的“辅助功能”部分

  1. 在新窗口或选项卡中打开 辅助功能测试演示网页

  2. 右键单击网页中的任意位置,然后选择“ 检查”。 或者,按 F12。 DevTools 将在网页旁边打开。

    在右上角,将显示 “问题计数器 (问题计数器) 。 “问题”计数器是语音气泡图标以及自动检测到的问题数。

    DevTools 中的“问题”计数器,指示当前文档中存在多少问题

  3. 刷新页面,因为某些问题是根据网络请求报告的。 请注意 问题计数器中的更新计数。

  4. 单击“ 问题”计数器。 “ 问题” 工具将在 DevTools 底部的 “快速视图 ”面板中打开:

    问题工具中显示的辅助功能警告

  5. 在“ 问题 ”选项卡上,展开 “辅助功能” 部分。

验证输入字段是否具有标签

若要检查输入字段是否连接了标签,请使用 “问题” 工具,该工具会自动检查整个网页并在 “辅助功能 ”部分中报告此问题。

  1. 在新窗口或选项卡中打开 辅助功能测试演示网页

  2. 右键单击网页中的任意位置,然后选择“ 检查”。 或者,按 F12。 DevTools 将在网页旁边打开。

  3. 在右上角,单击 问题计数器 (问题计数器) 。 “ 问题” 工具将在 DevTools 底部的 “快速视图 ”面板中打开。

  4. 在“ 问题 ”选项卡上,展开 “辅助功能” 部分。

  5. 展开 “警告Form elements must have labels: Element has no title attribute Element has no placeholder attribute”。

  6. 单击“ 在元素中打开” 链接。

    在“问题”工具中单击链接后显示有问题的 HTML 的元素工具

    此时会打开 “元素” 工具,并在 DOM 树中突出显示元素。 “ 样式 ”窗格显示元素的应用 CSS 规则。

    现在会显示以下代码:

    <label>Search</label>
    <input type="search">
    <input type="submit" value="go">
    

    在上述代码中 label ,元素的使用不正确,因为 元素 label 和特定 input 元素之间没有连接。 若要将 label 元素连接到特定 input 元素,请使用以下任一选项:

    • input 元素中 label 嵌套 元素。

    • 在 元素中 label ,添加一个 for 与 元素的属性匹配 id 的属性 input

还有另一种方法可以测试元素之间是否存在连接:

  1. “元素” 工具中,选择 <label>Search</label> DOM 树中的元素。

    在网页上,请注意,焦点仅显示在 “搜索 ”标签上,而不显示在输入文本框上。 正确的实现会将焦点放在输入文本框和搜索标签上search

  2. 作为正确连接的示例,请选择捐赠窗体上的 “其他 ”标签。

    焦点指示器框正确显示在“ 其他 ”标签旁边的输入文本框上,因为存在匹配 for 值和 id 属性值。

  3. “问题”工具中,单击“ 进一步阅读 ”,了解有关该问题的详细信息。 若要在新选项卡中打开链接,请在单击链接时按 Ctrl (Windows、Linux) 或 命令 (macOS) :

    “问题”选项卡上的链接,指向有关问题的更深入信息

验证图像是否具有替换文字

基本辅助功能测试需要确保为图像提供可选文字 (也称为 替换文字) 。

若要自动检查是否为图像提供了替换文字,请使用具有辅助功能部分的问题工具。 默认情况下, “问题” 工具在 DevTools 底部的 “快速视图 ”面板中打开。

  1. 在新窗口或选项卡中打开 辅助功能测试演示网页

  2. 右键单击网页中的任意位置,然后选择“ 检查”。 或者,按 F12。 DevTools 将在网页旁边打开。

  3. 在 DevTools 的右上方,单击“ 问题” 计数器。 “ 问题” 工具随即打开。

  4. 在“ 问题 ”选项卡上,展开警告 Images must have alternate text: Element has no title attribute。 有四个缺少替换文字的图像实例:

    报告缺少可选文本的图像的问题工具

请参阅 图像必须具有备用文本

验证文本颜色是否具有足够的对比度

若要自动检查文本颜色是否具有足够的对比度,请使用具有辅助功能部分的问题工具。 默认情况下, “问题” 工具在 DevTools 底部的 “快速视图 ”面板中打开。

  1. 在新窗口或选项卡中打开 辅助功能测试演示网页

  2. 右键单击网页中的任意位置,然后选择“ 检查”。 或者,按 F12。 DevTools 将在网页旁边打开。

  3. 在 DevTools 的右上方,单击“ 问题” 计数器。 “ 问题” 工具随即打开。

    可能存在演示网页上的两个元素对比度不足的警告。

    问题工具中报告的对比度问题

  4. 根据你的设置,“ 问题 ”选项卡可能会显示一条警告,例如 用户可能由于颜色对比度不足而难以阅读文本内容。 可以展开该警告,然后展开 “受影响的资源”。 此时将显示一个元素列表,其中包含对比度不足的元素列表。

  5. 单击元素 li.high 。 在呈现的网页中,突出显示了“捐赠”部分中的“狗”链接,显示一个小的信息覆盖层。 此覆盖与将鼠标悬停在 元素 工具的 DOM 树中的元素上时显示的覆盖相同。

    单击“受影响的资源”部分中的链接后突出显示的网页中的元素

DOM 树中的波浪下划线指示自动检测到的问题

元素工具中的 DOM 树使用波浪下划线直接在 HTML 中标记问题。 这些问题由 问题 工具报告。 单击带有波浪下划线的任何元素时,按 Shift 时, “问题”工具 将打开。

  1. “元素” 工具的 DOM 树中,单击 元素时按 Shift ,该元素 <input type="search">input有一条波浪线。 随即显示 “问题”工具 ,并显示该元素的问题。

    在 DOM 视图中具有波浪下划线的元素有问题

另请参阅