Topics

在俯瞰页面结构的同时,正确审计无障碍设计。发布 A11y 工具"A11y Navigation Auditor"

  • news

作为 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 等引起的无障碍名称动态变化也会自动检测,可以立即确认操作导致的无障碍改变。

▪️点击进行高亮
点击面板中的项目,页面会自动滚动至相应元素并进行高亮显示。也可以使用键盘上下左右箭头键切换项目。

▪️专为专业人士提供的高级功能
・隐藏元素检查切换
・第三方小部件自动排除
・支持日语和英语两种语言


下载 A11y Navigation Auditor

Liberogic 的目标是让无障碍访问不再被视为"特殊安排",而是成为"理所当然的品质标准"。

继「Area Contrast Checker」之后,这次的「A11y Navigation Auditor」也是我们在实际工作中迫切需要的功能的具体呈现。正如 Navigation Auditor 这个名字所示,我们希望支持任何人都能顺利到达目的地的网站制作。我们投入了这样的初心。

让无障碍访问更贴近,更顺畅。下一个工具也在准备中,敬请期待。

案例分析