无障碍测试是主题开发过程中至关重要的一环。
它确保安装了你的主题的网站,无论用户的能力如何,都能被所有人使用。
本课程将向你介绍一些用于测试主题无障碍性的工具和技巧。
测试、修复、重复
尽早并反复进行测试,有助于你在新组件或页面发布前发现潜在的无障碍违规问题。
让我们来看看一些测试主题的方法。
自动化测试
基于 Chromium 的浏览器在开发者工具中内置了 Google Lighthouse。
Lighthouse 也可以作为独立网页和 NPM 包使用。
Firefox 有无障碍检查器,Safari 提供了审核功能。
WebAIM 的 Wave 是一个适用于 Firefox 和基于 Chromium 浏览器的浏览器扩展。
Deque Systems 的 axe 是一套无障碍测试工具:包括浏览器扩展、Figma 插件、VS Code 扩展、代码检查器等。
Pa11y 是一个面向开发者的免费开源替代方案。
WordPress 插件 (1:13)
Sa11y、WP Tota11y 和 Editoria11y 是你可以安装的插件,用于测试 WordPress 网站上的无障碍问题。每个插件在无障碍检查方面的方法略有不同;因此,请全部测试一下,看看哪个适合你的需求。
最后,还有 Accessibility Checker,它可以在文章编辑器和前端工作,显示错误,并提供详细解释(包括相关代码片段)和可能的修复方法。
手动测试
此外,你还可以进行一些手动测试。
- 尝试仅使用键盘浏览你的主题——不要用鼠标。使用
tab键在链接、按钮和表单字段之间导航。按enter或space键激活这些交互元素。 - 更改配色方案(通过浏览器的开发者工具),以确保在深色模式或高对比度模式下显示良好。
- 最后,使用你设备内置的语音控制功能或专门的屏幕阅读器软件浏览网站。这是首选——有时也是唯一的方式,因为许多视障人士都使用网络。
结论
将无障碍优先的开发方法与开发过程中正确的测试工具和技巧相结合,将有助于确保你创建的主题能够被网络上的所有人使用。