表格单元格必须单独加lang，不能靠<table>或<tr>继承；浏览器和屏幕阅读器只识别<td>或<th>显式声明的lang值，<table lang="en">等写法完全无效，需逐单元格标注真实语言并同步动态渲染。
表格单元格必须单独加 lang，不能靠 <table> 或 <tr> 继承
浏览器和屏幕阅读器（如 NVDA、VoiceOver）在朗读表格时，只看每个 <td> 或 <th> 元素是否显式声明了 lang。给 <table lang="en"> 或 <tr lang="fr"> 加属性完全无效——这些标签没有语言语义，读屏软件不会据此切换发音引擎。
常见错误现象：
- 整张表用
<table lang="en">包裹，但法语词仍被读成中文音节 -
<th>里的英文标题没加lang，结果 “API” 被读作 “阿皮”
正确做法是逐单元格标注：
<table>
<tr>
<th>中文术语</th>
<th lang="en">English Term</th>
</tr>
<tr>
<td>响应式布局</td>
<td lang="en">responsive layout</td>
</tr>
<tr>
<td>状态管理</td>
<td lang="ja">状態管理</td>
</tr>
</table>
lang 值必须匹配实际文本语言，不是“看起来像英文”就填 en
表格里出现的外语内容，lang 必须对应其真实语言，否则语音引擎会降级或误读。比如日文汉字混假名，不能写 lang="zh"；韩文术语不能写 lang="en" 即便它用拉丁字母拼写。
立即学习“前端免费学习笔记（深入）”；
实操要点：
-
<td lang="ja">ユーザー</td>✅ 日文片假名，用ja -
<td lang="ko">사용자</td>✅ 韩文，用ko -
<td lang="en">UI/UX</td>✅ 英文缩写，按英文规则断词重音 -
<td lang="fr">bonjour</td>✅ 法语词，触发法语 TTS 引擎 -
<td lang="en">こんにちは</td>❌ 日文假名写成en，会被读成英语音节
中英文混排单元格怎么处理 lang
一个 <td> 里既有中文又有英文术语（如“使用 useState Hook”），不能整个单元格统一设 lang="zh-CN" 或 lang="en"——这会让英文部分被中文引擎硬读，或中文部分被英文引擎切音节。
解决方案是拆分语义：
- 用
<span lang="en">useState</span>包裹英文术语 - 保留外层
<td>为lang="zh-CN"（主语言） - 避免用
<div>或<span>无意义包裹，必须有明确语言意图
示例：
<td lang="zh-CN">调用 <code lang="en">useState</code> 初始化状态</td>
注意：<code> 是语义化元素，天然适合嵌入外语技术词，且多数读屏软件对其 lang 支持稳定。
动态渲染表格时，lang 必须随内容同步注入
如果表格由 JS 拼接字符串或通过框架（React/Vue）渲染，仅在初始 HTML 中写对 lang 不够。JS 插入新行或更新单元格内容后，若没同步设置 lang 属性，屏幕阅读器仍按旧语言规则朗读。
关键点：
- 不要只改
innerHTML，要同时设element.setAttribute('lang', 'en') - React 中用
lang作为 prop 透传，而非依赖父组件继承 - Vue 中避免用
v-html渲染含多语言内容，应拆解为带lang的子组件 - 用
aria-live区域更新时，确保新节点已含正确lang，否则 VoiceOver 可能跳过语言切换
最容易被忽略的是：表格排序、筛选、分页后重新渲染的 DOM，常遗漏 lang 设置——这时语音朗读会突然“变调”，用户感知明显。
