html提示文本（title、placeholder、aria-label等）的语言必须显式标注在宿主元素上，不可继承html的lang属性，否则屏幕阅读器会用错误语音引擎朗读，导致发音失准、翻译失效等可访问性问题。
提示文本的 lang 属性必须写在承载它的 HTML 元素上，不能靠继承
HTML 中没有独立的“提示文本”标签，常见提示场景包括 title 属性、aria-label、placeholder，以及 <label></label> 或 <figcaption></figcaption> 等语义化提示容器。这些内容的语言归属，**不继承** html 根节点的 lang，必须显式标注——尤其当提示内容本身是外语时。
例如：<input placeholder="Search"> 的 placeholder 是英文，但页面主语言是中文，若不标注，屏幕阅读器仍会用中文 TTS 引擎硬读 “Search”，输出 /səːtʃ/ 变成类似“搜尺”的音。
-
title属性值无法嵌套标签，所以它本身不支持lang；唯一办法是让整个元素的lang匹配其title内容语言，比如<abbr lang="en" title="Application Programming Interface">API</abbr> -
placeholder同理，需把lang加在<input>或<textarea></textarea>上：<input placeholder="Rechercher" lang="fr"> -
aria-label是纯字符串，无障碍技术按宿主元素的lang解析，因此要设lang在该元素本身：<button aria-label="Close" lang="en">×</button> - 语义化提示容器（如
<label></label>、<figcaption></figcaption>）可直接加lang：<label lang="ja">氏名</label>
为什么 title 和 placeholder 不能用 CSS :lang() 控制
:lang() 是 CSS 伪类，只匹配具有 lang 属性的元素及其后代文本节点，而 title 和 placeholder 是属性值，不是 DOM 子树的一部分，因此完全不受 :lang(zh) 影响。试图写 input:lang(en) { ... } 不会生效——因为 input 元素自身没 lang，且 :lang() 不作用于属性值。
这也意味着：如果一个 <input lang="en"> 的 placeholder 是中文，那语音朗读仍按英文规则处理中文字符（比如把“搜索”切分为 /sōu/ /suǒ/ 而非 /sōu suǒ/），所以务必保证 lang 值与 placeholder 实际语言一致。
- 错误：
<input placeholder="搜索" lang="en">→ 英文引擎读中文，多音字、声调全错 - 正确：
<input placeholder="搜索" lang="zh-CN"> - 混合提示（如
placeholder="Search / 搜索"）应统一按主语言设lang，或拆分为两个独立字段
表格内提示文本（如 th、caption）的 lang 必须单独声明
表格结构中，<caption></caption>、<th>、<code><td> 都可能承担提示功能（例如列标题说明数据含义）。它们的语言不会从 <code><table> 或 <code> 继承，必须逐个标注。
典型反例：<table lang="zh-CN"><caption>Sales Report</caption></table> —— 这里 <caption></caption> 仍是无 lang 的裸文本，屏幕阅读器按 html 的 lang 处理，但若整页是中文，它就会用中文引擎读 “Sales Report”，结果是 /seɪlz rɪˈpɔːt/ 被硬译为“赛尔斯瑞波特”。
- 正确写法：
<caption lang="en">Sales Report</caption> -
<th lang="en">SKU</th>，而非依赖表格级lang -
<th lang="zh-Hans">商品编码</th>，注意和html lang="zh-CN"并不冲突，只要语义准确即可 - 数值、单位、代码缩写（如
USD、SKU、API）若出现在中文th中，建议包裹<span lang="en">API</span>，否则会被整体按中文朗读
动态生成的提示文本容易漏掉 lang 更新
单页应用（SPA）中，title、placeholder、aria-label 常由 JS 动态注入。此时仅更新字符串值远远不够——必须同步设置宿主元素的 lang 属性，否则新提示文本仍沿用旧语言上下文。
例如 Vue 中：<input :placeholder="t('search')" :lang="currentLang">，currentLang 必须随语言切换实时更新；React 中同理，不能只改 placeholder prop 而忽略 lang。
- 错误模式：
el.placeholder = 'Rechercher';但没执行el.lang = 'fr' - 更隐蔽的问题：第三方 UI 库（如 Ant Design、Mantine）的
Input组件若未透传lang到底层<input>，会导致提示文本语言失准 - 服务端渲染（SSR）项目中，
placeholder的语言必须和首屏 HTML 的html lang一致；JS 后续切换语言时，需确保所有动态插入的提示节点都带对应lang
关键点在于：提示文本不是装饰性文字，它是可访问性链路的关键一环。一旦语言声明缺失或错位，屏幕阅读器就失去断词依据，翻译工具无法触发上下文识别，连 Chrome 地址栏的翻译按钮都可能消失——这些都不是样式问题，而是语义断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
