辅助功能菜单 - 焦点上的打开菜单

Question

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

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

如果某些子元素被聚焦,我怎么能保持菜单打开.

当然我可以通过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>

Answer 1

就CSS当前的可能性而言，你不能，因为它已经在之前的很多问题中讨论过（例如，请参阅可访问的CSS下拉菜单）。

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

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

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

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

它总是难以使用、难以理解：如果我点击类别链接会怎样？是打开类别主页，还是打开子菜单？

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