SuperAPI AI 工具集

navigation-landmark

前端与建站

查看项目

更新于 10-16 06:08

技能介绍

用途

该技能用于审查与导航地标(navigation landmark)相关的模板、渲染后 HTML 或共享组件,验证最终面向浏览器的标记是否符合无障碍要求。它关注的是浏览器实际接收到的标记,而非源文件中的写法。

主要能力

  • 检查导航区域是否使用 nav 元素。
  • 检查是否使用 aria-label 或 aria-labelledby 区分主导航、次级导航和页脚导航等多个导航区域。
  • 检查是否提供跳转链接(skip link)以绕过重复性导航。
  • 在代码审查中,指出渲染后 HTML 违反规则的具体元素、属性和路由。

使用方式

该技能以规则检查的形式工作,包含 Check、Fix、Explain 和 Code Review 几个环节:

  • Check:验证导航区域是否使用带 aria-label 或 aria-labelledby 的 nav 元素,以区分主导航、次级导航和页脚导航。
  • Fix:将导航链接包裹在 nav 元素中,并使用描述性的 aria-label,例如“Main navigation”或“Footer navigation”。
  • Explain:解释导航地标如何帮助屏幕阅读器用户快速识别并跳转到不同导航区域。
  • Code Review:审查模板、服务端渲染 HTML 和共享组件中输出相关标记的部分,标记出渲染后 HTML 违反规则的具体元素、属性和路由。

完整实现细节、代码示例和框架相关指导见 references/rule.md。规则页面:https://frontendchecklist.io/en/rules/html/navigation-landmark。

适用场景

适用于前端代码审查、无障碍审计,以及涉及模板、服务端渲染 HTML 或共享组件的开发流程。特别适合需要确保屏幕阅读器用户能够通过地标快速定位导航区域的场景。

限制

该技能聚焦于导航地标的标记验证,不涉及其他无障碍规则的完整覆盖。具体框架实现细节需参考 references/rule.md。关于收费、价格、平台支持范围等信息,资料中暂未提供。