Question

在启用VoiceOver的情况下阅读此内容只会读取初始列表元素，并且在使用向左滑动手势滑动时不会导航到嵌套列表元素（位于第二个嵌套ul元素下方）。

关于为什么会发生这种情况的任何想法？

<!DOCTYPE html>
<html>
  <head
  </head>
  <div>
    <ul role="menu">
      <li role="menuitem">
        <a href="#" aria-expanded="true">Expand</a>
        <ul role="menu">
          <li role="menuitem">
            <a href="#"  role="button">
              Link One
            </a>
          </li>
          <li role="menuitem">
            <a href="#" role="button">
              Link Two
            </a>
          </li>
        </ul>
      </li>
      <li role="menuitem">
        <a href="#"aria-expanded="true">Expand 2</a>
        <ul role="menu">
          <li role="menuitem">
            <a href="#" role="button">
              Link Three
            </a>
          </li>
          <li role="menuitem">
            <a href="#" role="button">
              Link Four
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</html>

Answer 1

将链接设为menuitem而不是<li> 在<li>上，添加role=presentation。

<div>
  <ul role="menu">
    <li role="presentation">
      <a href="#" aria-expanded="true" role="menuitem">Expand</a>
      <ul role="menu">
        <li role="presentation">
          <a href="#" role="menuitem">
            Link One
          </a>
        </li>
        <li role="presentation">
          <a href="#" role="menuitem">
            Link Two
          </a>
        </li>
      </ul>
    </li>
    <li role="presentation">
      <a href="#" aria-expanded="true" role="menuitem">Expand 2</a>
      <ul role="menu">
        <li role="presentation">
          <a href="#" role="menuitem">
            Link Three
          </a>
        </li>
        <li role="presentation">
          <a href="#" role="menuitem">
            Link Four
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

注意：如果您要允许用户使用箭头键在桌面上导航（在桌面上，则应该使用menu / menuitem显然，不是移动）。如果用户必须使用Tab键进行导航，则menu / menuitem应不。您只需在子菜单上aria-expanded指示子菜单是否已打开。

如果正在使用menu / menuitem（箭头键导航），那么您的子菜单也应该aria-haspopup="true"。

Answer 2

我认为你不应该在子菜单之前使用那些a标签（它们不是真正的链接，它们实际上通向页面的顶部，这不是真的正确），但是要集成{{ 1}} aria-expanded="true"标记中的属性，

要获得“类似链接”的外观，您仍然可以将另一种颜色，文本修饰和光标应用于那些li元素，但没有理由在那里使用li标记（在至少不能从您发布的代码判断）

iOS VoiceOver无法读出嵌套的<ul>元素

2 个答案: