电商侧边栏分类列表必须用语义化HTML实现：用<nav aria-label>包裹，多级嵌套<ul>结构，展开项配<button>和role="group"，当前页用aria-current="page"，隐藏时保留可访问性。
电商侧边栏分类列表不是简单堆砌 <ul> 和 <li> 就能用的，关键在语义正确、层级可扩展、交互可访问。直接套用无序列表结构容易导致屏幕阅读器误读、SEO 权重分散、多级展开逻辑混乱。
用 <nav> 包裹，别用 <div class="sidebar">
很多开发者习惯写 <div class="sidebar"><ul>...</ul></div>，这会让辅助技术丢失导航意图。必须用 <nav aria-label="商品分类导航"> 显式声明区域用途。
-
aria-label是必需的，不能省略；没有它，屏幕阅读器只会读“列表”，不知道这是“一级类目入口” - 如果页面有多个导航区（比如顶部菜单+左侧分类），
aria-label值必须唯一，例如“顶部主导航”和“左侧商品分类导航” - 避免嵌套
<nav>：二级展开菜单属于同一导航上下文，用<ul>嵌套即可，不需要再套一层<nav>
多级分类必须用嵌套 <ul>，不能靠 CSS 伪类模拟层级
常见错误是把二级类目塞进 <li> 里用 display: none 控制显隐，但 HTML 结构仍是扁平的。这会导致键盘 Tab 无法自然跳转到子项、aria-expanded 失效、焦点管理失控。
- 正确结构是：每个可展开的一级
<li>内部包含<button>+<ul class="submenu">，且<ul>是<li>的直接子元素 - 二级
<ul>必须有role="group"和aria-hidden="true"（初始状态），展开时同步切换aria-hidden和aria-expanded - 不要用
<ol>或自定义data-属性替代语义化嵌套——搜索引擎和辅助工具不识别这些
aria-current="page" 比 class="active" 更关键
仅靠 CSS 类名高亮当前选中项，对键盘用户和屏幕阅读器完全无效。必须用 ARIA 属性明确当前上下文。
立即学习“前端免费学习笔记（深入）”；
- 当用户点击“手机”进入手机类目页时，对应
<li>下的<a>要加aria-current="page"，而不是只加class="active" -
aria-current="page"会被屏幕阅读器读作“当前页面：手机”，而class="active"完全静默 - 服务端渲染时，这个属性必须由后端或 SSR 框架注入；前端路由切换时，JS 必须手动同步设置/移除该属性
移动端折叠逻辑不能只靠 display: none
直接对整个 <nav> 加 display: none 会彻底移除其可访问性树节点，键盘焦点跳过、屏幕阅读器不可见——即使视觉上你只是“收起侧边栏”。
- 用
visibility: hidden+height: 0+overflow: hidden组合隐藏，保留 DOM 结构和语义 - 同时加
aria-hidden="true"控制可访问性可见性，与视觉状态严格同步 - 触屏设备上，收起后仍需确保焦点能回到触发按钮（如汉堡图标），否则键盘用户会迷失在页面末尾
真正难的不是写出能展开的菜单，而是让每种使用方式（鼠标、键盘、触摸、读屏）都得到一致反馈。一个没设 aria-expanded 的展开按钮，对视障用户来说就是个死链接；一个没同步 aria-current 的高亮项，等于告诉用户“你点错了”。这些细节不处理，侧边栏就只是个好看但不可用的装饰。
