Доступность меню Zurb Foundation - кнопка переключения подменю
Я работаю над проектом, для которого требуется доступность. Я пытаюсь протестировать многоуровневые и гибкие горизонтальные меню, как показано ниже:
https://foundation.zurb.com/building-blocks/blocks/foundation-5-top-bar.html
Функциональность кажется хорошей для доступности, за исключением одной проблемы. Единственный способ открыть подменю с помощью клавиатуры - нажать клавишу Enter на ссылке, что предотвращает функцию открытия страницы по умолчанию. Вместо этого мне нужно использовать кнопку-переключатель рядом со ссылкой, чтобы открыть подменю (аналогично функции кнопки меню гамбургера).
Можно ли настроить Foundation для включения переключателя для каждого подменю? Например, если бы я мог удалить функцию переключения из ссылки и применить ее к кнопке?
Ответы 3
В меню «один» в примере один / два / три отсутствует атрибут aria-expanded, который должен переключаться между истинным / ложным в зависимости от того, отображается ли подменю. То же самое с подменю под «тройкой».
Я смог развернуть меню «один» с помощью клавиши со стрелкой вниз.
Это правда, вы можете использовать клавиши со стрелками для перехода по всем подменю. Но проблема в том, что функция, открывающая подменю, отключает ссылку, поэтому страница не может быть доступна, нажав Enter на ссылке. (Попробуйте заполнить меню ссылками и переходить по ним)
На данный момент это мое решение: меню аккордеона: https://foundation.zurb.com/sites/docs/accordion-menu.html#submenu-toggle
Меню аккордеона добавляет кнопку переключения, но не закрывает меню размытия / фокусировки. У него также нет поддержки наведения, но я могу добавить это в CSS: li.is-accordion-submenu-parent: hover> ul {display: block! important}
Мне также придется снова сделать его похожим на горизонтальное меню, пока я воспользуюсь этим как обходной путь. Это позволяет использовать клавиатуру, щелчок и сенсорный доступ.
На случай, если кому-то еще интересно. Мне нравилось настраивать основу «вне холста» и добавлять аккордеонное меню с включенным переключателем подменю. Лучшее мобильное меню UX, которое я могу получить от Foundation 6.4xx imo. Вы можете перейти к каждой ссылке или открытому подменю с помощью табуляции, а также использовать стрелки для их перехода.
https://foundation.zurb.com/sites/docs/off-canvas.htmlhttps://foundation.zurb.com/sites/docs/accordion-menu.html#submenu-toggle
и для wordpress этот ходунок отлично работал https://foundation.zurb.com/forum/posts/48646-foundation-6-responsive-navigation-menu-for-wordpress