必须嵌套结构并添加aria-label，否则语义失效；SPA中href需适配路由，当前页用aria-current="page"，交互须JS实现。

直接用

包裹链接不行，必须满足结构、语义、可访问性三重条件，否则浏览器和读屏器会当它不存在。

为什么

里只放 @#@#@#@#@#@#@#@#@#@0：读屏器播报“导航区域，列表，1 项：首页”，语义完整

嵌套二级菜单时，子

必须放在

内，不能直接塞进外层

，否则 HTML 解析器会自动修正结构，行为不可控

多个

共存时，不加 aria-label 就等于没写

同一页面出现顶部主导航、页脚快捷入口、侧边相关文章链接，全用

是允许的，但屏幕阅读器只会统一读作“navigation”。用户根本分不清哪个是主菜单，哪个是辅助跳转。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 正确：
  ...
  、
  ...
• 有可见标题时可用 aria-labelledby="header-title"，比如

  网站导航

• 绝对不要写 aria-label="" 或仅靠 CSS 隐藏文字（如 主菜单），部分读屏器会跳过整个区域

单页应用（SPA）里 href 写真实路径就翻车

在 React/Vue 项目中，

仍需保留，但内部 @#@#@#@#@#@#@#@#@#@1（配合 hashchange 监听）或 @#@#@#@#@#@#@#@#@#@2

Vue 项目优先用 ，但外层

不可省，否则语义链断裂

React 项目若用 ，确保它最终渲染为带 href 属性的 @#@#@#@#@#@#@#@#@#@3，读屏器才读出“产品，当前页面”

纯 CSS 的 :hover 或 :focus-within 下拉在触摸设备上基本失效，移动端必须用 JS 控制 aria-expanded 和 hidden 属性

键盘导航需手动实现：Tab 进入菜单 → Enter 展开子项 → ArrowDown 移动焦点 → Esc 收起，这些逻辑不会自动产生

最容易被忽略的是：写完

后不验证 DOM 真实状态——用 document.querySelectorAll('nav a[href]') 确认链接存在且可访问，再开 NVDA 或 VoiceOver 实测朗读效果，比任何教程都管用。