Я надеюсь использовать jquery, чтобы изменить вложенную видимость ul при переходе по ссылкам навигации
Это не способ сделать меню доступным. Проблема заключается в том, что если бы в вашем меню было 15 выпадающих пунктов, пользователь был бы вынужден пролистать их все, чтобы перейти к следующему пункту меню «верхнего уровня».
Кроме того, как люди получают к ним доступ пункты меню на планшете в альбомной ориентации? Поскольку вы не можете использовать :hover, я думаю, вы не можете получить доступ к своим подменю. (в настоящее время многие планшеты имеют 1920 * 1080 или выше, поэтому вы не можете положиться на width CSS в своем CSS).
Попробуйте использовать приведенную ниже скрипку (где я добавил еще несколько пунктов меню в ваш пример) и выберите «основной 2» - для иллюстрации разочарования автоматом необходимо всего 19 остановок табуляции c причина .
jQuery(document).ready(function(){
jQuery('#main a').focus(function(){
jQuery(this).next("ul").css('visibility','visible')
});
});
#main>ul li a{
display:inline-block;
float:left;
}
#main li > ul {
visibility: hidden;
}
#main li:hover > ul{
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main">
<li>
<a href="#">main 1</a>
<ul>
<li>
<a href="#">sub 1</a>
<ul>
<li>
<a href="#">dubsub1</a>
</li>
<li>
<a href="#">dubsub2</a>
</li>
<li>
<a href="#">dubsub3</a>
</li>
<li>
<a href="#">dubsub4</a>
</li>
<li>
<a href="#">dubsub5</a>
</li>
<li>
<a href="#">dubsub6</a>
</li>
<li>
<a href="#">dubsub7</a>
</li>
<li>
<a href="#">dubsub8</a>
</li>
<li>
<a href="#">dubsub9</a>
</li>
<li>
<a href="#">dubsub10</a>
</li>
<li>
<a href="#">dubsub11</a>
</li>
<li>
<a href="#">dubsub12</a>
</li>
<li>
<a href="#">dubsub13</a>
</li>
<li>
<a href="#">dubsub14</a>
</li>
<li>
<a href="#">dubsub15</a>
</li>
</ul>
</li>
<li>
<a href="#">sub 2</a>
</li>
</ul>
</li>
<li>
<a href="#">main 2</a>
<ul>
<li>
<a href="#">sub 1.1</a>
<ul>
<li>
<a href="#">dubsub2</a></li>
</ul>
</li>
<li>
<a href="#">sub 2.1</a>
</li>
</ul>
</li>
<li>
<a href="#">main 3</a>
</li>
</ul>
Что делать вместо этого?
Вместо этого вы должны предоставить в меню пункт clickable , чтобы показать раскрывающийся список для пользователей клавиатуры.
Есть несколько способов сделать это. Один из вариантов - заставить пункт меню верхнего уровня для каждого подменю открывать подменю, а не переходить на главную страницу.
Если вы не можете это поддерживать из-за архитектуры сайта, добавьте стрелку вниз к пункту меню верхнего уровня, который при нажатии открывает раскрывающееся меню.
Отличный пример для начала работы доступен на W3 C - он показывает, как добавить отдельную стрелку выпадающего меню, которая фокусируется и переключает подменю для пользователей клавиатуры, но также показывает раскрывающееся меню на :hover, поэтому оно предоставляет пользователям мыши ту же функциональность, что и раньше.
Единственное, что я хотел бы добавить к примеру, это по возможности сделать раскрывающуюся цель 44px на 44px. минимум, чтобы он также соответствовал минимальным размерам сенсорных целей в соответствии с WCAG. - хотя это трудно, если вы не рассчитывали на это, просто делайте, что можете!
В зависимости от того, как вы В результате получается, что вместо 19 табуляций вы достигнете «основного 2», вместо этого у вас будет только 3 табуляции -> «основной 1» -> выпадающий «основной 1» -> «основной 2».
И наконец, focus-within - это замечательно, и у всех, но только у 84% охвата браузера - посмотрите ответ, который я дал о фокусировке в пределах , для другого способа достижения определенных вещей в CSS используя оператор +, который может быть полезен для вас, поскольку он охватывает аналогичные теории о том, как работать с aria-expanded и использовать его в CSS.