Многоуровневое раскрывающееся меню, доступное с клавиатуры для соответствия требованиям WCAG ada
Я пытаюсь создать раскрывающееся меню, по которому можно перемещаться с помощью клавиатуры. Я могу заставить работать первый уровень, используя клавишу табуляции, но не могу получить доступ ко второму уровню. Пример можно найти здесь 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. В моем лучшем случае для навигации использовались бы клавиши со стрелками (а не только клавиша табуляции). Я попытался добавить tabindex="0" к каждому элементу, надеясь, что это сработает, но пока безуспешно. Любая помощь приветствуется.
1 ответ
Есть несколько способов справиться с этим, но отличное место для начала - это статья W3C о меню, так как она охватывает многие основы дизайна меню, подменю, ожидаемых элементов управления и т. Д.
В нем также есть несколько примеров того, как настроить JavaScript для ожидаемой функциональности, чтобы это вам помогло.
Одна из ключевых частей - это перехват enter клавиши для открытия подуровней либо непосредственно в пункте меню, либо в виде отдельной стрелки раскрывающегося списка рядом с пунктом главного меню.
Я лично предпочитаю, чтобы какие-либо элементы верхнего уровня не были ссылкой, а вместо этого использовались в качестве переключателей для открытия подменю, но это зависит от архитектуры вашего сайта.
Последнее, что вам нужно, - это сделать каждое подменю доступным с помощью табуляции. На этом этапе, если кто-то хочет достичь "четвертого квартала 2020 года", ему придется перейти на более 15 пунктов.
Вместо этого вы хотите, чтобы каждое "средство выбора четверти" открывалось после нажатия клавиши enter или right arrow.
Таким образом, чтобы добраться до "четвертого квартала 2020 года", нужно всего 4 tabs, enter(или right arrow), 4, tabs поэтому нажатие клавиш будет только 9 (вместо 15).
И последнее, что следует учитывать, это то, что ваше меню должно работать без JavaScript или предлагать альтернативу.
Что я обычно делаю, так это <noscript> элемент со ссылкой на полную карту сайта HTML показывает, если у них не включен JavaScript, и у меня есть более сложное меню, такое как это.