正确使用 role="navigation" 仅限语义独立、服务于页面级跳转的主导航区域；滥用会干扰辅助技术，应优先用 标签，多导航时须配合 aria-label 区分。

role="navigation" 的正确使用场景

不是所有导航容器都该加 role="navigation，只有语义上独立、功能上服务于页面级跳转的导航区域才需要。浏览器和读屏器会把带这个 role 的元素识别为“主导航”，如果滥用（比如给面包屑或页脚链接组加它），反而干扰辅助技术用户的导航逻辑。

常见误用场景包括：
– 给单个 标签加 role="navigation"（无效，role 只能用于容器）
– 在已用

元素内部再手动加 role="navigation"（冗余，

自带该语义）
– 把侧边栏工具链接、操作按钮组当成主导航塞进去

什么时候必须显式写 role="navigation"

当无法使用语义化 HTML5 标签（比如老项目还在用

布局，或受限于 CMS 模板无法改标签），又需要向辅助技术明确传达“这是主导航”时，才需手动添加。现代写法优先用

，它等价于

，但更简洁、更健壮。

实操建议：
– 用

替代

，除非 DOM 结构被框架/模板锁定
– 如果必须用 role，确保父容器是块级元素（如

、

），且子元素是链接或按钮
– 同一页面最多一个主 role="navigation"；次要导航（如文章内目录）应改用 role="doc-toc" 或 aria-label="文章目录"

role="navigation" 和 aria-label 的配合

多个导航区域共存时（比如顶部主导航 + 页脚快捷链接），光靠 role="navigation" 不够，读屏器无法区分它们。必须配合 aria-label 或 aria-labelledby 明确命名。

示例：

…

…

不推荐只写 role="navigation" 而不加标识——测试中发现 NVDA 和 VoiceOver 都会把两个无名导航都读作“navigation”，用户根本分不清哪个是哪个。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

验证是否生效的简单方法

别只看代码写了没，得确认辅助技术真能识别。最直接的方式：打开 Chrome + NVDA（Windows）或 Safari + VoiceOver（macOS），进入页面后按 D 键（NVDA）或 Ctrl+Opt+U（VoiceOver）调出“元素列表”，看是否出现 “navigation” 条目，并能跳转到对应区域。

容易被忽略的点：
– 开发时关掉浏览器插件（尤其某些 SEO 工具会劫持 role 属性）
– 确保没有 JavaScript 动态移除了 role 或覆盖了父元素的 display 属性（比如设成 display: none 或 visibility: hidden）
– 移动端 Safari 对 role="navigation" 的支持略弱于桌面端，有疑问时优先用

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！