高可访问性重构的硬性准入门槛是:必须从开始、确保为直接子元素且唯一、严格保持标题层级连续性;三者缺一不可。

直接说结论:不从 开始、不校验 <main></main> 唯一性、不检查标题层级连续性,就谈不上“高可访问性重构”——这三者是硬性准入门槛,不是优化项。
为什么 lang 写错会让屏幕阅读器完全失效
很多老旧系统模板里写 lang="ch" 或 lang="zh",甚至干脆没写。这些值不符合 IETF 标准,NVDA、VoiceOver 会 fallback 到英文引擎,把“登录按钮”读成 “deng lu an niu”,分词错、语调崩、用户听不懂。
- 必须用
lang="zh-CN"(简体)、lang="zh-TW"(繁体)或lang="zh-HK"(港澳),后缀不可省略 -
标签上声明,不能只靠<meta>或局部lang补救 - 多语言页面中局部切换,要用嵌套:
<p lang="en">Hello</p> - React/Vue 动态渲染时,别在 JS 里拼
lang值——首屏 HTML 必须已带对
<main></main> 嵌套或重复会导致主内容被跳过
老旧系统常把整个页面包在 <div class="wrapper"> 里,再在里面塞一个 <code><main></main>;或者服务端模板 include 多次,导致多个 <main></main>。结果是 NVDA 按 M 键进不去正文,用户直接卡在导航区。
-
<main></main>必须是的**直接子元素**,且全局只能出现一次 - 禁止嵌套:
<main><div><main>... 是严重错误,axe 工具标为 critical <li>组件化框架中,要在布局层统一控制,避免子组件意外输出 <code><main></main> -
<nav></nav>可并列多个,但<main></main>是唯一主干,不能当普通区块用 - 常见原因:CSS 用
display: none隐藏了某个<h3></h3>,但 DOM 还在;JS 动态插入标题未校验层级;第三方组件默认用<h2></h2>作卡片标题,嵌套在<h2></h2>主区下 - 修复方式:删 DOM,而非仅视觉隐藏;若必须保留,改用
aria-hidden="true"+ 视觉隐藏类 - 每个
<section></section>应以<h2></h2>或更高级别标题开头(HTML5 允许重置层级,但前提是显式提供) - 避免用
<div class="title"> 模拟标题——语义缺失无法被任何 ARIA 补救 <p>真正难的不是加 <code>aria-label,而是把旧代码里满屏的<div> 替换成 <code><header></header>、<nav></nav>、<main></main>、<section></section>,并确保它们的嵌套和顺序符合原生语义逻辑。一旦结构跑偏,后续所有 ARIA 注入都是无效劳动。
标题层级断裂不是“体验差”,是信息架构塌方
用户按 H 键(H1→H2→H3…)跳转时,<h2></h2> 后直接 <h4></h4>,中间缺了 <h3></h3>,他们就会误判章节结束。这不是提示弱,是逻辑断层——内容还在继续,但 AT 认为“到此为止”。











