作为 Liberogic 网络无障碍工具的第二弹,我们正式发布 Chrome 扩展程序「A11y Navigation Auditor」。它能够快速、准确地呈现网站的「骨架结构」,帮助您顺利处理容易被忽略的问题。该工具旨在支持全面的结构检查,实现更可靠的无障碍诊断。
开发背景
用于诊断无障碍性的工具有很多。
但仅处理标题、地标等特定类别的工具,难以把握整体情况。
在页面上叠加标记的类型虽然能展示整体,却会使画面变得杂乱,妨碍纵览。
为填补这一差距,我们致力于打造一款「能够掌握全局、纵览页面而不使画面杂乱」的工具。
我们参考了 VoiceOver 的转子(Rotor)显示等屏幕阅读器的元素列表功能。
将其可视化于侧边栏,并加入问题检测功能,由此实现了清晰且功能强大的结构诊断开发者工具。
审核对象与检测的问题
▪️标题
级别跳跃、空标题、角色缺失等
▪️链接
空文本、表述不明确、重复链接等
▪️表单控件
缺失标签、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 这一名称所示,我们希望借此助力打造让每个人都能毫不迷茫地抵达目标的网站,这份心愿也蕴含其中。
让无障碍(accessibility)支持更加贴近身边,更加顺畅。后续工具也在筹备中,敬请期待。