可通过键盘访问的多级下拉菜单，符合WCAG ada标准 [英] Multi-level dropdown menu that is keyboard accessible for WCAG ada compliance
问题描述
我正在尝试创建一个可以使用键盘进行导航的下拉菜单.我可以使用Tab键使第一级工作，但无法访问第二级.可以在此处找到示例 https://codepen.io/jjfash/pen/oNgqEjx
html:
< html lang ="zh-CN">< head>< meta charset ="utf-8">< meta http-equiv ="x-ua-compatible" content ="ie = edge">< meta name ="viewport" content ="width = device-width，initial-scale = 1，rinkle-to-fit = no">< link rel ="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">< link href ="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel ="stylesheet"/>< script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>< script src ="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"</script></head><身体>< div class ="featuredTopics">< a class ="btn btn-semiTransparent dropdown-toggle" id ="dropdownMenu1" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" tabindex ="0">新闻档案库</a>< ul class ="dropdown-menu" role ="menu" aria-labelledby ="dropdownMenu">< li class ="dropdown-submenu pull-right dropdown-item">< a tabindex ="0" href =#"&2017;</a>< div class ="dropdown-menu">< ul>< li class ="dropdown-item">< a tabindex ="0" href =#"&Q; Q1</a></li>< li class ="dropdown-item">< a tabindex ="0" href =#"&Q; Q2</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q3</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q4</a></li></ul></div></li>< li class ="dropdown-submenu pull-right dropdown-item">< a tabindex ="0" href =#"&2018;</a>< div class ="dropdown-menu">< ul>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q1</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q2</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q3</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q4</a></li></ul></div></li>< li class ="dropdown-submenu pull-right dropdown-item">< a tabindex ="0" href =#"&2019;</a>< div class ="dropdown-menu">< ul>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q1</a></li>< li class ="dropdown-item">< a tabindex ="0" href =#"&Q; Q2</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q3</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q4</a></li></ul></div></li>< li class ="dropdown-submenu pull-right dropdown-item">< a tabindex ="0" href =#"&2020;</a>< div class ="dropdown-menu">< ul>< li class ="dropdown-item">< a tabindex ="0" href =#"&Q; Q1</a></li>< li class ="dropdown-item">< a tabindex ="0" href =#"&Q; Q2</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q3</a></li>< li class ="dropdown-item">< tabindex ="0" href =#"&Q; Q4</a></li></ul></div></li></ul></div></body></html> CSS:
/*按钮*/.btn {边框:无；内边距:12px;颜色:#fff;border-radius:0;box-shadow:0px 2px 5px rgba(0,0,0,0.2);}.btn:悬停，.btn:焦点，.btn:active {文字装饰:下划线；颜色:#fff;}.btn:focus {box-shadow:0px 2px 5px rgba(0,0,0,0.2);}.btn-semiTransparent:悬停，.btn-semiTransparent:焦点，.btn-semiTransparent:active {背景:rgba(0,0,0，.1);颜色:#1f2a44;}.btn-semiTransparent:not(:disabled):not(.disabled):active {box-shadow:嵌入0px 0px 5px#666 #import！/*使其看起来像您已按下按钮*/}/* 下拉式菜单 */.dropdown-item {保证金:0;填充:0;text-align:left;}.dropdown-submenu .dropdown-menu {左:100％;上:-3px;border-radius:0;}.dropdown-submenu {职位:相对}.dropdown-submenu:hover&.; dropdown-menu {显示:块；}.dropdown-submenu:hover&a; after {border-left-color:#fff;}.dropdown-submenu.pull-left {浮动:无；}.dropdown-submenu.pull-left> .dropdown-menu {正确:100％；}.dropdown-item:焦点，.dropdown-item:悬停，.dropdown-item:active {背景:#e6e6e6;}.dropdown-toggle {线高:120％;/*使按钮的高度类似于常规按钮.将插入符号作为:: after使其变得更高*/}.dropdown-toggle :: after {font-family:"FontAwesome"；/*对启用脱字符号至关重要*/内容:"\ f054"！重要；颜色:#a84300;边框:无！重要；最小宽度:16像素；位置:相对；top:4px;}.dropdown-toggle [aria-expanded ="true"] :: after {内容:"\ f078"！重要；颜色:初始；}li.dropdown-submenu> a:之后{font-family:"FontAwesome"；/*对启用脱字符号至关重要*/内容:"\ f054";颜色:#a84300;位置:相对；左:8px;显示:行内块；宽度:15px;}li.dropdown-submenu:hover>一种 {文字修饰:无；}li.dropdown-submenu:hover>a:{之后内容:"\ f078"！重要；颜色:初始；}.dropdownPadding {填充:0px 150px 50px;背景:透明；边框:无；正确:calc(100％-150px)！important;}.dropdownPadding ul {border:1px实心#ccc;保证金:0;padding:10px 0;背景:#fff;} 至少，我希望这样做，以便使用ADA兼容键盘可以完全导航菜单.我最好的情况是使用箭头键(而不仅仅是Tab键)进行导航.我尝试将tabindex ="0"添加到每个希望的元素，但到目前为止还没有运气.任何帮助表示赞赏.
有几种方法可以解决此问题，但是一个很好的起点是> 您想要的是在按 enter 或向右箭头键之后打开每个季度选择器". 到达"2020年第四季度"的方式只有4个选项卡，输入(或向右箭头)，4个选项卡，因此只需9次按键(而不是15次). 要考虑的最后一件事是您的菜单需要在没有JavaScript的情况下工作或提供替代方法. 我倾向于做的是有一个 I'm trying to create a dropdown menu that can be navigated by using the keyboard. I can get the first level to work by using the tab key, but have been unable to access the second level. Example can be found here https://codepen.io/jjfash/pen/oNgqEjx The html: The CSS: At minimum, I'd like it so the menu is fully navigable using the keyboard for ADA compliance. My best case scenario would be working using arrow keys (not just the tab key) to navigate. I tried adding tabindex="0" to each element hoping that would work, but no luck so far. Any help is appreciated. There are a few ways to handle this but a great place to start is this W3C article about Menus as this covers a lot of the basics of menu design, sub menus, expected controls etc. It also has some examples of how to set up the JavaScript for the expected functionality so that will help you. One of the key parts is intercepting the enter key to open sub-levels, either directly on the menu item or as a separate drop down arrow next to the main menu item. I personally prefer having any top level items not being a link and instead being used as toggles to open sub menus but it depends on your site architecture. The last thing you want is to make each sub-menu accessible via just tabbing. At that point if someone wants to reach "2020 Q4" they would have to tab past 15 items. What you want instead is for each 'quarter picker' to open after pressing either enter or the right arrow key. That way to get to "2020 Q4" is just 4 tabs, enter (or right arrow), 4 tabs so only 9 key presses (instead of 15). One last thing to consider is that your menu needs to work without JavaScript or offer an alternative. What I tend to do is have a 这篇关于可通过键盘访问的多级下拉菜单，符合WCAG ada标准的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< noscript> 元素，如果没有启用JavaScript并且我有一个更复杂的菜单，则带有指向完整HTML网站地图的链接. <html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="featuredTopics">
<a class="btn btn-semiTransparent dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0">News Archive</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2017</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2018</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2019</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2020</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
/* Buttons */
.btn {
border:none;
padding:12px;
color:#fff;
border-radius:0;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}
.btn:hover,
.btn:focus,
.btn:active {
text-decoration:underline;
color:#fff;
}
.btn:focus {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}
.btn-semiTransparent:hover,
.btn-semiTransparent:focus,
.btn-semiTransparent:active {
background:rgba(0,0,0,.1);
color:#1f2a44;
}
.btn-semiTransparent:not(:disabled):not(.disabled):active {
box-shadow: inset 0px 0px 5px #666 !important; /* makes it look like you've pressed the button */
}
/* Dropdown Menu */
.dropdown-item {
margin:0;
padding:0;
text-align:left;
}
.dropdown-submenu .dropdown-menu {
left:100%;
top:-3px;
border-radius:0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
right:100%;
}
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:active {
background:#e6e6e6;
}
.dropdown-toggle {
line-height:120%; /* makes the height of the button similar to the regular buttons. having the caret as an ::after is making it taller */
}
.dropdown-toggle::after {
font-family: 'FontAwesome';/* essential to enable caret symbol*/
content:"\f054" !important;
color:#a84300;
border:none !important;
min-width:16px;
position:relative;
top:4px;
}
.dropdown-toggle[aria-expanded="true"]::after{
content:"\f078" !important;
color:initial;
}
li.dropdown-submenu>a:after {
font-family: 'FontAwesome';/* essential to enable caret symbol*/
content:"\f054";
color:#a84300;
position:relative;
left:8px;
display:inline-block;
width:15px;
}
li.dropdown-submenu:hover > a {
text-decoration:none;
}
li.dropdown-submenu:hover > a:after {
content:"\f078" !important;
color:initial;
}
.dropdownPadding {
padding:0px 150px 50px;
background:transparent;
border:none;
right:calc(100% - 150px) !important;
}
.dropdownPadding ul {
border:1px solid #ccc;
margin:0;
padding:10px 0;
background:#fff;
}
<noscript> element with a link to the complete HTML sitemap show if they don't have JavaScript enabled and I have a more complex menu such as this.
