lang属性必须为IETF标准格式、<main>须为<body>直接子元素且唯一、标题层级必须连续，三者是可访问HTML的硬性准入门槛，缺一不可；lang写错会导致屏幕阅读器误读，<main>嵌套或重复将使主内容被跳过，标题断裂则造成用户“掉层”导航。
lang 属性必须是 IETF 标准格式，<main> 必须是 <body> 的直接子元素且全局唯一，标题层级必须连续——这三者不是“建议”，而是可访问 HTML 的硬性准入门槛。缺一不可。
lang 属性写错或缺失，屏幕阅读器会彻底误读内容
很多团队在 SSR 或静态生成时用模板变量拼接 lang 值，比如 lang="{{ locale }}"，但没过滤非法值，结果产出 lang="ch" 或 lang="zh"。这类值不符合 IETF 标准，NVDA、VoiceOver 会 fallback 到默认语言（通常是英文），中文内容被逐字按英语发音朗读，语调断裂、分词错误，用户根本无法理解。
必须写成 lang="zh-CN"（简体）、lang="zh-TW"（繁体）或 lang="zh-HK"（港澳），后缀不可省略；<html> 标签上声明，不能只靠 <meta> 或局部 lang 属性补救；多语言页面中局部切换语言需嵌套，如引文：<p lang="en">"The quick brown fox..."</p>；React/Vue 中避免运行时 JS 拼接，确保首屏 HTML 的 <html lang=""> 已正确渲染。
<main> 嵌套或重复，屏幕阅读器将跳过主内容
常见错误是把 <main> 包在 <div class="container"> 或 <section> 里，或者服务端模板多次 include 导致多个 <main>。这时 NVDA 等工具要么忽略整个区域，要么报严重结构错误，用户按 M 键无法进入正文。
立即学习“前端免费学习笔记（深入）”；
<main> 必须是 <body> 的**直接子元素**，且全局只能出现一次；禁止在 <main> 内部再嵌套 <main>，axe 等工具会直接标记为 critical；如果使用组件化框架，需在布局层统一控制，避免子组件意外输出 <main>；<nav>、<aside> 等 landmark 元素可并列存在，但 <main> 是唯一主干。
标题层级断裂，屏幕阅读器用户会“掉层”导航
用户按 H 键（H1/H2/H3…）逐级跳转时，一旦遇到 <h2> 后直接 <h4>，中间缺了 <h3>，他们就会误判章节结束，实际内容还在继续——这不是体验差，是信息架构逻辑塌方。
常见原因包括：CSS 隐藏了某个标题（display: none 或 visibility: hidden），但 DOM 仍保留；JS 动态插入标题未校验层级；第三方组件库默认用 <h2> 作卡片标题，嵌套在 <h2> 主区下，造成 H2→H2；修复方式：删 DOM 而非仅视觉隐藏；若必须保留，用 aria-hidden="true" + 视觉隐藏类替代 display: none；每个 <section> 应以 <h2> 或更高级别标题开头（HTML5 允许重置层级，但前提是显式提供）。
真正卡住工程落地的，从来不是“要不要做”，而是 lang 值是否经过白名单校验、<main> 是否在服务端模板里被无意识复制、标题层级是否在组件组合时悄然断裂——这些点不进 CI 流水线、不进 ESLint 规则、不进自动化扫描，就永远只是“已知但未修复”的幽灵问题。
