Question

我目前正致力于提供一个可访问的响应式网站，我想知道在智能手机上打开页面的盲人是否能够以某种方式打开隐藏的菜单，或者他/她是否会看到＆＃34;无论如何 - 通过屏幕阅读器阅读？

我的＆＃34;汉堡菜单＆＃34;有这样的结构：

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

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

他/她是否能够点击＆＃34; .menu-icon div某种方式访问菜单？

如果没有，将使用以下CSS（在媒体之后）查询移动设备）使菜单“＃34;可见＆＃34;到屏幕阅读器与桌面屏幕上的方式相同？：

-

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

我知道有些人会说＆＃34;只是尝试一下＆＃34;，但是如果你不习惯定期处理屏幕阅读器，特别是在移动设备上（以及每个屏幕阅读器）都很难测试行为有点不同......）。浏览器工具中的移动模拟模式（在桌面上）在这里没有帮助......

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>代码。

您还必须从tabindex中删除nav，并避免提供多余的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没用。没有实际的屏幕阅读器使用它。

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

Answer 3

解决方案是包含一个视觉上隐藏的文字，例如打开菜单＆＃39;在元素中触发打开（通常是a标记），并将属性role="button"添加到触发器。此外，a标记href将成为导航ID的锚点。

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

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

汉堡菜单的可访问性？

3 个答案: