后台折叠侧边栏应使用 nav 而非 aside，DOM 顺序须在 main 前；文档类侧边栏推荐 position: sticky；小屏下禁用 display: none，改用 transform 隐藏并保持可访问性。
aside 不适合做后台折叠侧边栏的语义容器
直接把 aside 当作后台管理系统的左侧导航栏或可折叠菜单容器，是语义误用。它表达的是“与主内容附属、可省略的补充信息”，而后台导航是核心交互入口，删掉整个 aside 后页面功能就瘫痪了——这违反 aside 的根本前提：主内容必须能独立完整表达。
常见错误现象：aside 里塞满 <nav></nav>、<button></button>、<input>，结果屏幕阅读器播报为 “complementary landmark”，用户无法感知这是主导航；SEO 抓取时也可能降权或跳过。
- 后台左侧导航应使用
nav标签（语义明确为导航） - 若需封装工具栏（如筛选区、操作按钮组），用
section+role="region"+aria-label - 折叠/展开状态建议通过
data-collapsed属性控制，而非依赖aside的存在与否
position: sticky 比 fixed 更适合 TOC 或文档类侧边栏
后台管理系统中常见的“文档目录”或“配置项锚点导航”侧边栏，推荐用 position: sticky，不是 position: fixed。前者不脱离文档流，不会导致 main 区域宽度计算错乱；后者在 Safari 移动端易因 viewport 缩放偏移，且需手动预留右侧空间防遮挡。
关键约束条件：
立即学习“前端免费学习笔记（深入）”；
- 父容器不能设
overflow: hidden、auto或scroll，否则sticky失效 - 必须显式指定
top值（如top: 80px），否则不触发吸附 - 若需兼容 IE11，
sticky不可用，得降级为fixed+ JavaScript 监听scroll手动更新top
折叠侧边栏的 DOM 顺序与视觉顺序必须一致
即使用了 flex 或 grid 实现视觉上“左侧固定、右侧主内容”，如果 HTML 中 aside（或实际用的 nav）写在 main 后面，键盘 Tab 流和读屏器播报顺序就会先到主内容再折返——这对后台管理系统是严重可用性缺陷。
正确做法：
- HTML 结构中，导航容器（无论叫
nav还是div.sidebar）必须写在main前面 - 用 flex 布局时，若视觉上希望它在右侧，可通过
order调整（如nav { order: 2; }、main { order: 1; }），但 DOM 顺序不变 - 绝对不要靠
flex-direction: row-reverse或grid-column: -1颠倒逻辑顺序
响应式下折叠侧边栏不能用 display: none
小屏（如 @media (max-width: 768px)）下，后台侧边栏通常收进汉堡菜单，但绝不能对容器设 display: none。这等于告诉辅助技术“此内容不存在”，尤其当里面含权限控制项、系统状态提示或紧急操作按钮时，隐藏 = 功能不可达。
可行方案：
- 用
transform: translateX(-100%)+overflow: hidden在父容器上隐藏，保留 DOM 和焦点能力 - 配合
aria-hidden="true"控制可访问性状态，但仅在视觉隐藏时同步更新 - 点击 Overlay 关闭侧边栏时，事件监听必须绑定在 Overlay 元素本身，且调用
event.stopPropagation()，避免点击内部按钮也触发关闭
最常被忽略的点：折叠状态切换后，焦点没自动移回触发按钮或首项，导致键盘用户卡死。这个细节比布局本身更影响真实使用体验。
