Многие из нас неоднократно использовали разные плагины аккордеона, встроенные в фреймворки (тот же бутстрап), пробовали писать свой...Ситуаций множество но идеальных единицы.
Простой функционал можно накидать даже на чистом html/css.
Более хороший подход это html/css/js
Серьезный подход это все вышеперечисленное + доступность для людей с ограниченными возможностями.
Так вот, возможно встречали или получалось писать свой "доступный" аккордеон?
upd:
В моем понимании HTML должен содержать нужные атрибуты (aria, role, type), анимация должна происходить на CSS, классы добавляться/сниматься с помощью JQ.
Вариантов просмотрено до 20, в том числе на W3C и Bootstrap, остальные источники перечислять смысла нет.
Все они кажутся недоработанными.
Саша, скринридеры должны нормально воспринимать. Но это не точно =)
С поддержкой беда. Но тут фоллбэк написать — дело пяти минут.
Теперь серьёзно. Я бы никогда не стал использовать это в своих проектах. По крайней мере в текущей реализации. Слишком уж убого. И не кастомизируется. Только чтобы стрелку убрать, нужно танцы с бубном устраивать. И всё равно фоллбек на js писать надо.
Бутстраповский аккордион вполне юзабельный и доступный. Если аккуратно его выдрать из фреймворка, можно использовать где угодно.
Сергей, меня вот тоже стрелка смутила и возможность стабильной реализации с эффектом плавности или чего подобного)
смотрел бутстраповский, там допустим не все атрибуты которые по идее важные для скринридеров.
правда по атрибутам отдельная история, какие действительно нужны в реализации аккордеона, а какие будут лишними.
например эти все атрибуты собрать бы воедино, но как правильно и какие действительно необходимы, а каких не хватает?
type="button"
role="button"
aria-labelledby=""
id=""
aria-label=""
aria-expanded=""