辅助功能菜单 - 打开焦点菜单答案

【问题标题】：accessibility menu - open menu on focus辅助功能菜单 - 打开焦点菜单
【发布时间】：2015-10-27 16:39:27
【问题描述】：

在我的网站中，我有菜单和子菜单

当我通过选项卡聚焦到菜单时，我的问题是，菜单打开就像我用鼠标悬停菜单一样。但是当我继续使用选项卡的子菜单元素时，菜单关闭了。

如果某些子元素被聚焦，我如何保持菜单打开。

当然我可以通过 javascript 来做，但我想知道我是否只能用 css 来做。

这里是示例（尝试使用 'tab' 转到链接）

li.main{
  
  float:left;
  width:200px;
}
li .sub{
  display:none;
  }
li:hover .sub{
  display:block
    }

li.main:focus .sub{
   display:block
    }

<ul>
    <li class="main"  tabindex="0">
    First menu
    <div class='sub'>
      <ul>
        <li><a href="#">First Link</a> </li>
         <li><a href="#">Second Link</a> </li>
        </ul>
      </div>
    </li> <li class="main"  tabindex="0">
    Second menu
    <div class='sub'>
      <ul>
       <li><a href="#">Third Link</a> </li>
         <li><a href="#">Forth Link</a> </li>
        </ul>
      </div>
    </li>
   </ul>

【问题讨论】：

您正在寻找的是父选择器，不幸的是，它们还不存在，因此，目前，您需要使用 JavaScript。

标签： css accessibility

【解决方案1】：

以 CSS 的当前可能性，你不能，因为之前在很多问题中讨论过它（例如，参见 accessible css dropdown menu）。

首先，您不能在这种方法中使用“display:none”，因为无法使用下一个链接快捷方式（大多数浏览器实现中的 Tab 键）访问该链接。

行之有效的解决方案将意味着诸如在屏幕外定位之类的解决方案。它将屏幕上的视图限制为当前链接，因为 CSS 中没有 parent() 选择器，或者您可能会使用上述线程中的技巧（这将在某些浏览器中工作并限制下拉部分的宽度）。

但无论解决方案如何，都不能解决主要问题：下拉菜单不是实现可访问性的最佳方式。

例如，使用眼动追踪软件的残疾人永远不会受益于下拉菜单。人们也不会使用平板电脑。

总是有些难用，难懂：如果我点击分类链接怎么办？是打开分类主页，还是打开子菜单？

如果您真的想要一个可访问的菜单，请不要使用下拉菜单

【讨论】：