作为 Liberogic 网页可访问性工具系列的第二款产品,我们发布了 Chrome 扩展功能「A11y Navigation Auditor」。该工具能够快速准确地可视化网站的「结构框架」,顺利接近容易被忽视的问题。它旨在支持全面的结构检查,为实现更可靠的可访问性诊断而开发。
开发背景
用于诊断可访问性的工具有很多。
但只处理标题或地标等特定类别的工具无法掌握全局。
在页面上叠加标记的类型虽然能看到全局,但会使屏幕变得混乱,妨碍俯瞰。
我们的目标是填补这一空白,开发一款「既能掌握全局,又不使屏幕混乱、能够俯瞰的」工具。
我们参考了 VoiceOver 旋转器显示等屏幕阅读器的元素列表功能。
通过在侧面板中可视化这一功能,并添加问题检测功能,我们实现了一个易于使用且功能强大的结构诊断开发者工具。
审计对象和检测的问题
▪️ 标题
级别跳跃、空标题、角色丢失等
▪️ 链接
文本为空、表述不清、链接重复等
▪️ 表单控件
标签缺失、autocomplete 属性、错误消息关联等
▪️ 地标
main 缺失、重复角色区分、分段元素缺陷等
▪️图像
缺少alt属性、不当的alt文本(如"图像"等)、使用文件名等
▪️表格
缺少caption或标题、复杂结构中scope/headers属性不完善等
主要功能
▪️WCAG 合规问题检测
参考 WCAG 成功标准(1.1.1、1.3.1、2.4.4、3.3.1、4.1.2 等),以错误、警告、信息三个等级显示。
▪️计算后的可访问性名称显示
基于 ARIA 规范,可视化屏幕阅读器实际读出的名称及其来源。
▪️ ARIA 状态实时监控
aria-expanded、aria-invalid 等状态变化,以及 aria-label 等引起的无障碍名称动态变化也会自动检测,可以立即确认操作导致的无障碍改变。
▪️点击进行高亮
点击面板中的项目,页面会自动滚动至相应元素并进行高亮显示。也可以使用键盘上下左右箭头键切换项目。
▪️专为专业人士提供的高级功能
・隐藏元素检查切换
・第三方小部件自动排除
・支持日语和英语两种语言
Liberogic 的目标是让无障碍访问不再被视为"特殊安排",而是成为"理所当然的品质标准"。
继「Area Contrast Checker」之后,这次的「A11y Navigation Auditor」也是我们在实际工作中迫切需要的功能的具体呈现。正如 Navigation Auditor 这个名字所示,我们希望支持任何人都能顺利到达目的地的网站制作。我们投入了这样的初心。
让无障碍访问更贴近,更顺畅。下一个工具也在准备中,敬请期待。