Question 197914 in Html Question posted in
Some basic documentation can be found here.

Html – Why isn't Windows Narrator informing me there is a sub-menu?

I have aria-haspopup="true" and aria-expanded="true" on an html menu with sub-menu items, but the Windows Narrator doesn’t mention that when the item gains keyboard focus?

Should it? If so, how can I fix it?

<!doctype html>
<html>
<body>
  <div>
    <nav aria-label="Menu">
      <ul role="menu" aria-haspopup="true" aria-expanded="true">
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Dashboard</div>
          </a>
        </li>
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Options</div>
            <div>
              <img src="_content/MyCompany.Blazor.Components/images/drop-down-icon.svg" alt="toggle"/>
            </div>
          </a>
          <ul role="menu" aria-expanded="true" aria-haspopup="true">
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 1</div>
              </a>
            </li>
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 2</div>
              </a>
            </li>
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 3</div>
              </a>
            </li>
          </ul>
        </li>
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Support</div>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    I don’t think there is a way to force screen readers (at least not Narrator or Voice Over) to announce something as a submenu. https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation doesn’t treat the submenus triggers in any special way apart from announcing if they are expanded or collapsed. I did notice that the native OS context menus on MacOS do include the word "submenu" in the announcement of submenu triggers: "<submenu tigger title>, submenu", but either I’m missing something, or this is not encoded in web accessibility standards. You could manually add the word "submenu" to all of your submenu triggers to help give context. Try navigating to the "Options" item with Narrator in this code example to hear how it announces it.

    .visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
    <nav aria-label="Menu">
  <ul role="menu">
    <li role="menuitem">Dashboard</li>
    <li role="none">
      <button role="menuitem" aria-expanded="true" aria-haspopup="true">
        Options
        <span class="visually-hidden">submenu</span>
      </button>
      <ul role="menu">
        <li role="menuitem">
          <div>Sub menu option 1</div>
        </li>
      </ul>
    </li>
    <li role="menuitem">
      <div>Support</div>
    </li>
  </ul>
</nav>
    Login or Signup to reply.
  2. 0

    SQLSTATE[23000]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]Cannot insert the value NULL into column ‘model_id’, table ‘CentroServicio.dbo.model_has_roles’; column does not allow nulls. INSERT fails.
    INSERT INTO
    [ model_has_roles ] ([ model_id ], [ model_type ], [ role_id ])
    VALUES
    (?, App Models USER, 1)
    como puedo solucionar este error

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search