表格col元素设置lang属性实现列级语言指定的可行性及无障碍访问验证

你问的这个问题在无障碍前端开发里真的挺常见——混合语言表格到底用列级lang还是必须挨个单元格加，我来给你理得明明白白：

核心结论 #

完全不用被迫给每个单元格都加lang属性！ <col>标签上的lang属性是符合HTML规范的，而且绝大多数现代浏览器和主流屏幕阅读器（比如VoiceOver、NVDA、JAWS的新版本）都支持列的lang属性继承到对应列的所有单元格。这比挨个加单元格属性高效太多了。

分析你的代码示例 #

先看你提供的第一种列级lang的写法：

<table>
 <colgroup>
 <col lang="en" />
 <col lang="fr" />
 </colgroup>
 <thead>
 <tr>
 <th id="product-name" lang="fr">Produit</th>
 <th id="product-cta">Essai de Produit</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th headers="product-name" id="widgetos">WidgetOS</th>
 <td headers="widgetos product-cta"><a href="#">essaye-le</a></td>
 </tr>
 <tr>
 <th headers="product-name" id="widgetplugins">Widget Plugins</th>
 <td headers="widgetplugins product-cta"><a href="#">essaye-le</a></td>
 </tr>
 </tbody>
</table>

这个写法是符合无障碍标准的，不过有个小细节要注意：

• 你给第一列<col>设了lang="en"，对应<tbody>里的WidgetOS、Widget Plugins这些英文内容会自动继承这个语言属性，屏幕阅读器会用英语发音规则朗读；
• 第二列<col>设了lang="fr"，所以<thead>里的Essai de Produit和<tbody>里的essaye-le都会继承法语属性，无需额外添加；
• 而<thead>里的第一个<th>（Produit）你手动加了lang="fr"，这是对的——因为它和第一列的默认en语言冲突，元素自身的lang会覆盖继承来的列属性，确保表头的法语内容被正确识别。

再看你提供的第二种逐个单元格加lang的写法：

<table>
 <thead lang="fr">
 <tr>
 <th id="product-name">Produit</th>
 <th id="product-cta">Essai de Produit</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th headers="product-name" id="widgetos" lang="en">WidgetOS</th>
 <td headers="widgetos product-cta" lang="fr"><a href="#">essaye-le</a></td>
 </tr>
 <tr>
 <th headers="product-name" id="widgetplugins" lang="en">Widget Plugins</th>
 <td headers="widgetplugins product-cta" lang="fr"><a href="#">essaye-le</a></td>
 </tr>
 </tbody>
</table>

这个写法完全合法且无障碍友好，但缺点也很明显：代码冗余度极高，维护成本大——比如如果后续要把第二列的语言改成西班牙语，你得修改所有第二列的单元格，而用列级lang的话只需要改<col>标签的属性就行。

兼容性注意事项 #

如果你需要兼容非常老旧的屏幕阅读器（比如JAWS 18及更早版本，或者IE时代的工具），这些旧工具可能对<col>的lang继承支持不好，这时候才需要考虑给单元格单独加lang。但在当前的主流环境下，列级lang的写法是完全可靠的。

最后总结 #

1. 优先用<colgroup>+<col>的方式设置列级lang：代码简洁、维护高效，现代无障碍工具全支持；
2. 只有当某列里存在个别和列默认语言不同的单元格时，才给这个单元格单独加lang属性覆盖继承值；
3. 老旧兼容性场景下，再考虑给所有单元格手动加lang。

内容来源于stack exchange