如何实现移动端无障碍脚注？解决VoiceOver读取异常问题

嘿，我来帮你搞定这个移动端VoiceOver的脚注无障碍问题！这种桌面正常、移动端掉链子的情况，大概率是语义标记或者焦点管理没做对，给你几个针对性的解决方案：

• 完善脚注引用的ARIA语义
  你当前的链接role可能没用到专门的文档结构角色，建议改用role="doc-noteref"（这是WAI-ARIA专为脚注引用设计的角色），同时加上aria-describedby关联对应脚注的ID，让VoiceOver明确知道这个引用指向的内容。示例代码：

  <p>Some text<sup><a href="#foot1" role="doc-noteref" aria-describedby="foot1" id="ref1">1</a></sup></p>
  

• 优化脚注目标元素的配置
  脚注本身需要明确的语义和可聚焦性，给脚注元素加上role="doc-footnote"，同时设置tabindex="-1"（让它能被聚焦但不会进入Tab导航流），再用aria-labelledby关联回脚注引用的ID，形成双向语义关联。示例代码：

  <div id="footnotes">
    <li id="foot1" role="doc-footnote" tabindex="-1" aria-labelledby="ref1">
      这里是脚注的具体内容 <a href="#ref1" role="doc-backlink">↩</a>
    </li>
  </div>
  

• 手动触发VoiceOver朗读（兜底方案）
  如果上面的语义优化后还是不生效，可以用JavaScript在跳转后主动触发朗读。点击脚注引用时，先聚焦到脚注元素，再调用Web Speech API朗读内容。示例代码：

  // 给所有脚注引用绑定点击事件
  document.querySelectorAll('[role="doc-noteref"]').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const footnoteId = link.getAttribute('href').slice(1);
      const footnote = document.getElementById(footnoteId);
      
      // 聚焦脚注元素
      footnote.focus();
      
      // 触发VoiceOver朗读内容
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(footnote.textContent.trim());
        speechSynthesis.speak(utterance);
      }
    });
  });
  

• 测试小技巧
  测试时记得在移动端打开VoiceOver，点击脚注引用后，观察焦点是否落在脚注上，同时留意是否自动开始朗读。另外别忘了测试脚注里的返回链接，确保用户能顺畅回到原文位置。

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