1

我正在尝试创建一个可以使用键盘导航的下拉菜单。我可以使用 tab 键使第一级工作，但无法访问第二级。示例可以在这里找到https://codepen.io/jjfash/pen/oNgqEjx

的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>

CSS：

/* 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;
}

至少，我希望它可以使用键盘完全导航菜单，以符合 ADA 标准。我最好的情况是使用箭头键（不仅仅是 Tab 键）进行导航。我尝试将 tabindex="0" 添加到每个元素，希望这会起作用，但到目前为止还没有运气。任何帮助表示赞赏。

4

1 回答 1

0

有几种方法可以解决这个问题，但一个很好的起点是这篇关于菜单的 W3C 文章，因为它涵盖了菜单设计、子菜单、预期控件等的许多基础知识。

它还提供了一些示例，说明如何为预期功能设置 JavaScript，以便为您提供帮助。

关键部分之一是拦截enter打开子级别的键，可以直接在菜单项上，也可以作为主菜单项旁边的单独下拉箭头。

我个人更喜欢让任何顶级项目不是链接，而是用作打开子菜单的开关，但这取决于您的网站架构。

您想要做的最后一件事是使每个子菜单仅通过选项卡即可访问。那时，如果有人想要达到“2020 Q4”，他们将不得不选择过去 15 个项目。

相反，您想要的是在按下enter或right arrow键后打开每个“季度选择器”。

到达“2020 Q4”的方式只有 4 tabs，enter（或right arrow），4 ，tabs所以只有 9 次按键（而不是 15 次）。

最后要考虑的一件事是，您的菜单需要在没有 JavaScript 的情况下工作或提供替代方案。

<noscript>如果他们没有启用 JavaScript，我倾向于使用一个带有完整 HTML 站点地图链接的元素，并且我有一个更复杂的菜单，例如这个。

于 2020-01-09T16:45:29.600 回答