后台页面必须有且仅有一个区域，侧边栏用、头部用、页脚用；导航嵌套不超过两级；须带aria-labelledby或aria-label；动态列表项须用包裹并设aria-live="polite"。
后台页面必须有且仅有一个 <main></main> 区域
很多团队把 <main></main> 当成“可选装饰”，结果在侧边栏、头部甚至弹窗里也塞一个，导致屏幕阅读器导航混乱、SEO 权重稀释。浏览器和辅助技术只认语义：一个页面只能有一个主内容上下文。
实际做法：
– 所有业务操作区（表格、表单、图表容器）必须包裹在单一 <main></main> 内
– 侧边栏用 <aside></aside>，头部用 <header></header>，页脚用 <footer></footer>
– 如果是多 Tab 页面，<main></main> 应包裹整个 Tab 切换容器，而不是每个 Tab 单独套一个
侧边栏嵌套层级不能超过两级：<nav></nav> → <ul></ul> → <li>
常见翻车现场：开发者为“支持无限子菜单”硬套递归组件，生成
<nav><ul><li><ul><li><ul><li>…</li></ul></li></ul></li></ul></nav></p> <p>问题不止是 DOM 膨胀：<br>– 屏幕阅读器对三层以上嵌套 <code><ul>支持极差，常直接跳过子项
– CSS 的
:focus-within 和键盘导航在深嵌套下失效率陡增– 移动端点击热区误触率上升（手指一滑就展开三级）
建议方案：二级菜单收起为“更多”折叠项，或改用平铺式标签页切换
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<section></section> 必须带 aria-labelledby 或 aria-label
后台页面里一堆 <section></section> 套 <section></section>，但没任何标识——这对键盘用户和读屏软件等于“黑盒”。<section></section> 是无语义的容器，不加 ARIA 就无法被识别为独立功能区块。
正确写法示例：
<section aria-labelledby="user-stats-title"><br> <h2 id="user-stats-title">用户活跃统计</h2><br> <div class="chart">...</div><br></section>
注意：
– 不要用
role="region" 替代，它比 <section></section> 更泛化，缺乏上下文– 避免仅靠 class 名（如
class="card-user-list"）暗示用途，辅助技术看不到 class
