用途:在创建或评审导航模式时应用无障碍规则,包括主导航、下拉菜单、大型菜单、面包屑、分页、移动菜单和页内导航。仅在项目含导航组件时加载。规范来源为 mgifford/ACCESSIBILITY.md 中的 NAVIGATION_ACCESSIBILITY_BEST_PRACTICES.md 示例文件,有疑问以该示例为准。
主要能力与关键要求:
- 地标结构:每个主要链接组用 <nav> 包裹,多个 <nav> 需有可理解的名称(如 aria-label="Primary"、"Footer"、"On this page"),重复相同链接用相同名称,不同用途用不同名称;不要给 <nav> 加冗余 role="navigation";缺失 nav 地标属严重问题。
- 跳转链接:位于 body 开头附近,是较早的键盘停靠点;永久隐藏(display:none、visibility:hidden、hidden)属严重问题;激活需移动视口与键盘焦点,<main> 可用 tabindex="-1"。
- 当前位置:用 aria-current 标识,值为 page/step/location/date/time,无更具体值时用 true;不要对普通导航链接用 aria-selected,并提供不依赖颜色的视觉指示。
- 站点导航不是应用菜单:普通导航不要用 role="menu"/"menuitem"/"menubar",否则屏幕阅读器进入应用菜单交互模式;仅真正的应用工具栏/上下文菜单才适用。
- 下拉采用 disclosure 模式:用按钮加 aria-expanded 与 aria-controls,链接与下拉触发器分离;要求 expanded/hidden 同步、Tab 顺序正常、Escape 关闭并回焦、移出父项关闭、打开不自动移焦或改页、不依赖 hover;hover 显示需满足可关闭、可悬停、持续。
- 面包屑:用 <ol>,当前项 aria-current="page",装饰分隔符对辅助技术隐藏。
- 分页:用 nav aria-label="Pagination";可见“Previous/Next”文本,仅箭头则可访问名需含该词;当前页有非颜色区分;不可用操作不建链接;URL 保留筛选、搜索与排序。
- 响应式导航:一般汉堡菜单按非模态 disclosure 处理,不加 inert、不困焦点、不强制移焦;Escape 关闭并回焦;若确为模态抽屉,须按完整模态对话框实现。
- 一致性:重复导航顺序一致,重复链接名称与目标一致;页面集合提供多种查找方式。
- 客户端路由:路由变化需更新标题与主标题、移动焦点、保留前进后退、避免重复播报;路由链接保留真实 <a> 语义。
- 缩放与回流:200%/400% 下不产生二维滚动,控件与焦点指示不被裁剪,粘性导航不遮挡焦点组件。
- CMS/框架:Drupal 的 .is-active 不自动加 aria-current;WordPress 多菜单时 wp_nav_menu() 默认不加 aria-label,可用 nav_menu_args 过滤器;React/SPA 需播报页面变化。优先修正共享模板。
严重程度:严重为导航完全不可达或键盘陷阱;重度为仅 hover 可用、误用 role="menu"、缺 aria-current;中度为次级导航缺 aria-label、面包屑未标注;轻微为导航项超过 7 个、aria-expanded 更新不一致。实际严重度需结合对导航与任务完成的影响判断。
适用场景:含导航组件的网站或 Web 应用的无障碍创建与评审。
限制:仅在项目包含导航组件时加载;资料未提供具体安装命令、收费或价格信息。测试与辅助技术组合细节在原文后半部分被截断,完整内容需参考规范来源。