侧边快捷菜单必须用而非，因其本质是导航；内部仅允许链接，禁用按钮/搜索框；多级菜单须嵌套，隐藏时用aria-hidden+inert而非display:none。

侧边快捷菜单必须用 <nav></nav>，不能用 @#@#@#@#@#@#@#@#@#@0

错误写法：@#@#@#@#@#@#@#@#@#@1（无语义、不可聚焦、无列表结构）

若菜单含图标，用 <svg></svg> 内联或伪元素，别用 <img> 破坏文本可访问性

<nav></nav> 里只能放链接，别塞搜索框或按钮

快捷菜单的职责是跳转，不是交互容器。<nav></nav> 内部插入 <button></button>、<input> 或非链接式触发器，会破坏语义链：浏览器认为这不是纯导航区，:focus-within 失效，键盘 Tab 顺序可能跳过整个区块，下拉子菜单 hover/focus 逻辑也会异常。

html-to-pptx

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

下载

• 搜索功能应独立于 <nav></nav>，放在顶部工具栏或 <header></header> 内
• “刷新”“折叠”这类操作按钮，如果只是触发 JS 行为且无跳转目标，应移出 <nav></nav>，改用 <div role="toolbar"> 包裹并加 <code>aria-label
• 所有 @#@#@#@#@#@#@#@#@#@2<ul class="submenu"><li>@#@#@#@#@#@#@#@#@#@3</li></ul>
• 子菜单 <ul></ul> 必须直接挂在父 <li> 下，不能外包 <div> 或 <code><span></span>
• 用 display: none 切换子菜单显隐，别用 visibility: hidden 或 opacity: 0，否则读屏器仍会读出隐藏项

移动端折叠时，<nav></nav> 仍需保持语义完整

响应式侧边快捷菜单常在小屏收起为汉堡按钮，但收起后 <nav></nav> 不能销毁或降级为 <div>。隐藏状态要用 <code>aria-hidden="true" + inert 属性控制可访问性，而非移除 DOM 或改标签名——否则屏幕阅读器在展开前就感知不到该导航区存在。

• 展开按钮需用 <button aria-expanded="false" aria-controls="quick-nav"></button>，并绑定 id="quick-nav" 到 <nav></nav>
• JS 控制显示时，同步切换 aria-expanded 和 inert，例如：nav.inert = !expanded
• 避免用 display: none 直接隐藏整个 <nav></nav>，这会让读屏器彻底忽略它；改用 visibility: hidden; position: absolute; clip: rect(0 0 0 0) 配合 aria-hidden
实际项目中最容易被忽略的是：快捷菜单一旦带“展开/收起”逻辑，就必须同时维护 DOM 结构、ARIA 状态、CSS 显隐三者的一致性。少同步一个属性，键盘用户或读屏器就会卡在半途。