Может ли элементы быть одновременно role='tab'; и аккордионом (aria-expanded)?

Question

[godsplan]

Например, кнопка которая является переключателем табов, а так же открывается скрытый контент внутри себя. Как это правильно записать?
Просто по mdn написано что aria-expanded должна так же иметь aria-control, но у меня aria-control занято для контента таба.
https://codepen.io/poylar/pen/PodNwBR

Comments

[Вадим]

Покажите дизайн, потому что по описанию выглядит как смешивание двух разных ui элементов, а это сомнительно даже не смотря на семантику и доступность.

[godsplan]

Вадим,

справа картинка меняется

[Вадим]

godsplane, если меняется только картинка, то это чисто декоративная история. Табами не пахнет.

[Вадим]

godsplane, что в адаптиве?

[godsplan]

Вадим,

[Вадим]

godsplane, Ну вот, а тут и подавно картинка как часть контента аккордиона

[godsplan]

Вадим, ну все равно кнопки слева же переключат контент справа?

[Вадим]

godsplane, Ну, в каком то смысле да. Но это не табы. Картинки декоративные, то есть это не контент.
С учётом того, что требуется в адаптиве - это просто аккордион.
Можно подумать над тем как это сверстать. Например выносить картинку через position, или, возможно, как-то хитро на гридах, через, например, area

[godsplan]

Вадим, но даже если это не табы, то слева навигация это все равно кнопки?Которые делают сразу два дейсвтия?

[godsplan]

А если добавть справа кусок текста то это уже станет табами?

[Вадим]

godsplane,

но даже если это не табы, то слева навигация это все равно кнопки?Которые делают сразу два дейсвтия?

Смотря как сверстаете. Опять же, с учётом как это выглядит в адаптиве, то действие одно - активация контента в аккордеоне. А на стилях(ну или на js при активации) картинка просто вынесена.
Если на стилях картинку вынести не получается, то да, действия 2. Но только одно из них соответствует ui элементу - аккордион. Смена картинки - побочное действие декоративного характера, не нуждающееся в проработке с точки зрения доступности.

А если добавть справа кусок текста то это уже станет табами?

С учётом адаптива это станет какой-то лажой, требующей переработки)
Потому что 2 ui элемента смешаны в один.

[godsplan]

Вадим, а разве если я сделаю навигацию слева кнопками role="tab" и справа картинка будет tablist а аккордион просто буду показывать по aria-selected="true" это не будет ок?

[Вадим]

godsplane, Раз Вы заморачиваетесь со всеми этими делами, значит Вы делаете упор на доступность.
Для незрячего пользователя, как считаете, будет понятно что перед ним, аккордион или табы?
Последовательность контента какая?
Согласно wcag - между ярлыками табов можно переключаться стрелочками. Между группой аккордеонов - нет.

И, насколько я помню, когда в фокус попадает таб, то скринридер издаёт соответствующий сигнал, что мол, доступна навигация стрелками. Это правда нужно бы перепроверить и возможно не все скринридеры это делают.

В итоге как Вы объясните незрячему пользователю что перед ним, табы или аккордеон? Как будете разруливать навигацию по контенту? Сначала то что в аккордеоне? Или то что в табе? А потом?

В итоге смешивание двух разных ui элементов вводит в заблуждение.

[godsplan]

Вадим, ну вообще у меня скрытие контента аккордена иидет через height:0;overflow:hidden. вроде это значит что скринридеры его прочтут, а значит для них это как просто кнопка с текстом внутри + стрелками у меня есть возможность это переключать. + aria-controls будет указывать на картинку котоая меняется (но вот тут походу это лишнее)

[Вадим]

godsplane, Ну дело не только в методе скрытия контента. Размечая блоки определённым образом пользователю даётся дополнительная информация о том, какой это ui элемент.

[godsplan]

Вадим, ну так если слева кнопки, а справа контент переключается, почему это не табы?))
Вот еще пример, тут тоже только картинка переключается. причем тут табы в табах, такое вообще ок?
В мобилке тоже самое

[Вадим]

godsplane, не понимаю зачем Вы призвали меня на вопрос? Чтобы донести свою точку зрения? Я свою сказал.
Это не табы потому что картинка не контентная а на мобилке и подавно чистый аккордеон.