lang属性必须严格使用ietf标准值如zh-cn，根html标签缺失或错误会导致屏幕阅读器fallback英文；main必须是body直接子元素且唯一；标题需严格层级连续；应优先使用原生语义标签而非aria。
lang 属性必须严格匹配 IETF 标准，否则屏幕阅读器直接 fallback 到英文
写成 lang="zh" 或 lang="ch" 看似能通过 W3C 验证，但 NVDA、VoiceOver 会拒绝识别，转而用英语逐字朗读中文内容——语调断裂、分词错误，用户完全无法理解。真正有效的值只有 lang="zh-CN"（简体）、lang="zh-TW"（繁体）、lang="zh-HK"（港澳），后缀不可省略。
常见踩坑点：
- SSR 模板中用
lang="{{ locale }}"动态插入，却没过滤非法值（如后端返回"zh"） - 只在局部元素加
lang="en"，但根标签缺失或写错——根lang是全局兜底，<meta>或局部属性无法替代 - React/Vue 中依赖 JS 运行时设置
document.documentElement.lang，导致首屏 HTML 无lang，SSR 或爬虫拿到的是空/错值
必须是 的直接子元素且全局唯一
把 <main></main> 套在 <div class="container"> 里，或服务端模板多次 <code>include 导致重复输出，都会让 NVDA 等工具跳过主内容区——用户按 M 键无法进入正文，axe 直接报 critical 级错误。
关键约束：
-
<main></main>只能出现一次，且必须是的**直接子元素**，不能嵌套在<section></section>、<div> 或其他 landmark 内 <li>禁止在 <code><main></main>内部再嵌套<main></main>，哪怕逻辑上“子模块也想标为主内容”也不行 - 组件化框架中，
<main></main>必须由顶层布局组件统一控制，子组件严禁输出<main></main>标签 - CSS 用了
display: none或visibility: hidden隐藏某个标题，但 DOM 仍保留；正确做法是删 DOM，或改用aria-hidden="true"+ 视觉隐藏类 - 第三方组件库默认用
<h2></h2>作卡片标题，而卡片本身嵌在<h2></h2>主区下，造成H2 → H2断层 - JS 动态插入标题未校验层级，比如异步加载的侧边栏标题直接写
<h3></h3>，但当前上下文已是<h2></h2> - 能用
<nav></nav>就不用<div role="navigation">；能用 <code><main></main>就不靠role="main"补救 -
<fieldset></fieldset>+<legend></legend>是表单分组的黄金组合，比role="group"+aria-labelledby更轻量、更可靠 - 标签页（tab）必须用
role="tablist"/role="tab"/role="tabpanel"，但前提是结构已用<ul></ul>和<button></button>打底——ARIA 描述行为，HTML 提供骨架
标题层级断裂会让屏幕阅读器用户“掉层”导航
用户按 H 键（H1→H2→H3…）逐级跳转时，若 DOM 中出现 <h2></h2> 后直接 <h4></h4>，中间缺了 <h3></h3>，他们就会误判章节结束——这不是体验差，是信息架构逻辑塌方。
真实原因常被忽略：
用原生语义标签代替 div + ARIA，不是可选，而是减负刚需
看到 <div role="button" tabindex="0"> 就该警觉：这说明开发者放弃了浏览器原生能力。原生 <code><button></button> 自带焦点管理、空格/回车触发、禁用状态样式、屏幕阅读器朗读行为——全都要手动补。
工程化落地时优先级明确：
复杂交互组件的可访问性，从来不是靠堆砌 ARIA 属性实现的；它始于对语义 HTML 的诚实选择，止于对键盘流和焦点流的精确控制。那些被跳过的 <main></main>、念错的 lang、断层的 <h3></h3>，往往不是技术难点，而是工程流程里没人校验的缝隙。
