Я не могу говорить с WordPress, но могу прокомментировать HTML, что должен быть сгенерирован, но кое-что из того, что генерируется, зависит от поведения, которое вы хотите.
Хотите ли выпользователь может открыть меню и стрелку вверх / вниз по списку, или вы хотите, чтобы они вкладка по списку?
Первый требует, чтобы вы сами управляли фокусом (обработчик клавиатуры дляклавиши со стрелками и поддержание атрибута tabindex), в то время как последний намного проще - браузер может обрабатывать вкладки по ссылкам в меню.
Обычно, если ваше меню предназначено для навигации, тогда последнее желательно.
Для первого (навигация по клавишам со стрелками) роли меню ( menu , menuitem ) и атрибуты ( aria-haspopup ) должны бытьиспользуемый.Когда программа чтения с экрана видит эти свойства, она предлагает пользователю использовать клавиши со стрелками для навигации.Если у вас есть пункт меню с подменю, то в этом пункте меню должен быть указан aria-haspopup.
Для последнего ( tab клавиша навигации) не используйте ни одну из вышеупомянутых ролей меню,Скорее, ваше меню должно быть просто списком (<ul>) ссылок (список обычно имеет list-style:none).Если любой из ваших элементов списка имеет подменю, он должен содержать подсписок (вложенный <ul>), а элемент списка должен иметь атрибут aria-extended .
Относительно шеврона дляподменю, является ли шеврон отдельным табулятором?
Обновление , чтобы ответить на дополнительный вопрос, заданный @LCW в первом комментарии этого ответа.
aria-expanded идет на элемент, который вы выбираете для отображения подменю,так что в вашем случае это был бы сам шеврон, по крайней мере из того, что я понимаю о вашем описании.Похоже, если вы выберете ссылку, она перейдет на другую страницу, но если вы выберете шеврон, откроется подменю под этим элементом?Если это так, то ваш код будет выглядеть примерно так:
<nav>
<ul>
<li>
<a>menu item 1</a>
</li>
<li>
<a>menu item 2</a>
<button aria-expanded="false">chevron</button>
<ul style="display: none">
<li>
<a>submenu item 1</a>
</li>
<li>
<a>submenu item 2</a>
</li>
</ul>
</li>
<li>
<a>menu item 3</a>
</li>
</ul>
</nav>
Кнопка шеврона изначально имеет aria-expanded="false", и когда вы ее выбрали, вы должны переключить значение на «true» и показать подменю.Подобный пример вы можете увидеть на странице покупок Abercrombie & Fitch: https://www.abercrombie.com/shop/us. Однако A & F скрывает шеврон, пока вы не TAB к нему.Пользователи мыши никогда его не увидят, потому что подменю открывается при наведении мыши.У них на шевроне также установлено aria-expanded.