Может ли элементы быть одновременно role='tab'; и аккордионом (aria-expanded)?
Например, кнопка которая является переключателем табов, а так же открывается скрытый контент внутри себя. Как это правильно записать?
Просто по mdn написано что aria-expanded должна так же иметь aria-control, но у меня aria-control занято для контента таба.
https://codepen.io/poylar/pen/PodNwBR
Дополнительно:
Покажите дизайн, потому что по описанию выглядит как смешивание двух разных ui элементов, а это сомнительно даже не смотря на семантику и доступность.
справа картинка меняется
С учётом того, что требуется в адаптиве - это просто аккордион.
Можно подумать над тем как это сверстать. Например выносить картинку через position, или, возможно, как-то хитро на гридах, через, например, area
но даже если это не табы, то слева навигация это все равно кнопки?Которые делают сразу два дейсвтия?
Смотря как сверстаете. Опять же, с учётом как это выглядит в адаптиве, то действие одно - активация контента в аккордеоне. А на стилях(ну или на js при активации) картинка просто вынесена.
Если на стилях картинку вынести не получается, то да, действия 2. Но только одно из них соответствует ui элементу - аккордион. Смена картинки - побочное действие декоративного характера, не нуждающееся в проработке с точки зрения доступности.
А если добавть справа кусок текста то это уже станет табами?
С учётом адаптива это станет какой-то лажой, требующей переработки)
Потому что 2 ui элемента смешаны в один.
Для незрячего пользователя, как считаете, будет понятно что перед ним, аккордион или табы?
Последовательность контента какая?
Согласно wcag - между ярлыками табов можно переключаться стрелочками. Между группой аккордеонов - нет.
И, насколько я помню, когда в фокус попадает таб, то скринридер издаёт соответствующий сигнал, что мол, доступна навигация стрелками. Это правда нужно бы перепроверить и возможно не все скринридеры это делают.
В итоге как Вы объясните незрячему пользователю что перед ним, табы или аккордеон? Как будете разруливать навигацию по контенту? Сначала то что в аккордеоне? Или то что в табе? А потом?
В итоге смешивание двух разных ui элементов вводит в заблуждение.
Вот еще пример, тут тоже только картинка переключается. причем тут табы в табах, такое вообще ок?
В мобилке тоже самое
Это не табы потому что картинка не контентная а на мобилке и подавно чистый аккордеон.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, элементы могут одновременно иметь роль "tab" и быть аккордеоном с атрибутом aria-expanded. Роль "tab" используется для элементов, которые представляют собой вкладки в интерфейсе, позволяя пользователю переключаться между ними. Атрибут aria-expanded, с другой стороны, используется для определения состояния элемента аккордеона - развернут или свернут.
Для того чтобы элемент мог одновременно иметь обе эти характеристики, необходимо правильно структурировать код и добавить соответствующие атрибуты. Например, у вкладки с ролью "tab" может быть атрибут aria-controls, указывающий на идентификатор блока, который она управляет. В свою очередь, у блока аккордеона можно добавить атрибут aria-labelledby, указывающий на идентификатор вкладки, которая его управляет.
Пример кода на PHP:
<div role="tab" aria-controls="accordion1" id="tab1"> Вкладка 1 </div> <div id="accordion1" aria-labelledby="tab1" aria-expanded="true"> Содержимое аккордеона 1 </div> <div role="tab" aria-controls="accordion2" id="tab2"> Вкладка 2 </div> <div id="accordion2" aria-labelledby="tab2" aria-expanded="false"> Содержимое аккордеона 2 </div>
В данном примере у нас есть две вкладки (элементы с ролью "tab") и соответствующие им блоки аккордеона. Каждая вкладка управляет своим блоком аккордеона, и при этом блоки могут быть развернуты или свернуты с помощью атрибута aria-expanded.
Таким образом, элементы могут одновременно иметь роль "tab" и быть аккордеоном с атрибутом aria-expanded, что позволяет создавать более интерактивные и удобные пользовательские интерфейсы.