侧边导航必须用<ul>包裹链接而非<div>，确保语义清晰与可访问性；含二级菜单时需嵌套<ul>，禁用<nav>嵌套；href须用#锚点或空值，避免整页重载；多<nav>共存时必填aria-label或aria-labelledby；固定定位需给<body>加padding而非内容区加margin。
nav侧边导航必须用包裹链接，不能只包或单个
侧边导航本质是一组跳转入口，<nav>只负责语义声明，不提供布局能力。浏览器和屏幕阅读器靠内部结构识别导航意图：<ul>明确表示“列表型导航集合”，而<div>会被降级为普通容器，辅助技术可能跳过或误读。
常见错误现象：<nav><div><a href="https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8">首页</a></div></nav>——看似能用，但键盘用户按Tab时焦点顺序混乱，自动化可访问性检测会报“Landmark lacks list structure”。
- 正确写法：用
<ul>包裹所有<a>，每个<li>包一个链接
- 如果侧边导航含二级菜单（如“产品 → 云服务 / 本地部署”），外层
<ul>保持一级，子菜单用嵌套<ul>，不要用<nav>嵌套<nav>
- 避免在
<nav>里塞图标按钮、搜索框或“展开/收起”控件——它们该用<button>单独放在<nav>外部，配合aria-controls关联
单页应用中nav的href必须用#锚点或空值，别写真实路径
在React/Vue等前端路由项目里，<nav>里的href值不是用来触发页面刷新的。写href="about.html"会导致整页重载，破坏SPA体验，且路由状态丢失。
常见错误现象：点击导航后页面白屏几秒、返回按钮失效、Vue Router警告“NavigationDuplicated”，根源常是<a href="user">这种没加#的写法。
立即学习“前端免费学习笔记（深入）”；
- 标准做法：
href="https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8"、href="#products"，由JS监听hashchange事件驱动路由；或href="#"配合event.preventDefault()和router.push()
- Vue项目推荐用
<router-link>替代<a>，但外层<nav>仍需保留，否则语义缺失
- React项目若用
<Link>，确保其渲染结果仍是<a>标签（默认行为），否则屏幕阅读器无法识别为导航链接
多个nav共存时，aria-label不是可选项，是必填项
侧边导航 + 顶部主导航 + 页脚快捷入口，三者都用<nav>时，光靠标签名无法区分用途。屏幕阅读器只会读“navigation”，用户不知道当前聚焦的是“主菜单”还是“帮助文档入口”。
常见错误现象：键盘用户按Ctrl+Shift+O（NVDA快速地标记跳转）时，所有<nav>都显示为“navigation”，必须手动逐个进入才能判断。
- 必须为每个
<nav>加aria-label，如<nav aria-label="侧边栏目导航">、<nav aria-label="页脚法律链接">
- 若侧边导航上方有可见标题（如
<h2>功能模块</h2>），优先用aria-labelledby="sidebar-title"，ID指向该标题元素
- 别同时写
aria-label和aria-labelledby，后者优先级更高，前者会被忽略
固定定位侧边nav必须给body加padding，而不是内容区加margin
侧边导航设position: fixed后脱离文档流，后续内容会顶上来被遮挡。很多人习惯给第一个<main>加margin-left，但这在滚动、打印、响应式断点切换时会出问题——比如移动端折叠后，margin还挂着，留出空白。
常见错误现象：页面滚动到底部时，侧边nav底部盖住页脚文字；打印PDF时导航栏压在正文上；缩放字体后margin值失准，内容错位。
- 可靠解法：给
<body>加padding-left（值 = 侧边nav宽度），让整个页面内容自然右移
- 若侧边nav宽度不固定（如响应式收起/展开），改用CSS
inset-inline-start + scroll-margin-inline-start控制锚点跳转偏移，避免点击目录项后目标内容被遮住
- 切勿在
<nav>里放<form>或<search>——搜索框应独立为<search>元素，语义和焦点管理才清晰
侧边<nav>最易被当成样式容器，但它的语义边界、ARIA标注、锚点处理和布局干预，每个环节都在真实可访问性测试和SPA路由中暴露过问题。
侧边导航本质是一组跳转入口，<nav>只负责语义声明，不提供布局能力。浏览器和屏幕阅读器靠内部结构识别导航意图：<ul>明确表示“列表型导航集合”，而<div>会被降级为普通容器，辅助技术可能跳过或误读。
常见错误现象：<nav><div><a href="https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8">首页</a></div></nav>——看似能用，但键盘用户按Tab时焦点顺序混乱，自动化可访问性检测会报“Landmark lacks list structure”。
- 正确写法：用
<ul>包裹所有<a>，每个<li>包一个链接 - 如果侧边导航含二级菜单（如“产品 → 云服务 / 本地部署”），外层
<ul>保持一级，子菜单用嵌套<ul>，不要用<nav>嵌套<nav> - 避免在
<nav>里塞图标按钮、搜索框或“展开/收起”控件——它们该用<button>单独放在<nav>外部，配合aria-controls关联
单页应用中nav的href必须用#锚点或空值，别写真实路径
在React/Vue等前端路由项目里，<nav>里的href值不是用来触发页面刷新的。写href="about.html"会导致整页重载，破坏SPA体验，且路由状态丢失。
常见错误现象：点击导航后页面白屏几秒、返回按钮失效、Vue Router警告“NavigationDuplicated”，根源常是<a href="user">这种没加#的写法。
立即学习“前端免费学习笔记（深入）”；
- 标准做法：
href="https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8"、href="#products"，由JS监听hashchange事件驱动路由；或href="#"配合event.preventDefault()和router.push() - Vue项目推荐用
<router-link>替代<a>，但外层<nav>仍需保留，否则语义缺失 - React项目若用
<Link>，确保其渲染结果仍是<a>标签（默认行为），否则屏幕阅读器无法识别为导航链接
多个nav共存时，aria-label不是可选项，是必填项
侧边导航 + 顶部主导航 + 页脚快捷入口，三者都用<nav>时，光靠标签名无法区分用途。屏幕阅读器只会读“navigation”，用户不知道当前聚焦的是“主菜单”还是“帮助文档入口”。
常见错误现象：键盘用户按Ctrl+Shift+O（NVDA快速地标记跳转）时，所有<nav>都显示为“navigation”，必须手动逐个进入才能判断。
- 必须为每个
<nav>加aria-label，如<nav aria-label="侧边栏目导航">、<nav aria-label="页脚法律链接"> - 若侧边导航上方有可见标题（如
<h2>功能模块</h2>），优先用aria-labelledby="sidebar-title"，ID指向该标题元素 - 别同时写
aria-label和aria-labelledby，后者优先级更高，前者会被忽略
固定定位侧边nav必须给body加padding，而不是内容区加margin
侧边导航设position: fixed后脱离文档流，后续内容会顶上来被遮挡。很多人习惯给第一个<main>加margin-left，但这在滚动、打印、响应式断点切换时会出问题——比如移动端折叠后，margin还挂着，留出空白。
常见错误现象：页面滚动到底部时，侧边nav底部盖住页脚文字；打印PDF时导航栏压在正文上；缩放字体后margin值失准，内容错位。
- 可靠解法：给
<body>加padding-left（值 = 侧边nav宽度），让整个页面内容自然右移 - 若侧边nav宽度不固定（如响应式收起/展开），改用CSS
inset-inline-start+scroll-margin-inline-start控制锚点跳转偏移，避免点击目录项后目标内容被遮住 - 切勿在
<nav>里放<form>或<search>——搜索框应独立为<search>元素，语义和焦点管理才清晰
<nav>最易被当成样式容器，但它的语义边界、ARIA标注、锚点处理和布局干预，每个环节都在真实可访问性测试和SPA路由中暴露过问题。
