让屏幕阅读器 (NDVA) 在登录后宣布菜单项

Question

我根据此示例创建了一个可访问的优先级菜单：https://www.codementor.io/@marys/flexbox-priority-navigation-1bussno6uj。

我还为三类用户添加了登录功能。导航组件发生变化，根据登录者显示菜单选项。告诉盲人或弱视用户菜单已更改的最佳方式是什么？我已经为导航组件实现了 aria-live 区域，但 NDVA 很快就公布了菜单文本，这没有什么好处。我可能走在正确的轨道上，但实施不正确。

成功登录后，用户将返回到显示菜单项的索引页面。由于这是重定向，NDVA 是否应该从顶部开始读取页面并包含菜单项？有时，NDVA 会公布反映的菜单项，有时则不会。这是可以接受的，还是可以改进的？怎么办？

要查看演示，请访问 https://rpcorr-mega-menus-v2.netlify.app/about.html

要登录，请使用“user1”、“user2”或“user3”。密码可以是任何值，因为目前尚未检查。

注销时的导航元素：

<nav id="menu" role="navigation">
<div class="menu-main-menu-container">
              <ul id="menu-main-menu" class="menu"><li><a href="login.html">Login</a></li><li id="menu-more" class="menu-item menu-item-has-children" style="display: none;"><a id="menuMoreLink" href="#" aria-label="More has a sub menu. Click enter to open"></a><ul id="moreSubMenu" class="sub-menu" aria-expanded="false"></ul></li></ul>
            </div>
</nav>

用户登录时的导航元素：

<nav id="menu" role="navigation">
            <div class="menu-main-menu-container">
              <ul id="menu-main-menu" class="menu"><li><a href="index.html" aria-current="page">Home </a></li><li><a href="about.html">About Us </a></li><li class="menu-item-has-children hover"><a href="#" aria-label="Blog has a sub menu. Click enter to open">Blog <i class="fa fa-angle-down"></i></a><ul class="sub-menu" aria-expanded="false"><li>
          <a href="singleLayout.html">Single Layout</a>
        </li></ul></li><li><a href="portfolio.html">Portfolio </a></li><li><a href="resources.html">Resources </a></li><li><a href="contact.html">Contact </a></li><li><a href="logout.html">Logout user3</a></li><li id="menu-more" class="menu-item menu-item-has-children" style="display: none;"><a id="menuMoreLink" href="#" aria-label="More has a sub menu. Click enter to open"></a><ul id="moreSubMenu" class="sub-menu" aria-expanded="false"></ul></li></ul>
            </div>
          </nav>

Answer 1

由于页面被重新加载（或重定向），正如提交表单所预期的那样，内容可能会发生变化。除了屏幕阅读器的功能外，不需要再做任何声明。

不过，您可以通过命名菜单来提供提示。这可能表明登录后菜单将会更改。

<nav id="menu" aria-label="Menu, you are not logged in">

---

请注意，

aria-expanded

属性必须出现在触发器（按钮或链接）上，而不是出现在展开的内容上：

<ul id="menu-main-menu" class="menu">
  <li><a href="login.html">Login</a></li>
  <li id="menu-more" class="menu-item menu-item-has-children">
    <a id="menuMoreLink" href="#"
       aria-label="More has a sub menu. Click enter to open"
       aria-expanded="false" aria-controls="moreSubMenu"></a>
    <ul id="moreSubMenu" class="sub-menu"></ul></li></ul>