后台页面必须有且仅有一个区域，侧边栏用、头部用、页脚用；导航嵌套不超过两级；须带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>
常见翻车现场：开发者为“支持无限子菜单”硬套递归组件，生成
支持极差，常直接跳过子项
– CSS 的 :focus-within 和键盘导航在深嵌套下失效率陡增
– 移动端点击热区误触率上升（手指一滑就展开三级）
建议方案：二级菜单收起为“更多”折叠项，或改用平铺式标签页切换
<section></section> 必须带 aria-labelledby 或 aria-label
后台页面里一堆 <section></section> 套 <section></section>，但没任何标识——这对键盘用户和读屏软件等于“黑盒”。<section></section> 是无语义的容器，不加 ARIA 就无法被识别为独立功能区块。
正确写法示例：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<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
动态加载区域必须用 <article></article> 包裹列表项，而非 <div><p>后台常见的“用户列表”“日志流”“通知卡片”，如果用 <code><div class="item"> 渲染，滚动加载新数据时，读屏软件无法感知新增内容，也不会播报“新增 3 条通知”。<p>应改为：<br></p>
<pre class="brush:php;toolbar:false;"><main><br><article aria-live="polite"><br><header><h3>张三</h3></header><br><p>最后登录：2026-10-19</p>
<br></article><br><article aria-live="polite"><br><header><h3>李四</h3></header><br><p>最后登录：2026-10-18</p>
<br></article><br></main></pre>
<br><p>关键点：<br>– 每个独立业务实体（用户、订单、日志条目）对应一个 <code><article></article>
– aria-live="polite" 让新增 <article></article> 被安静播报，不打断当前操作
– 不要用 <section></section> 替代，它表达的是“页面内分区”，不是“可独立分发的内容单元”
组件层级不是越深越灵活，而是越贴近真实信息粒度越可靠。后台系统最常被忽略的，是把「结构」当成样式占位符来用——比如用 <section></section> 代替 <div> 只为多一层 class 作用域，这反而破坏了语义链。</div>
