可通过键盘访问的多级下拉菜单，符合WCAG ada规范

问题描述 投票：0回答：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”添加到每个希望起作用的元素，但是到目前为止还没有运气。任何帮助表示赞赏。

accessibility dropdown multi-level ada-compliance
1个回答
0
投票

有几种处理方法，但是https://www.w3.org/WAI/tutorials/menus/flyout/#use-parent-as-toggle是一个不错的起点，因为它涵盖了菜单设计，子菜单，预期控件等的许多基础知识。>>

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

您想要做的最后一件事就是使每个子菜单都可以通过制表键访问。到那时，如果有人想达到“ 2020年第四季度”，他们将不得不选择过去15个项目。

您想要的是让每个“季度选择器”在按enter

或向右箭头键之后打开。

到达“ 2020年第四季度”的方式只有4个[[选项卡

，输入（或右箭头），4个[[选项卡，因此只有9个制表位停止（而不是15个制表位） ）。要考虑的最后一件事是您的菜单需要在没有JavaScript的情况下工作或提供替代方法。如果没有启用JavaScript，我倾向于做一个<noscript>元素，并带有指向完整HTML网站地图显示的链接。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.