只有使用键盘时，才能访问下拉菜单 [英] Making my drop-down menus accessible when only using the keyboard
问题描述
目前，我的下拉菜单只在用户翻转时才会显示。
At the moment my dropdown menus only appear when the user rolls over them.
我想这样，如果您按TAB键，同样的方式
I would like it so if you pressed the TAB key the drop down would appear in the same way
我的菜单基于以下方法：
My menu is based on the following tutroial:
我更新代码的唯一方法是CSS中的样式
The only thing I have updated code wise is the style in CSS
下面是我的菜单的一部分：
Below is a section of my menu:
HTML：
<ul id="menu">
<li><a href="about-us.php" class="drop">About us</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<ul class="simple">
<li><a href="why-choose-us.php">Why choose us</a></li>
<li><a href="our-office.php">Our office</a></li>
</ul>
</div>
</div>
</li>
<li><a href="how-we-help.php" class="drop">How we help</a>
<div class="dropdown_2columns align_left">
<div class="col_2">
<h3 class="link-menu-title"><a href="#">Technology</a></h3>
<ul>
<li><a href="dynamic-purchasing.php" style="width:270px;">Dynamic purchasing with Matrix</a></li>
<li><a href="process.php">Process</a></li>
<li><a href="interfacing.php">Interfacing</a></li>
<li><a href="implementation.php">Implementation</a></li>
</ul>
</div>
<div class="col_2">
<h3 class="link-menu-title"><a href="#">Professional Support Services</a></h3>
<ul>
<li><a href="discovery.php">Discovery</a></li>
<li><a href="account-management.php">Account management</a></li>
<li><a href="business-management.php" style="width:270px;">Business management</a></li>
<li><a href="supplier-management.php"> Supplier management</a></li>
</ul>
</div>
</div>
</li>
</ul>
和CSS
#menu li.menu-icon:hover {
background-color:#212121;
border:0px;
}
a#home span {
position: absolute;
top: -999em;
}
#menu {
list-style:none;
width:730px;
margin:0px auto 0px auto;
height:73px;
/* Background color and gradients */
/* Borders */
border: 0px solid #002232;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 0px 4px 0px;
margin-right:12px;
margin-top:25px;
border:none;
}
#menu li:hover {
border: 1px solid #11A7E6;
padding: 4px 0px 4px 0px;
/* Background color and gradients */
background: #11A7E6;
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color: #FFFFFF;
display:block;
outline:0;
text-decoration:none;
}
.medium #menu li a {
font-size:16px;
}
.large #menu li a {
font-size:20px;
}
.medium #menu li .drop, .large #menu li .drop {
padding-right: 0px;
}
#menu li:hover a {
color:#ffffff;
text-shadow: 1px 1px 1px #000000;
}
#menu li .drop {
padding-right:8px;
}
#menu li:hover .drop {
padding-right:3px;
padding-left:3px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border-top:10px solid #11A7E6;
/* Gradient background */
background:#2D2D2D;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #000000;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 3px 0;
padding-bottom:3px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 3px 0;
padding-bottom:3px;
border-bottom:1px solid #666666;
}
#menu p {
line-height:18px;
margin:0 0 30px 0;
}
#menu li:hover div a {
font-size:12px;
color:#0ea4e3;
padding-bottom:2px;
}
.medium #menu li:hover div a {
font-size:15px;
}
.large #menu li:hover div a {
font-size:19px;
}
#menu li:hover div h2.link-menu-title a{
font-size:14px;
font-weight:bold;
color:#FFF;
}
#menu li:hover div h3.link-menu-title a{
font-size:14px;
font-weight:bold;
color:#FFF;
}
.medium #menu li:hover div h3.link-menu-title a{
font-size:17px;
}
.large #menu li:hover div h3.link-menu-title a{
font-size:21px;
}
#menu li:hover div a:hover {
color:#fff;
background-color: #474747;
}
推荐答案
看看教程，这不是一个很好的起点，使完全键盘可访问。不幸的是，它不仅仅是显示下拉列表，当按下选项卡。
Looking at the tutorial, it is not really a good starting point to make fully keyboard accessible. Unfortunately it isn't just a matter of showing the drop-downs when pressing tab.
一旦你在每个下拉菜单中经过了几个项目，键盘用户不必在每个选项中打勾。
Once you get past a couple of items in each drop-down it it not a good thing for keyboard users to have to tab through every option.
有两种主要方式可以访问此类型的菜单：
There are two main ways to make this type of menu accessible:
-
传统方法：将每个顶级链接分别转到包含菜单中链接的着陆页，并隐藏键盘使用的下拉菜单。
Traditional method: Make each top level link go through to a landing page that includes the links from the menu, and hide the drop-downs from keyboard use.
HTML5（新）方法：使用WAI-ARIA标记和大量脚本启用完整的键盘辅助功能。
HTML5 (new) method: Use WAI-ARIA markup and lots of scripting to enable full keyboard accessibility.
传统的方法，如果相当容易做，你只需要正确隐藏屏幕菜单使用 display：none; 在开始 .dropdown_1column 的类。
The traditional method if fairly easy to do, you just need to properly hide the menus that are off-screen using display: none; on the classes starting .dropdown_1column. The means keyboard users won't tab through the sub-menus.
然后使用 display：block 显示在CSS开始的悬停（不焦点）子菜单：
And then use display: block to show the sub-menus on hover (not focus), where the CSS starts:
#menu li:hover .dropdown_1column
要实现HTML5 /新方法，我将开始使用Adobe的开源无障碍Mega菜单。从头开始，这将是一个巨大的工作量，除非你知道如何测试与广泛的用户代理，它不太可能工作，以及Adobe的。
To achieve the HTML5/new method I would start with Adobe's open-sourced "Accessible Mega Menu". It would be a huge amount of work to do this from scratch, and unless you know how to test with a wide range of user-agents, it is unlikely to work as well as Adobe's.
这篇关于只有使用键盘时，才能访问下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
