不按 Tab 键顺序的下拉菜单项

Question

我正在做一个网页设计项目，但遇到了导航菜单的问题。我们的main site 是使用 WordPress 创建的，主菜单包含下拉菜单，可以使用 Tab 键导航。换句话说，下拉菜单会在顶层项目上打开时打开，并且可以使用 tab 键在该菜单中导航。为了确保一致且可访问的用户体验，我需要使用 HTML、CSS 和 Javacript 在外部平台（不是 WordPress）上重新创建它。

使用下面的代码，我创建了一个具有正确外观的下拉菜单。使用两个事件处理程序既可以容纳使用鼠标的人，也可以容纳使用键盘的人（我对屏幕阅读器如何处理这一点知之甚少）。不幸的是，我似乎无法浏览子菜单，只能浏览顶级项目（“关于”、“帐户”等），并且不完全确定原因。有人会认为只是添加 tabindex="0" 会将有问题的项目放入 Tab 键顺序中，但情况似乎并非如此。这似乎不是一个非常普遍的问题，因为我在搜索 Google 和 Stackoverflow 时只取得了有限的成功。有人对此问题有任何见解吗？

//For desktop menu
var customMenuHeaders = document.getElementsByClassName('TopMenuItem');
var customMenuItems = document.getElementsByClassName('NavMenuItem');

//Makes the desktop drop down menus visible upon focus
for (let i = 0; i < customMenuHeaders.length; i++){
     customMenuHeaders[i].addEventListener('focusin', function(event){
         for (let j = 0; j < customMenuItems.length; j++){
             customMenuItems[i].style.display = "block";
         }
     });
          customMenuHeaders[i].addEventListener('mouseover', function(event){
         for (let j = 0; j < customMenuItems.length; j++){
             customMenuItems[i].style.display = "block";
         }
     });
     customMenuHeaders[i].addEventListener('focusout', function(event){
         for (let k = 0; k < customMenuItems.length; k++){
             customMenuItems[i].style.display = "none";
         }
     });
     customMenuHeaders[i].addEventListener('mouseout', function(event){
         for (let k = 0; k < customMenuItems.length; k++){
             customMenuItems[i].style.display = "none";
         }
     });
}

.navigation {
font-family: montserrat;
font-weight: bold;
float: right;
font-size: 14px;
text-align: right;
width: 60%;
position: absolute;
left: 450px;
z-index: 100;
clear: left;
}
.TopMenuItem {
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
margin-left: 25px;
}
.TopMenuItem:hover {
text-decoration: underline;
}
.TopMenuItem a {
color: #000000;
}
.NavMenuItem {
display: none;
text-align: left;
border-top: 2px solid #FFD200;
background-color:#FFFFFF;
width: 250px;
padding-right: 50px;
padding-left: 50px;
padding-top: 20px;
padding-bottom: 20px;
overflow: visible;
position: absolute;
z-index: 500;
}
.NavMenuItem li {
list-style-type: none;
padding-top: 5px;
padding-bottom: 5px;;
}
.NavMenuItem li a {
color: #000000;
}

<nav class="navigation" aria-label="main_navigation" role="navigation">
<ul >
<li class="TopMenuItem"><a href="https://lucyscribnerlibrary.reclaim.hosting/home/about-the-library/">About</a>
<ul class="NavMenuItem">
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/about-the-library/">About the Library</a></li>
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/visiting-the-library/">Visiting the LIbrary</a></li> 
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/contact-us/">Contact Us</a></li>  
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/faculty-info/">Faculty Info</a></li> 
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/maps-and-spaces/">Maps and Spaces</a></li> 
</ul>
</li>
<li class="TopMenuItem"><a href="#">Accounts</a>
<ul class="NavMenuItem">
<li><a href="https://illiad.skidmore.edu/illiad/">Interlibrary Loan</a></li> 
<li><a href="http://lucy2.skidmore.edu/vwebv/myAccount?sk=en_US">Renewals</a></li>
<li><a href="https://refworks.proquest.com/">Refworks</a></li>  
<li><a href="https://outlook.com/skidmore.edu">Skidmore eMail</a></li> 
<li><a href="https://thespring.skidmore.edu/">The Spring</a></li> 
</ul>
</li>
<li class="TopMenuItem"><a href="#">Services</a>
<ul class="NavMenuItem">
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/borrowing-guidelines/">Borrowing</a></li> 
<li><a href="https://illiad.skidmore.edu/ares/">Course Reserves</a></li> 
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/ill-info/">Interlibrary Loan Info</a></li> 
<li><a href="https://libguides.skidmore.edu/libraryinstruction">Library Instruction</a></li> 
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/home/technology/">Technology</a></li> 
</ul>
</li>  
<li class="TopMenuItem"><a href="https://lucyscribnerlibrary.reclaim.hosting/home/resources/">Resources</a>
<ul class="NavMenuItem">
<li><a href="https://libguides.skidmore.edu/citingsources">Citing Sources</a></li>  
<li><a href="https://creativematter.skidmore.edu/">Creative Matter</a></li> 
<li><a href="https://digitalcoll.skidmore.edu/">Digital Collections</a></li> 
<li><a href="https://libguides.skidmore.edu/art/images">Images</a></li> 
<li><a href="https://libguides.skidmore.edu/film">Movies</a></li> 
<li><a href="https://libguides.skidmore.edu/music">Music</a></li> 
<li><a href="https://libguides.skidmore.edu/mcnaughton">Popular Reading</a></li> 
<li><a href="https://libguides.skidmore.edu/c.php?g=157773">Primary Sources</a></li> 
<li><a href="http://libguides.skidmore.edu/reference">Reference Sources</a></li> 
</ul>
</li> 
<li class="TopMenuItem"><a href="#">Under Our Roof</a>
<ul class="NavMenuItem">
<li><a href="http://libguides.skidmore.edu/c.php?g=858358">GIS Center</a></li> 
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/special-collections/Special Collections</li> 
<li><a href="https://help.skidmore.edu/">IT Help Desk</a></li> 
<li><a href="https://academics.skidmore.edu/blogs/leds/">LEDS</a></li>
<li><a href="https://www.skidmore.edu/mdocs/">MDOCS</a></li>  
<li><a href="https://www.skidmore.edu/it/mediaservices/index.php">Media Services</a></li> 
<li><a href="https://www.skidmore.edu/writingcenter/">Writing Center</a></li> 
</ul>
</li>
</ul>
</nav>

Answer 1

知道了！在阅读了 Scott Marcus 的评论后，我又看了看代码。问题是菜单项对计算机实际上是不可见的，因为默认显示设置为无。因此，即使 JavaScript 将显示更改为阻止，顶级 li 标记的子项仍然不可见，因此无法通过键盘访问。

有效的是改变我对菜单可见性状态的方法。在来自 WebAIM 的post 之后，我将下拉菜单绝对定位在屏幕之外，并在发生焦点或鼠标悬停事件时使用脚本将它们移动到位。从表面上看，效果是一样的，但由于内容始终技术上对计算机可见，因此无法通过菜单进行选项卡不再有任何问题。