Перейти к содержанию
ERITKOM
ВебРазбор

CSS-маркеры прокрутки получили режимы ссылок и вкладок в Chrome 154

Выпуск 22 сентября добавил links и tabs для scroll-marker-group. Выбор меняет клавиатурную навигацию и дерево доступности, поэтому одинаково выглядящие точки под каруселью могут означать разные интерфейсы.

Официальная иллюстрация Chrome for Developers: CSS-маркеры прокрутки получили режимы ссылок и вкладок в Chrome 154
Google / Chrome for Developers

Декоративная точка становится элементом навигации

Scroll markers позволяют связывать содержимое прокручиваемой области с автоматически создаваемыми элементами управления. CSS Overflow Level 5 описывает группу и отдельные маркеры как часть модели прокрутки. Chrome 154 добавил режимы links и tabs. Это полезно для каруселей и последовательностей панелей, но название свойства не делает такую область автоматически удобной. Важны подписи, порядок контента и доступность без использования мыши. В частности, визуальный ряд точек может не объяснять назначение каждой позиции пользователю экранного диктора.

Режим ссылок сохраняет навигационную модель

В links группа получает семантику навигации, маркеры ведут себя как ссылки и становятся последовательными точками клавиатурного перехода. Активация переводит фокус на целевой элемент. Такая модель подходит, когда содержание представляет набор доступных частей документа и переход по ним. Она не должна внезапно превращаться во вкладки только ради внешнего сходства. Пользователь ожидает от ссылки перемещения к содержимому. Поэтому оценивать результат нужно по тому, что объявляет вспомогательная технология и куда реально попадает фокус после действия. Вкладочная семантика включает связь tab с tabpanel, тогда как навигационная группа связывает ссылки с целями документа. Различие относится к доступной структуре, а не только к способу прокрутки. Элемент может перемещаться плавно, но оставаться ссылкой; либо менять активную панель по правилам вкладок. В Chrome 154 соответствующие роли генерируются режимом группы. Поэтому ручное дублирование ролей и собственный порядок фокуса способны конфликтовать с поведением платформы, даже когда декоративное оформление маркеров не вызывает визуальных проблем.

Режим вкладок меняет правила

В tabs группа действует как tablist, маркеры получают роль tab, а связанные элементы — tabpanel. В порядке Tab остаётся активная вкладка, переход между маркерами выполняется стрелками. Неактивные панели исключаются из дерева доступности, фокус после активации сохраняется на маркере. Эти изменения влияют на доступность содержимого, даже если визуальная анимация почти не изменилась. Для формы или вложенного интерактивного блока важно проверить, не становится ли важное управление неожиданно недостижимым при смене активной панели.

Спецификация и браузер имеют разные статусы

Редакторский черновик CSS Overflow Level 5 прямо обозначен как работающий документ, который может меняться. Он полезен для понимания терминов и модели управления. Release notes Chrome подтверждают конкретное изменение в версии 154 от 22 сентября. Ни один из этих источников по отдельности не означает одинакового поведения всех браузеров и вспомогательных технологий. Поэтому внедрение в публичную страницу требует проверки поддержки и сохранения понятного доступа к содержимому там, где создаваемые CSS-контролы ещё недоступны.

Создаваемый CSS-контрол получает поведение платформы

Маркеры являются псевдоэлементами, связанными с источником содержимого и его прокручиваемой областью. Вкладочная модель скрывает неактивные панели из дерева доступности, тогда как ссылочная модель представляет переходы между доступными частями документа. Поэтому переключение режима меняет не только подпись роли, но и объём содержимого, доступный вспомогательной технологии в данный момент. В release notes отдельно указано сохранение фокуса на активном маркере в tabs и перенос к цели в links. Прокрутка, семантика и управление клавиатурой оказываются связанными свойствами одного компонента. Для клиентов без поддержки этих псевдоэлементов исходное содержимое и обычная структура документа по-прежнему имеют самостоятельное значение.

Источники

Принципы журнала и исправления.

ERITKOM / НОВЫЙ ПРОЕКТ

Расскажите о задаче и оставьте контакты. Мы свяжемся с вами, чтобы обсудить проект.

  1. 01 Контакты
  2. 02 Ваша задача