aside 是语义化附属容器，非交互组件，不可设 tabindex="0"；须确保内部控件有可访问名称、dom 顺序与视觉一致、正确使用 role/aria-label 区分多处 aside，并避免误用主导航或页脚。
aside 标签本身不触发任何交互，无障碍支持靠语义 + ARIA + DOM 顺序
很多人以为给 aside 加个 tabindex="0" 就能让它“可聚焦”，其实这是误解。aside 是一个语义容器，不是交互组件。屏幕阅读器识别它为 complementary landmark，但不会自动播报内容，也不会改变键盘焦点流——除非里面真有可聚焦元素（如链接、按钮、输入框）。
常见错误现象：aside 里只有纯文本或静态广告图，却没加任何 role 或 aria-label，导致读屏器跳过整块区域；或者把搜索框塞进去却不设 label，用户根本不知道这是干啥的。
- 必须确保
aside内部所有交互控件都有明确的可访问名称（用<label for></label>或aria-labelledby） - 如果
aside内容是动态加载的（比如 JS 插入相关文章列表），需配合aria-live="polite"区域通知变化 - 不要在
aside上直接写tabindex="0"—— 它不该被主动聚焦，焦点应自然流向其中的按钮或链接 - DOM 顺序要和视觉顺序一致：若 CSS 用
flex把aside放右边，但 HTML 中它写在<main></main>前面，键盘 Tab 会先进侧边栏再进正文，破坏逻辑流
为什么不能把主导航或页脚放进 aside
aside 的语义是“附属但可独立”，而主导航是全站核心导航路径，页脚承载版权与法律信息——这两者都不是“可移除而不影响主内容完整性”的内容。浏览器和读屏器会把 aside 当作 complementary 区域处理，但 nav 和 footer 分别对应 navigation 和 contentinfo landmark，语义层级完全不同。
误用后果：SEO 权重错配（搜索引擎可能降权导航区块）、读屏器播报混乱（用户听到“补充内容”却点开的是首页链接）、自动化测试工具报 landmark-unique 错误。
- 主导航必须用
<nav></nav>，且建议加aria-label="主导航" - 页脚信息统一包在
<footer></footer>，不要拆出一部分塞进aside - 广告位如果属于全站级推荐，可放
aside，但必须加aria-label="广告推广"并注明role="region"，避免被当成内容主体
Flex/Grid 布局下 aside 的 DOM 顺序陷阱
现代布局中，display: flex 或 grid 能轻松把 aside 推到右侧，但视觉位置 ≠ DOM 顺序。如果 HTML 结构是 <aside>...</aside><main>...</main>，哪怕 CSS 让 main 在左、aside 在右，键盘用户 Tab 还是从侧边栏开始——这违背“从主内容出发”的无障碍原则。
正确做法是让 main 在前，aside 在后，再用 CSS 控制渲染顺序。否则即使样式完美，也会被 axe 或 WAVE 工具标为 focus-order 问题。
- 结构优先写成：
<main>...</main><aside>...</aside> - Flex 布局时用
order属性调整视觉顺序：main { order: 1; }，aside { order: 2; } - Grid 布局更稳妥：
grid-template-areas: "main aside";，然后用area指定位置 - 响应式断点里记得重置
order或grid-area，小屏下aside应自然落于main下方，而非左侧
aside 的 role 和 aria-label 不是可选项
原生 aside 默认有 role="complementary"，但某些老旧读屏器（尤其是 IE11 配合 JAWS 旧版）识别不稳定。显式声明能提升兼容性，同时避免内容用途模糊——比如一个放客户评价的 aside，不加说明，用户可能以为是广告。
容易被忽略的细节：同一页面多个 aside 必须有区分性 aria-label，否则读屏器只会重复说“补充内容”，无法判断哪个是“作者简介”，哪个是“延伸阅读”。
- 必加：
<aside aria-label="作者简介"></aside>或<aside role="complementary" aria-label="相关技术参数"></aside> - 避免空
aria-label或纯符号（如aria-label="▶"） - 如果
aside里含表单（如侧边搜索），需额外加aria-describedby关联说明文字 - 不要用
aria-hidden="true"隐藏整个aside—— 这会直接让读屏器跳过，丧失语义价值
aside 里那几行没加 label 的输入框、没设 aria-label 的图标按钮、以及 DOM 顺序和视觉顺序打架的 flex 布局——这些地方一漏，无障碍测试就过不了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
