电商侧边栏分类列表必须用语义化html实现：用包裹，多级嵌套结构，展开项配和role="group"，当前页用aria-current="page"，隐藏时保留可访问性。

电商侧边栏分类列表不是简单堆砌 <ul></ul> 和 <li> 就能用的，关键在语义正确、层级可扩展、交互可访问。直接套用无序列表结构容易导致屏幕阅读器误读、SEO 权重分散、多级展开逻辑混乱。

用 <nav></nav> 包裹，别用 <div class="sidebar"> <p>很多开发者习惯写 <code><div class="sidebar"><ul>...</ul></div>，这会让辅助技术丢失导航意图。必须用 <nav aria-label="商品分类导航"></nav> 显式声明区域用途。

• aria-label 是必需的，不能省略；没有它，屏幕阅读器只会读“列表”，不知道这是“一级类目入口”
• 如果页面有多个导航区（比如顶部菜单+左侧分类），aria-label 值必须唯一，例如“顶部主导航”和“左侧商品分类导航”
• 避免嵌套 <nav></nav>：二级展开菜单属于同一导航上下文，用 <ul></ul> 嵌套即可，不需要再套一层 <nav></nav>

多级分类必须用嵌套 <ul></ul>，不能靠 CSS 伪类模拟层级

常见错误是把二级类目塞进 <li> 里用 display: none 控制显隐，但 HTML 结构仍是扁平的。这会导致键盘 Tab 无法自然跳转到子项、aria-expanded 失效、焦点管理失控。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 正确结构是：每个可展开的一级 <li> 内部包含 <button></button> + <ul class="submenu"></ul>，且 <ul></ul> 是 <li> 的直接子元素
• 二级 <ul></ul> 必须有 role="group" 和 aria-hidden="true"（初始状态），展开时同步切换 aria-hidden 和 aria-expanded
• 不要用 <ol></ol> 或自定义 data- 属性替代语义化嵌套——搜索引擎和辅助工具不识别这些

aria-current="page" 比 class="active" 更关键

仅靠 CSS 类名高亮当前选中项，对键盘用户和屏幕阅读器完全无效。必须用 ARIA 属性明确当前上下文。

• 当用户点击“手机”进入手机类目页时，对应 <li> 下的 <a></a> 要加 aria-current="page"，而不是只加 class="active"
• aria-current="page" 会被屏幕阅读器读作“当前页面：手机”，而 class="active" 完全静默
• 服务端渲染时，这个属性必须由后端或 SSR 框架注入；前端路由切换时，JS 必须手动同步设置/移除该属性

移动端折叠逻辑不能只靠 display: none

直接对整个 <nav></nav> 加 display: none 会彻底移除其可访问性树节点，键盘焦点跳过、屏幕阅读器不可见——即使视觉上你只是“收起侧边栏”。

• 用 visibility: hidden + height: 0 + overflow: hidden 组合隐藏，保留 DOM 结构和语义
• 同时加 aria-hidden="true" 控制可访问性可见性，与视觉状态严格同步
• 触屏设备上，收起后仍需确保焦点能回到触发按钮（如汉堡图标），否则键盘用户会迷失在页面末尾

真正难的不是写出能展开的菜单，而是让每种使用方式（鼠标、键盘、触摸、读屏）都得到一致反馈。一个没设 aria-expanded 的展开按钮，对视障用户来说就是个死链接；一个没同步 aria-current 的高亮项，等于告诉用户“你点错了”。这些细节不处理，侧边栏就只是个好看但不可用的装饰。