Многоуровневое раскрывающееся меню, доступное с клавиатуры для соответствия требованиям WCAG - PullRequest
Новая
       52

Многоуровневое раскрывающееся меню, доступное с клавиатуры для соответствия требованиям WCAG

1 голос
/ 09 января 2020

Я пытаюсь создать выпадающее меню, по которому можно перемещаться с помощью клавиатуры. Я могу заставить работать первый уровень с помощью клавиши табуляции, но не смог получить доступ ко второму уровню. Пример можно найти здесь 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 Ответ

0 голосов
/ 09 января 2020

Есть несколько способов справиться с этим, но отличное место для начала - это W3 C статья о меню , поскольку она охватывает многие основы дизайна меню, подменю, ожидаемые элементы управления и т. Д. c.

В нем также есть несколько примеров того, как настроить JavaScript для ожидаемой функциональности, чтобы помочь вам.

Одна из ключевых частей перехватывает введите , чтобы открыть подуровни, либо непосредственно в пункте меню, либо в виде отдельной стрелки выпадающего меню рядом с пунктом главного меню.

Я лично предпочитаю, чтобы какие-либо элементы верхнего уровня не являлись ссылкой и вместо этого используется в качестве переключателей для открытия подменю, но это зависит от архитектуры вашего сайта.

Последнее, что вы хотите, - это сделать каждое подменю доступным с помощью просто вкладок. На этом этапе если кто-то хочет достичь «2020 Q4», ему нужно будет набрать последние 15 пунктов.

Вместо этого вам нужно, чтобы каждый «четвертак» открывался после нажатия либо , введите , либо стрелка вправо клавиша.

Чтобы добраться до "2020 Q4", достаточно 4 вкладок , , ввести (или , стрелка вправо ), 4 вкладок , поэтому нужно нажимать только 9 клавиш (вместо 15).

Последнее, что нужно учитывать, - это то, что ваше меню должно работать без JavaScript или предлагать альтернативу.

Я обычно имею элемент <noscript> со ссылкой на полное отображение HTML карты сайта, если у них не включен JavaScript, и у меня есть более сложное меню, такое как это.

...