在HTML语义化实践中，最容易被忽视的并非标签错误，而是那些“不影响视觉”的结构性断裂——比如缺少、被错误嵌套、或者
na v 标签必须包裹链接集合，否则语义失效
很多人误以为role="na vigation"后，发现里面根本没有可跳转的链接——导航意图直接落空，用户无法获得预期的导航体验。
来看几个典型错误案例：
href或可聚焦交互逻辑，读屏软件根本不将其视为导航项首页 关于我们 - 多个
aria-label，VoiceOver在“区域跳转”模式下只报“导航”，主导航、页脚链接、面包屑完全混淆
推荐实践其实就三条：
- 每个
，或带tabindex="0"+role="link"的可聚焦元素 - 必须使用
模拟列表——即使添加role="list"，兼容性也不够可靠 - 如果存在多个
aria-label区分，例如
main 只能出现一次，且不能嵌套在其他语义容器里
的职责是标明页面唯一主体内容，浏览器和读屏软件通过它提供“跳转到主要内容”的快捷指令。一旦重复或嵌套，辅助技术会自动丢弃这个区域，用户只能被迫从头听到尾，严重影响浏览效率。
典型误用场景：
- 在
或里再塞一个——规范明确禁止，部分读屏直接跳过整块内容 - 页面顶部用
，底部又来一个——第二个被忽略，页脚内容被当成正文朗读 - 用CSS隐藏了
但未设置aria-hidden="true"，视觉不可见但语音照播，造成信息混乱
实施建议：
- 全页只保留一个
，直接放在下（允许与同级并列） - 如果确实需要多个主内容区块（例如仪表盘多卡片），用
或分组，而不是创建多个 - 动态渲染时要特别注意JS是否会意外插入第二个
——React/Vue组件复用很容易踩这个坑
标题层级断裂会让读屏用户彻底迷失上下文
屏幕阅读器依靠到构建文档大纲，跳级或乱序会直接导致“子章节突然变成父章节”，用户的大局观瞬间崩塌，无法快速定位所需内容。
常见错误现象：
- 页面从
开始，根本没有——读屏默认把第一个当主标题，后续被理解为同级而非子级 外面写了三个（比如logo、banner标题、侧边栏标题）——大纲崩溃，NVDA的“标题导航”模式直接失效- 用
写小标题，但它所属的开头没有——读屏认为这是独立顶级区块，结构完全错乱
关键约束：
- 全页严格只有一个
，代表页面核心主题（文章标题或产品名称） - 每个
或应该以起始（如果整体已经用了） - 如果要用CSS隐藏标题，必须使用
position: absolute; clip: rect(1px, 1px, 1px, 1px);，严禁display: none或visibility: hidden
ARIA 是补救手段，不是语义替代品
原生语义标签（比如、）自带角色、名称和状态。乱加ARIA属性反而会覆盖默认行为，导致读屏误解或静默失败，反而降低可访问性。
容易踩的坑：
- 给已经有
的再加aria-labelledby——读屏重复播报两次，影响用户体验 - 模态框没设
role="dialog"+aria-modal="true"，只靠aria-hidden="true"关闭背景——键盘焦点还能进入背景内容，造成操作混乱 - 用
aria-current="true"标识当前页——这不是合法值，NVDA直接忽略，应该始终使用aria-current="page"
原则很清晰：
- 优先用原生标签，只有原生语义不够时（如图标按钮、自定义下拉、JS动态面板）才加ARIA
- 所有ARIA属性必须指向真实存在的DOM元素ID，且目标不能是
display: none - JS动态更新状态（比如切换菜单展开）时，必须同步操作
aria-expanded和aria-current，不能只改class
说到底，语义化不是标签堆砌，而是让每个标签承载它本该表达的含义。最容易被忽略的，往往是那些看似不影响视觉的结构性断裂——比如缺失、嵌套、或
