无障碍测试是主题开发流程中至关重要的一环。
它确保安装了您主题的网站能够供所有人使用,无论其能力如何。
本课程将向您介绍一些用于测试主题无障碍性的工具和技巧。
测试、修复、重复
早期且反复测试有助于在发布前发现新组件或页面中的潜在问题。
测试主题的方法
自动化测试
基于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键在链接/按钮/表单字段间切换,用回车或空格键激活交互元素
- 通过浏览器开发者工具切换配色方案,确保深色模式/高对比度模式下的显示效果
- 使用设备内置语音控制或专用屏幕阅读器浏览网站——这是视障用户的主流上网方式,有时甚至是唯一方式
结语
将”无障碍优先”的开发理念与正确的测试工具相结合,才能创建出真正全民可用的网络主题。