lang属性必须写在html标签上且值合法（如zh-cn），否则屏幕阅读器直接读错语种；局部多语言内容需显式标注lang，不能依赖继承或hreflang；结构元素（main、标题层级）、svg、表单等可访问性锚点须同步更新。
lang 属性写错、嵌套错、漏设，是多语言页面可访问性失效的最常见原因——不是“部分功能不好用”，而是屏幕阅读器直接读错语种、跳过内容、甚至崩溃。修复必须从 HTML 骨架入手，不能靠 JS 补救。
检查 html 标签的 lang 是否合法且顶格出现
绝大多数问题源于这第一行就错了： 或 看似省事，但 NVDA、VoiceOver 会当作无效值忽略，后续所有中文内容大概率被读成日语或英文。
- 必须使用 IANA 注册的标准值：
zh-CN（简体）、zh-TW（繁体）、en-US、ja-JP等，不能缩写 -
必须是文件第一个非空白字符，前面不能有 BOM、空格、注释或任何输出 - React/Vue SSR 模板中若用 JS 拼接
lang，要确保首屏 HTML 已渲染正确值，否则初始朗读已错
验证局部语言切换是否用对了 lang 而非 hreflang
hreflang 是给搜索引擎看的，和屏幕阅读器无关；真正控制语音引擎切换的，只有元素上的 lang 属性。
- 英文引文必须写成：
<p lang="en">The quick brown fox...</p>，不是只加<link rel="alternate" hreflang="en"> - 嵌套场景下，
lang会继承，但可被子元素覆盖：外层<section lang="zh-CN"></section>内的法语短语可单独加<span lang="fr">bonjour</span> - 避免在
<div> 上滥用 <code>lang：它不改变语义，仅影响语音，优先用语义标签（如<q></q>、<blockquote></blockquote>）包裹再设lang排查
main和标题层级是否因多语言切换被破坏语言切换常伴随 DOM 重绘或组件复用，极易引发结构性错误——这些错误在视觉上完全不可见，但会让屏幕阅读器用户“掉出页面”。
-
<main></main>必须是的**直接子元素**且**全局唯一**；多语言布局组件（如 Next.js Layout）里塞一个<main></main>，子页面又渲染一个，就会触发document-has-main严重错误 - 切换语言后，检查标题是否跳级：比如主区域用
<h1></h1>，翻译后的子模块却用了<h3></h3>而跳过<h2></h2>，会导致屏幕阅读器按 H 键导航时“坠层” - 组件库默认标题层级（如卡片用
<h2></h2>）在多语言嵌套时需手动降级，不能依赖 CSS 视觉模拟
确认 SVG、
picture和表单控件的可访问性未被语言逻辑干扰多语言切换脚本常只替换文本节点，却忽略内联 SVG、图片替代文本、表单绑定等关键可访问性锚点。
- SVG 图标内联时，必须同时加
role="img"和aria-label（不能只靠title），且aria-label值也要随语言切换更新 -
<picture></picture>的alt在<img>上，不在<picture></picture>；多语言切换时若只改父容器文本，alt会滞留在旧语言 - 表单
<label></label>和<input>的绑定必须显式（for/id或隐式包裹），不能靠 JS 动态插入文本后“看起来对齐”——键盘用户聚焦时根本听不到字段含义
lang错一个字符、main多嵌一层、标题少一级，都足以让辅助技术彻底迷失。修复必须回归 HTML 源码，逐行校验，而不是调试 JS 切换逻辑。 -
