使用开发者工具确保可访问性

已完成

在不同的客户端和视图中测试网页与在各种浏览器中测试网页同等重要。 这种测试可能不适用于所有情况,并且可能会遗漏用户使用浏览器但可能患有其他残疾的情况。 幸运的是,作为开发者,你可借助某些工具来测量页面的可访问性。

对比检查

色盲用户可能无法区分颜色,或是可能很难辨别相似的颜色。 万维网联合会(W3C)是该 Web 的标准组织,为 颜色对比度建立了分级系统

我们很难手动选择正确的颜色,确保所有用户都能访问页面。 你可以使用以下工具生成适当的颜色及测试站点,从而确保合规性:

灯塔

Lighthouse 是 Google 研发的网站分析工具。 该工具广受欢迎,现已添加至许多浏览器的开发者工具中。 Lighthouse 可以检查页面的搜索引擎优化 (SEO)、负载性能和其他最佳做法。 Lighthouse 还可分析页面,并为页面当前的可访问性打分。

注意

与任何自动化工具一样,你不能仅依靠 Lighthouse 提供的分数来评判页面的可访问性。 不过,该工具确实提供了一个良好的起点,能够帮助我们发现和纠正问题。

练习:生成页面的 Lighthouse 可访问性分数

在浏览器中测试 Lighthouse。 以下屏幕截图使用 Edge,但你可以在 Chrome 和其他许多浏览器中执行相同的步骤。

  1. 打开浏览器并转到 主Microsoft网页

  2. 选择 F12 键以打开开发人员工具。

  3. 选择顶部的 V 形 (>>) 图标,打开隐藏选项卡列表。

    突出显示 V 形的开发人员工具的屏幕截图。

  4. 从列表中选择“Lighthouse”

  5. 在“类别”下方,清除“辅助功能”之外的所有项。

  6. 在“设备”下方,选择“桌面设备”

    Lighthouse 屏幕截图:仅在“类别”下方选择了“辅助功能”,且仅在“设备”下方选择了“桌面设备”。

  7. 选择“ 生成报表”。

  8. 请注意分数和页面的相关信息。

  9. 你也可以测试其他页面,具体步骤为:在 Lighthouse 中选择“全部清除”,转到其他页面,然后选择“生成报告”

    Lighthouse 的 URL 部分的屏幕截图,其中突出显示了用于清除所有项的按钮。

现在,你已了解 Lighthouse 的使用说明,以及该工具可提供的可访问性信息。