弹窗元素本身加lang属性即可生效,因其作用于该元素及其所有后代;必须显式设置在弹窗根元素(如或)上,不能仅依赖的lang值。

弹窗元素本身加 lang 属性就行
HTML 的 lang 属性作用于它所在的元素及其所有后代,不依赖文档根节点。只要弹窗是独立的 DOM 元素(比如 <dialog></dialog>、<div role="dialog"> 或动态插入的 <code><div class="modal">),直接在该元素上写 <code>lang="zh-CN" 或 lang="ja" 就生效。
常见错误是只改 ,结果弹窗里日文内容仍被屏幕阅读器按英文朗读——因为弹窗没覆盖语言上下文。
- 用
<dialog lang="ko"></dialog>时,内部所有文本(包括未显式设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)会把内容移动到 底部,导致脱离原上下文——此时必须手动给移动后的 DOM 节点补上 lang,光靠模板里写没用。











