汉堡菜单的可访问性？

Question

我目前正在努力使响应式网站易于访问，我想知道在智能手机上打开该页面的盲人是否能够以某种方式打开隐藏菜单，或者 he/she "sees" 无论如何 - 通过屏幕阅读 reader?

我的 "Hamburger menu" 有这样的结构：

<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);
});

所有这一切都按预期工作，但我想知道激活屏幕 reader 的移动设备如何将其呈现给用户并让 him/her 控制它：

he/she 可以 "click" .menu-icon div 以某种方式得到吗访问菜单？

如果没有，以下CSS（在之后媒体手机查询）使菜单 "visible" 显示在屏幕上 reader 与桌面屏幕上的方式相同吗？:

-

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

我知道有些人会说 "just try it"，但如果您不习惯定期处理屏幕reader，尤其是在移动设备上（加上每个屏幕reader 行为有点不同......）。浏览器工具（在桌面上）中的移动模拟模式在这里没有帮助...

Answer 1

一个解决方案是在触发打开的元素（通常是 a 标签）中包含一个视觉上隐藏的文本，如 'open menu'，并将属性 role="button" 添加到触发器。此外，a 标签 href 将成为导航 ID 的锚点。

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

那么您需要对 show/hide 桌面或移动部分进行媒体查询。

Answer 2

我还会为您的菜单按钮添加一个 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 3

您可以在 div 和 tabindex 上添加 button 角色，但最好使用 <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.

的辅助技术的可见性

汉堡菜单的可访问性？

Accessibility of Hamburger Menu?

css

mobile

accessibility

screen-readers

responsive-design