0

Reading this with VoiceOver enabled only reads the initial list elements, and does not navigate to the the nested list elements (underneath the second nested ul elements) when using the swipe left-to-right gesture.

ANy ideas as to why this happens?

<!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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
horselord1897
  • 1
  • 1

2 Answers2

0

Make your links the menuitem instead of the <li>.
On the <li>'s, add 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>

Note: You should only be using menu/menuitem if you are going to allow the user to navigate through your menu using the arrow keys (on a desktop, obviously, not mobile). If the user has to use the Tab key to navigate, then menu/menuitem should not be used. You would just have aria-expanded on your submenus to indicate whether the submenu was open or not.

If menu/menuitem are being used appropriatly (arrow key navigation), then your submenus should also have aria-haspopup="true".

slugolicious
  • 15,824
  • 2
  • 29
  • 43
0

I think you shouldn't use those a tags before the submenus (which are not real links, they actually lead to the top of the page, which isn't really correct), but integrate the aria-expanded="true" attribute in the li tags,

To get a "link-like" appearance, you could still apply anotherr color, text-decoration and cursor to those li elements, but there's no reason to use an a tag there (at least not judging from the code you posted)

<div>
  <ul role="menu">
    <li role="menuitem" aria-expanded="true">Expand
      <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" aria-expanded="true">Expand 2
      <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>
Johannes
  • 64,305
  • 18
  • 73
  • 130