VoiceOver在Safari中无法读取tooltip内列表元素的技术问询

这是Safari的已知无障碍兼容性问题，并非你的实现不符合规范——Safari在处理aria-describedby关联的包含列表（<ul>/<li>）的tooltip内容时，会忽略列表结构，仅读取段落文本，而Chrome和Firefox对这种场景的语义识别更完善。

针对这个问题，你可以尝试以下几种修复方案：

• 强制列表语义识别
  给tooltip内的<ul>元素添加role="list"属性，强制Safari识别列表结构，弥补它对原生列表语义的识别偏差。示例代码：

  <ul role="list">
    <li>至少8个字符</li>
    <li>包含大小写字母</li>
    <li>包含数字或特殊符号</li>
  </ul>
  

• 替换列表为结构化段落
  如果不想依赖ARIA属性，也可以把列表项转换为带项目符号的段落，确保所有内容都能被VoiceOver读取，比如：

  <p>• 至少8个字符</p>
  <p>• 包含大小写字母</p>
  <p>• 包含数字或特殊符号</p>
  

• 动态播报优化（需JS支持）
  可以给tooltip添加aria-live="polite"属性，当输入框聚焦时，动态触发tooltip内容的播报。这种方式适合复杂内容场景，但需要额外的JavaScript逻辑来控制播报时机。

你提到的关于Safari列表的相关文章，核心思路就是解决Safari对原生列表语义在特殊上下文下的识别失效问题，添加role="list"是目前最直接且通用的修复方式，已被多个无障碍测试标准推荐。

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