Может ли элементы быть одновременно role='tab'; и аккордионом (aria-expanded)?
Например, кнопка которая является переключателем табов, а так же открывается скрытый контент внутри себя. Как это правильно записать?
Просто по mdn написано что aria-expanded должна так же иметь aria-control, но у меня aria-control занято для контента таба. https://codepen.io/poylar/pen/PodNwBR
godsplane, Ну, в каком то смысле да. Но это не табы. Картинки декоративные, то есть это не контент.
С учётом того, что требуется в адаптиве - это просто аккордион.
Можно подумать над тем как это сверстать. Например выносить картинку через position, или, возможно, как-то хитро на гридах, через, например, area
но даже если это не табы, то слева навигация это все равно кнопки?Которые делают сразу два дейсвтия?
Смотря как сверстаете. Опять же, с учётом как это выглядит в адаптиве, то действие одно - активация контента в аккордеоне. А на стилях(ну или на js при активации) картинка просто вынесена.
Если на стилях картинку вынести не получается, то да, действия 2. Но только одно из них соответствует ui элементу - аккордион. Смена картинки - побочное действие декоративного характера, не нуждающееся в проработке с точки зрения доступности.
А если добавть справа кусок текста то это уже станет табами?
С учётом адаптива это станет какой-то лажой, требующей переработки)
Потому что 2 ui элемента смешаны в один.
Вадим, а разве если я сделаю навигацию слева кнопками role="tab" и справа картинка будет tablist а аккордион просто буду показывать по aria-selected="true" это не будет ок?
godsplane, Раз Вы заморачиваетесь со всеми этими делами, значит Вы делаете упор на доступность.
Для незрячего пользователя, как считаете, будет понятно что перед ним, аккордион или табы?
Последовательность контента какая?
Согласно wcag - между ярлыками табов можно переключаться стрелочками. Между группой аккордеонов - нет.
И, насколько я помню, когда в фокус попадает таб, то скринридер издаёт соответствующий сигнал, что мол, доступна навигация стрелками. Это правда нужно бы перепроверить и возможно не все скринридеры это делают.
В итоге как Вы объясните незрячему пользователю что перед ним, табы или аккордеон? Как будете разруливать навигацию по контенту? Сначала то что в аккордеоне? Или то что в табе? А потом?
В итоге смешивание двух разных ui элементов вводит в заблуждение.
Вадим, ну вообще у меня скрытие контента аккордена иидет через height:0;overflow:hidden. вроде это значит что скринридеры его прочтут, а значит для них это как просто кнопка с текстом внутри + стрелками у меня есть возможность это переключать. + aria-controls будет указывать на картинку котоая меняется (но вот тут походу это лишнее)
godsplane, Ну дело не только в методе скрытия контента. Размечая блоки определённым образом пользователю даётся дополнительная информация о том, какой это ui элемент.
Вадим, ну так если слева кнопки, а справа контент переключается, почему это не табы?))
Вот еще пример, тут тоже только картинка переключается. причем тут табы в табах, такое вообще ок?
В мобилке тоже самое
godsplane, не понимаю зачем Вы призвали меня на вопрос? Чтобы донести свою точку зрения? Я свою сказал.
Это не табы потому что картинка не контентная а на мобилке и подавно чистый аккордеон.
