汉堡菜单的可访问性？

Question

我目前正在努力使响应式网站易于访问，我想知道在智能手机上打开页面的盲人是否能够以某种方式打开隐藏菜单，或者他/她是否“看到”它 - 阅读屏幕阅读器？

我的“汉堡菜单”结构如下：

<div class="menu-icon">Click here to open or close the menu</div>
<nav id="navigation" role="navigation" tabindex="0" >
    <ul>
       <li><a href="...">...</a></li>
       <li><a href="...">...</a></li>
       <li><a href="...">...</a></li>
       <li><a href="...">...</a></li>
       <li><a href="...">...</a></li>
    </ul>
</nav>

相关CSS如下（先是通用规则，后是移动端的媒体查询）：

.menu-icon {
  display: none;
}
nav {
  display: block;
}
@media only screen and (max-width: 850px) {
  .menu-icon {
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    background-image: url(images/menu-icon.png);
    background-size: 100% auto;
    background-position: 0px 0px;
    text-indent: -5000px;
  }   
  nav {
    display: none;
  }
}

这里是相关的 jQuery：

jQuery('.menu-icon').on('click', function () {
  jQuery('nav').slideToggle(300);
});

所有这些都按预期工作，但我想知道带有激活屏幕阅读器的移动设备如何将其呈现给用户并让他/她控制它：

• 他/她能否以某种方式“点击”.menu-icon div 访问菜单？

  如果不是，下面的 CSS（在媒体之后 after 移动查询）使菜单对屏幕阅读器“可见” 和在桌面屏幕上一样吗？：

-

@media speech {
  .menu-icon {
    display: none;
  }
  nav {
    display: block !important;
  }
}

我知道有些人会说“试试看”，但如果您不习惯经常使用屏幕阅读器，尤其是在移动设备上（而且每个屏幕阅读器的行为都有些不同......），这真的很难测试。浏览器工具（在桌面上）中的移动模拟模式在这里没有帮助......

Answer 1

我还会在您的菜单按钮上添加一个aria-expanded 标签。在传统的屏幕阅读器中，此信息会传递给用户，让他/她知道菜单的当前状态：展开或折叠。此外，如果您坚持使用<div>，请确保设置其role、type 和tabindex。

<div class="menu-icon" role="button" type="button" tabindex="0" aria-expanded="false">Click here to open or close the menu</div>
<nav id="navigation" role="navigation" tabindex="0" >
    ...
</nav>

然后您可以通过稍微修改现有的 jQuery 代码来更改 aria-expanded 的值：

jQuery('.menu-icon').on('click', function () {
    jQuery('nav').slideToggle(300)
    jQuery(this).attr('aria-expanded', function(i, attr) {
        // Returning whether the attribute is equal to false is the same as inverting it
        return attr === 'false'
    })
})

Answer 2

您可以在您的 div 中添加 button 角色和 tabindex，但最好使用 <button> 标签。

您还必须从nav 中删除tabindex，并避免提供多余的role="navigation"

<button class="menu-icon">Click here to open or close the menu</button>
<nav id="navigation">
    <?php
        $arguments = array(
            'theme-location' => 'main menu',
            'container' => ''
        );
        wp_nav_menu($arguments);
    ?>
</nav>

@media speech 没用。没有实际的屏幕阅读器使用它。

另外，请记住，您应该在 nav 上设置 aria-hidden 属性，具体取决于它是否对可能直接访问 dom 的辅助技术的可见性。

Answer 3

一种解决方案是在触发打开的元素（通常是a 标签）中包含一个视觉隐藏文本，如“打开菜单”，并将属性role="button" 添加到触发器中。 a 标签 href 也将成为导航 id 的锚点。

<a href="#nav" role="button" class="js_open_trigger">open menu</a>
<nav id="nav">......</nav>

然后您需要媒体查询来显示/隐藏桌面或移动部分。