图片alt文本多语言适配WCAG 3.1.2规范的技术咨询

针对你遇到的含多语言内容的图片违反WCAG 3.1.2规范的问题，可通过以下两种可靠方案解决：

方案一：用aria-labelledby关联带语言属性的隐藏元素 #

这是最符合无障碍规范的方案，能让屏幕阅读器精准识别不同语言片段并调用对应语音朗读：

1. 创建两个视觉隐藏的<span>元素，分别为英文和西班牙语文本设置lang属性，存放图片对应内容的描述：

   <!-- 视觉隐藏类，仅屏幕阅读器可见 -->
   <style>
     .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       border: 0;
     }
   </style>
   
   <span id="img-english" lang="en" class="sr-only">标题：Welcome to Our Platform</span>
   <span id="img-spanish" lang="es" class="sr-only">内容：Bienvenidos a nuestra plataforma</span>
   

2. 给图片设置aria-labelledby属性，关联上述两个元素的ID，同时清空alt属性（避免重复朗读）：

   <img src="multilingual-form.jpg" alt="" aria-labelledby="img-english img-spanish">
   

   屏幕阅读器会依次读取两个<span>的内容，并根据各自的lang属性自动切换语音包，解决西班牙语被英语朗读的问题。

方案二：优化alt文本并结合语言标记（备选） #

如果场景限制无法使用隐藏元素，可在alt文本中明确标注语言，同时配合页面的语言上下文：

• 将alt文本写成包含语言说明的清晰描述，例如：

  <img src="multilingual-form.jpg" alt="English heading: 'Welcome to Our Platform'; Spanish content: 'Bienvenidos a nuestra plataforma'" lang="en">
  

  不过这种方法依赖屏幕阅读器对语言标注的识别能力，可靠性不如方案一，仅作为临时替代。

核心合规要点 #

WCAG 3.1.2的核心要求是不同语言的内容片段必须被辅助技术识别为对应语言，因此无论采用哪种方案，都要确保西班牙语文本的部分有明确的lang="es"标记，不能仅依赖主页面的lang="en"设置。

内容的提问来源于stack exchange，提问作者TomC