Html iOS画外音未读取嵌套的<；ul>；要素_Html_Accessibility_Voiceover

Html iOS画外音未读取嵌套的<；ul>；要素

html

Html iOS画外音未读取嵌套的<；ul>；要素,html,accessibility,voiceover,Html,Accessibility,Voiceover,在启用VoiceOver的情况下阅读此内容时，仅读取初始列表元素，使用从左向右滑动手势时，不会导航到嵌套列表元素（位于第二个嵌套ul元素下方）你知道为什么会这样吗 <!DOCTYPE html> <html> <head </head> <div> <ul role="menu"> <li role="menuitem"> <a href="#" aria-exp

在启用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>


将链接设置为菜单项，而不是


在
上，添加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>





















注意：如果要允许用户使用箭头键浏览菜单，则只能使用菜单
/菜单项
。如果用户必须使用Tab键导航，则应使用菜单
/菜单项
。您只需在子菜单上展开aria
，以指示子菜单是否打开
如果menu
/menuitem
被正确使用（箭头键导航），那么你的子菜单也应该有aria hasppop=“true”
我认为你不应该在子菜单之前使用那些a
标签（它们不是真正的链接，它们实际上指向页面顶部，这并不正确），但是在li
标记中集成aria expanded=“true”
属性
要获得“类似链接”的外观，您仍然可以对那些li
元素应用另一种颜色、文本装饰和光标，但没有理由在那里使用a
标记（至少不从您发布的代码判断）



展开







扩展2