标题层级必须真实反映内容逻辑，需按重要性嵌套、禁用css伪标题、每个页面仅一个h1且置于主内容前，确保屏幕阅读器正确识别结构。
标题层级必须真实反映内容逻辑
屏幕阅读器用户常通过快捷键（如NVDA的H键、VoiceOver的Ctrl+Opt+Cmd+→）快速跳转各级标题，像翻目录一样浏览页面。如果
到只是靠CSS视觉放大，而没按实际重要性嵌套，就会导致结构错乱——比如把副标题写成，主标题反而用，阅读器会误判优先级，用户可能直接跳过真正关键的内容。
每个页面只用一个，且放在主要内容前
，主标题反而用，阅读器会误判优先级，用户可能直接跳过真正关键的内容。
每个页面只用一个，且放在主要内容前
每个页面只用一个，且放在主要内容前
代表页面核心主题，相当于整页的“书名”。多个会让屏幕阅读器困惑该聚焦哪一块；把它塞在导航或侧边栏里，还会让用户先听到一堆次要信息才触达正文。正确做法是：后紧跟，再进入，确保键盘用户Tab到第一个可聚焦元素时，已经落在主标题上。
用标题自然划分内容区块，别跳级或留空
标题不是装饰，而是内容骨架。常见错误包括：
- 从
直接跳到，中间缺，阅读器会漏掉逻辑断层
- 仅用CSS生成“伪标题”文字（如产品介绍），屏幕阅读器完全识别不出这是标题
- 标题内只有图标或空白字符（如），没文字也没aria-label，用户根本不知道区块主题
真正有效的标题一定有可见文本，且层级连续、语义明确。
配合ARIA增强上下文，但不替代原生语义
极少数场景下，标题本身不带说明性文字（比如图表旁的
），可用aria-labelledby指向附近描述性文字；或者用aria-describedby关联补充说明（如“（更新于2026年7月28日）”）。但这些只是辅助，不能用来绕过写真实标题——因为屏幕阅读器优先读标题标签内的文本，aria属性只是补足，不是主干。
，再进入，确保键盘用户Tab到第一个可聚焦元素时，已经落在主标题上。
用标题自然划分内容区块，别跳级或留空
标题不是装饰，而是内容骨架。常见错误包括：
- 从
直接跳到，中间缺，阅读器会漏掉逻辑断层
- 仅用CSS生成“伪标题”文字（如产品介绍），屏幕阅读器完全识别不出这是标题
- 标题内只有图标或空白字符（如），没文字也没aria-label，用户根本不知道区块主题
真正有效的标题一定有可见文本，且层级连续、语义明确。
配合ARIA增强上下文，但不替代原生语义
极少数场景下，标题本身不带说明性文字（比如图表旁的
），可用aria-labelledby指向附近描述性文字；或者用aria-describedby关联补充说明（如“（更新于2026年7月28日）”）。但这些只是辅助，不能用来绕过写真实标题——因为屏幕阅读器优先读标题标签内的文本，aria属性只是补足，不是主干。
用标题自然划分内容区块，别跳级或留空
标题不是装饰，而是内容骨架。常见错误包括：
- 从
直接跳到
，中间缺
，阅读器会漏掉逻辑断层
- 仅用CSS生成“伪标题”文字（如产品介绍），屏幕阅读器完全识别不出这是标题
- 标题内只有图标或空白字符（如），没文字也没aria-label，用户根本不知道区块主题
配合ARIA增强上下文，但不替代原生语义
极少数场景下，标题本身不带说明性文字（比如图表旁的
），可用aria-labelledby指向附近描述性文字；或者用aria-describedby关联补充说明（如“（更新于2026年7月28日）”）。但这些只是辅助，不能用来绕过写真实标题——因为屏幕阅读器优先读标题标签内的文本，aria属性只是补足，不是主干。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
