必须且只能出现一次，嵌套在nav或header里会破坏可访问性逻辑；main需带aria-label才合格；img的alt属性须按信息性、功能性、装饰性三类区分书写；section必须通过aria-labelledby关联可见标题。
为什么不能嵌套在
很多开发者误以为“文章是主要内容”，就把
实际影响包括：
- NVDA、VoiceOver 等屏幕阅读器的“跳转到主要内容”快捷键（如 Ctrl+Alt+O）失效
- 部分辅助工具报错
ARIA: main role must not be a descendant of another landmark - 搜索引擎可能降权，因结构歧义导致内容权重分散
一个典型错误是只写
正确做法：
- 主导航：
<nav aria-label="主导航"></nav> - 页脚链接：
<nav aria-label="友情链接"></nav> - 面包屑：
<nav aria-label="当前位置"></nav>
注意：aria-labelledby 不要指向 display: none 的隐藏标题，应使用可见标题或显式文本。
图片 alt 属性的三种写法不能混用
alt 属性不是“填空题”，它的值决定屏幕阅读器是否读、怎么读、读什么。常见错误是统一写成 alt="图片" 或留空不写。
必须按场景区分：
- 信息性图片（商品图、数据图表）：描述内容本身，不含“图”字，例如
alt="深蓝色帆布托特包,手提带为棕色皮革,正面有金属品牌标牌" - 功能性图片（按钮图标、链接图标）：描述功能，不是外观，例如
alt="搜索"或alt="返回上一页" - 装饰性图片（背景花纹、分割线）：严格使用
alt=""（空字符串），不可省略属性，也不可用alt=" "（含空格）
额外提醒：alt 值过长（超125字符）可能被截断；复杂图表应配合 aria-describedby 指向详细说明段落。
电子书结构中 必须关联可见标题
aria-labelledby 显式绑定一个可见的 ～
标题，否则屏幕阅读器无法识别该区块的用途和层级关系。
正确写法示例：
<section aria-labelledby="chapter1-heading"><h2 id="chapter1-heading">第一章：HTML基础</h2> <p>HTML是网页的骨架……</p> </section>
错误写法（无标题或仅用 aria-label）：
-
<section aria-label="第一章"></section>—— 屏幕阅读器不朗读aria-label值，且违反 WCAG 2.2 1.3.1 -
<section><h2>第一章</h2></section>—— 缺少aria-labelledby，部分旧版辅助工具无法建立关联
容易被忽略的是：电子书翻页、章节跳转依赖 DOM 结构完整性，一旦
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
