Доступность выпадающего подменю. Как прятать этот popup?
Добрый день!
Недавно задался вопросом, насколько верный подход, прятать выпадающее меню, с помощью display: none или visibility: hidden? Какое из этих свойств предпочтительней в работе? Например для других скрытых элементов? display: none полностью удаляется из разметки, visibility: hidden остаётся в потоке, но так же не доступен.
Получается, что оба эти способа, не доступны для скринридеров и поисковиков?
Есть ёщё .visually-hidden, по большому счёту, решает эту проблему. Но я не уверен, нет ли здесь каких-то нюансов.
Как вы решаете эту задачу? Когда внутри скрытого блока, есть информация, которая должна быть доступной. Как вы прячете подменю?
Т.е. с помощью aria атрибутов? С помощью aria-expanded? Не очень понял, в описании, спрятанный таким образом список ссылок, доступен скринридерам или этот функционал должен быть реализован специальным образом? Статья полезная, там описывается классные штуки для управления с клавиатуры. Т.е. предполагается, что наткнувшись на этот атрибут, им можно будет управлять, с помощью специального ПО?
Ну и в любом случае, они вешают display: none... Но это уже не важно из-за возможности управлять этим скрытым списком?
MyQuestion, это не просто чья-то статья - это спецификация, официальная документация, о том, как делать доступные элементы интерфейса, все что там описано это так должно быть реализовано. Там же примеры кода. Можно скопировать себе меню и поменять стили, можно на этом принципе создать свое. aria атрибуты нужны скринридерам, чтоб они понимали, что этот элемент меню, внутри еще подменю, другие ариа атрибуты говорят, что меню скрыто или открыто, и самое главное - там описаны сценарии, как этим меню будут пользоваться с клавиатуры.
MyQuestion, ариа атрибуты сами по себе не открывают-закрывают меню, это делает javascript, но в функциях, которые управляют меню нужно менять значение некоторых ариа атрибутов, чтоб скринридер тоже понимал, что происходит и мог объяснить пользователю.
Средний