弹窗元素本身加lang属性即可生效，因其作用于该元素及其所有后代；必须显式设置在弹窗根元素（如<dialog>或<div role="dialog">）上，不能仅依赖<html>的lang值。
弹窗元素本身加 lang 属性就行
HTML 的 lang 属性作用于它所在的元素及其所有后代，不依赖文档根节点。只要弹窗是独立的 DOM 元素（比如 <dialog>、<div role="dialog"> 或动态插入的 <div class="modal">），直接在该元素上写 lang="zh-CN" 或 lang="ja" 就生效。
常见错误是只改 <html lang="en">，结果弹窗里日文内容仍被屏幕阅读器按英文朗读——因为弹窗没覆盖语言上下文。
- 用
<dialog lang="ko">时，内部所有文本（包括未显式设lang的子元素）默认继承为韩语 - 如果弹窗里混有英文术语，可以局部覆盖：
<span lang="en">API</span> - 用 JavaScript 动态创建弹窗时，记得连同
lang一起设置：modalEl.setAttribute('lang', 'zh-Hans')
aria-label 和 aria-labelledby 不替代 lang
有人试图用 aria-label="确认删除" 让屏幕阅读器按中文读，但这只是给整个弹窗一个“别名”，不改变其语言环境。语音引擎仍按父级 lang 解析实际文本内容，可能导致发音错乱（比如把中文“文件”读成英文 “file”）。
-
aria-label是辅助说明，不是语言声明 -
lang影响语音合成、拼写检查、字体回退等底层行为 - 二者可以共存：弹窗元素同时有
lang="zh-CN"和aria-labelledby="modal-title"
服务端渲染或 i18n 框架里的注意事项
如果弹窗内容由模板（如 Handlebars、React JSX）动态注入，lang 必须随语言环境实时更新，不能硬编码。
立即学习“前端免费学习笔记（深入）”；
- Next.js 中，用
useRouter().locale获取当前 locale，然后绑定到弹窗 DOM 上 - Vue 项目若用
createApp挂载弹窗，需确保挂载前已设置好lang，否则 SSR 渲染出的初始 HTML 可能语言错位 - 避免在 CSS 里用
[lang="ja"]做字体切换却忘了同步更新弹窗元素的lang值——样式和语义会脱节
验证是否生效的最快方法
打开浏览器开发者工具，选中弹窗最外层元素，在 Elements 面板里确认 lang 属性存在且值正确；再用屏幕阅读器（如 NVDA + Firefox 或 VoiceOver + Safari）朗读弹窗内文字，听发音是否符合目标语言规则。
容易被忽略的是：某些旧版弹窗库（如早期 jQuery UI Dialog）会把内容移动到 <body> 底部，导致脱离原上下文——此时必须手动给移动后的 DOM 节点补上 lang，光靠模板里写没用。
