iOS VoiceOver无法读取嵌套<ul>元素及滑动导航问题求助

这个问题主要是由于ARIA菜单组件的语义属性不完整，加上iOS VoiceOver对菜单导航的特定逻辑导致的，具体原因拆解如下：

• 缺失关键ARIA关联属性：你的父级菜单项没有明确标记它控制着一个子菜单，VoiceOver无法识别子菜单与父项的从属关系，自然无法导航到嵌套元素。
• 导航方式理解偏差：VoiceOver中，ARIA菜单内部的菜单项是通过**上下滑动手势（或虚拟键盘上下键）**遍历的，左右滑动是用来在页面不同独立交互元素（比如不同按钮、段落、区域）之间切换，而非菜单层级间的导航——哪怕属性正确，用左右滑也没法进入子菜单。
• 语义冲突（潜在问题）：从代码片段看，子菜单的<a>标签似乎设置了role="button"，这会和外层<li>的role="menuitem"产生语义混淆，VoiceOver会误判元素的交互类型，进一步影响导航逻辑。

修复步骤 #

1. 补全ARIA关联属性

   • 给父级<a>标签添加aria-haspopup="menu"，明确告知VoiceOver这是一个弹出菜单的触发项；
   • 给子菜单<ul>设置唯一ID（比如id="sub-menu"），再给父级<a>加上aria-controls="sub-menu"，建立父项与子菜单的明确关联。

2. 统一语义逻辑

   • 去掉子菜单<a>标签上多余的role="button"——外层<li>的role="menuitem"已经足够表达菜单项语义，嵌套的<a>保持默认链接语义即可（如果是纯交互项，也可以把<a>换成<button>，但要保证层级语义清晰）。

3. 使用正确的导航手势
   父菜单展开后，用上下滑动手势遍历子菜单项，而非左右滑动。

修正后的代码示例 #

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div>
    <ul role="menu">
      <li role="menuitem">
        <a href="#" aria-expanded="true" aria-haspopup="menu" aria-controls="sub-menu">Expand</a>
        <ul id="sub-menu" role="menu">
          <li role="menuitem">
            <a href="#">Sub Item 1</a>
          </li>
          <li role="menuitem">
            <a href="#">Sub Item 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

额外提醒：如果菜单是通过JavaScript控制展开/折叠的，记得同步更新aria-expanded的属性值（展开为true，收起为false），让VoiceOver能实时感知菜单状态。

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