选项卡可访问菜单的菜单可见性和 MS Edge hack

Question

我有一个 css 导航菜单，它使用内部焦点允许在主导航中使用 tab 键以方便残障人士访问。 Edge 不支持 focus-within 或允许跳转到隐藏的项目。我希望在我们通过导航 link 选项卡时使用 jquery 来更改嵌套的 ul 可见性，我不知道如何在选项卡焦点移开时将 ul 更改回隐藏状态特别是 ul 的内容。因此，使用隐藏的 ul 切换到某些内容时，UL 变得可见，允许切换到它的内容。然后在 tab 浏览所有 UL 的内容后，tab 焦点从 ul 移到下一个 link 并且 UL 变回隐藏并重复导航内的所有 UL。我不太了解 jQuery 似乎是正确的方法，直到 edge 支持 focus-within。 fiddle 如下，感谢您在我继续尝试解决方案时提供的任何帮助。

TLDR；你知道 jquery 语法将 ul 更改为 visibilty:hidden 时有人 .focusout 单个 ul 的 .last 项目吗？我们不想在焦点离开 ul 时隐藏 ul，除非它是列表中的最后一项。

jQuery(document).ready(function(){
  jQuery('#main  a').focus(function(){
      jQuery(this).next("ul").css('visibility','visible')

  });

});

https://jsfiddle.net/joeyjosay/0jxqut74/7/

这是我找到的解决方案

jQuery(document).ready(function(){
  jQuery('#main  a').focus(function(){
      jQuery(this).next("ul").css('visibility','visible')

  });
  jQuery('li ul li:last-child').focusout(function(){
      jQuery(this).parent('ul').css('visibility','hidden')

  });
});

Answer 1

I hope to use jquery to change the nested ul visibility as we tab through the nav links

这不是使菜单易于访问的方法。问题来自这样一个事实，即如果您的菜单有 15 个下拉项目，用户将被迫在所有项目中切换以进入下一个 'top level' 菜单项目。

另外，人们如何在横向平板电脑上访问这些菜单项？因为你不能使用 :hover 我猜你不能访问你的子菜单。（现在很多平板电脑都是 1920*1080 或更高的，所以你不能在你的 CSS 中依赖 width CSS）。

尝试下面的 fiddle（我在您的示例中添加了一个加载更多菜单项）和 select 'main 2' - 总共需要 19 个制表位来说明挫败感自动下拉原因。

jQuery(document).ready(function(){
  jQuery('#main  a').focus(function(){
      jQuery(this).next("ul").css('visibility','visible')
  
  });
  
});

#main>ul li a{
  display:inline-block;  
  float:left;
}
#main li > ul {
  visibility: hidden;
  
}
#main li:hover > ul{
  visibility: visible;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main">
  <li>
    <a href="#">main 1</a>
      <ul>
        <li>
          <a href="#">sub 1</a>
            <ul>
              <li>
                <a href="#">dubsub1</a>
              </li>
              <li>
                <a href="#">dubsub2</a>
              </li>
              <li>
                <a href="#">dubsub3</a>
              </li>
              <li>
                <a href="#">dubsub4</a>
              </li>
              <li>
                <a href="#">dubsub5</a>
              </li>
              <li>
                <a href="#">dubsub6</a>
              </li>
              <li>
                <a href="#">dubsub7</a>
              </li>
              <li>
                <a href="#">dubsub8</a>
              </li>
              <li>
                <a href="#">dubsub9</a>
              </li>
              <li>
                <a href="#">dubsub10</a>
              </li>
              <li>
                <a href="#">dubsub11</a>
              </li>
              <li>
                <a href="#">dubsub12</a>
              </li>
              <li>
                <a href="#">dubsub13</a>
              </li>
               <li>
                <a href="#">dubsub14</a>
              </li>
              <li>
                <a href="#">dubsub15</a>
              </li>
            </ul>
          </li>
        <li>
          <a href="#">sub 2</a>
        </li>
      </ul>

  </li>
  <li>
    <a href="#">main 2</a>
      <ul>
        <li>
          <a href="#">sub 1.1</a>
          <ul>
              <li>
                <a href="#">dubsub2</a></li>
            </ul>
          
          </li>
        <li>
          <a href="#">sub 2.1</a>
        </li>
      </ul>
  </li>
  <li>
    <a href="#">main 3</a>
  </li>
</ul>

你应该怎么做？

相反，您应该在菜单中提供一个 可点击 项来为键盘用户显示下拉菜单。

有几种方法可以做到这一点。一种选择是让每个子菜单的顶级菜单项打开子菜单而不是转到主页。

如果由于站点架构而无法支持此功能，请在顶级菜单项旁边添加一个向下箭头，单击该箭头会打开下拉菜单。

A great example to get you started is available at W3C - 它显示了如何添加一个单独的可聚焦下拉箭头并为键盘用户切换子菜单，但还在 :hover 上显示下拉菜单，因此它提供鼠标用户和以前一样的体验。

我唯一要添加到示例中的是，如果可能的话，使下拉目标最小 44px x 44px，以便它也符合 minimum touch target sizes according to WCAG. - 尽管如果您没有为那就尽你所能吧！

无论您选择哪种方式，结果都不是 19 个制表位到达 'main 2'，而是只有 3 个制表位 -> 'main 1' -> 'main 1 drop down' -> 'main 2'.

最后一点，focus-within 很棒，但只有 84% browser coverage - see this answer I gave about focus-within 可以使用 + 运算符实现 CSS 中某些事情的另一种方法，这可能是对您很有用，因为它涵盖了关于如何使用 aria-expanded 以及如何在 CSS.

中使用它的类似理论

Answer 2

此代码能够识别每个列表中的最后一项，一旦它失去焦点，它的父 ul 的可见性就会被设置回隐藏。现在是一个很好的 hack，但像其他答案一样，不同的导航构建将是理想的。

jQuery(document).ready(function(){
  jQuery('#main  a').focus(function(){
      jQuery(this).next("ul").css('visibility','visible')

  });
  jQuery('li ul li:last-child').focusout(function(){
      jQuery(this).parent('ul').css('visibility','hidden')

  });
});

选项卡可访问菜单的菜单可见性和 MS Edge hack

Menu Visibility and MS Edge hack for tab accessable menu

jquery

accessibility

microsoft-edge

你应该怎么做？