Проблемы CSS-каруселей
Не так давно команда Chrome поделилась анонсом CSS-каруселей из спецификации CSS Overflow Module Level 5, а позже их показали на Google I/O 2025. Это крутая штука, но лично у меня возникли вопросы к реализации. И не только у меня.
Дэвид Бушелл выразил недовольство по поводу использования псевдо-элементов для создания интерактивных кнопок карусели (стрелок и маркеров). Я с ним согласен, это выглядит как-то противоестественно.
Псевдо-элементы ограничены свойством content с простым текстом или изображением по сравнению с контентом в HTML. Я за композицию элементов, как вкладывается в для кнопки переключения видимости.
CSS-карусели позиционируются как доступное решение, чтобы избежать проблем с библиотеками. На деле есть вопросы к доступности. Сара Суайдан протестировала текущую реализацию и написала об этом статью.
Контейнеру с маркерами добавляется роль tablist, а маркерам роль tab и навигация стрелками согласно паттерну вкладок и одной из реализаций паттерна карусели. Но слайды не получают роль tabpanel и не связываются с маркерами.
Роли tablist и tab добавляются без учёта элемента, из которого создана карусель. То же самое с кнопками переключения. При использовании списка , внутри появляются недопустимые элементы и ломают семантику.
В общем актуальная на сегодня реализация откровенно сырая. Возможно, спешили к Google I/O. CSS-карусели в текущем виде выпустили в Chrome 135 и это плохо, потому что они нуждаются в доработках.
#css #a11y
Не так давно команда Chrome поделилась анонсом CSS-каруселей из спецификации CSS Overflow Module Level 5, а позже их показали на Google I/O 2025. Это крутая штука, но лично у меня возникли вопросы к реализации. И не только у меня.
Дэвид Бушелл выразил недовольство по поводу использования псевдо-элементов для создания интерактивных кнопок карусели (стрелок и маркеров). Я с ним согласен, это выглядит как-то противоестественно.
Псевдо-элементы ограничены свойством content с простым текстом или изображением по сравнению с контентом в HTML. Я за композицию элементов, как вкладывается в для кнопки переключения видимости.
CSS-карусели позиционируются как доступное решение, чтобы избежать проблем с библиотеками. На деле есть вопросы к доступности. Сара Суайдан протестировала текущую реализацию и написала об этом статью.
Контейнеру с маркерами добавляется роль tablist, а маркерам роль tab и навигация стрелками согласно паттерну вкладок и одной из реализаций паттерна карусели. Но слайды не получают роль tabpanel и не связываются с маркерами.
Роли tablist и tab добавляются без учёта элемента, из которого создана карусель. То же самое с кнопками переключения. При использовании списка , внутри появляются недопустимые элементы и ломают семантику.
В общем актуальная на сегодня реализация откровенно сырая. Возможно, спешили к Google I/O. CSS-карусели в текущем виде выпустили в Chrome 135 и это плохо, потому что они нуждаются в доработках.
#css #a11y