Клавиша / esc

separator

Роль той самой горизонтальной черты, которая разделяет блоки на странице.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Самостоятельная роль виджета и структуры документа из WAI-ARIA для разделителя. Обычно это горизонтальная черта, которая разделяет смысловые блоки на странице.

В HTML эта роль есть у <hr>, если это обычный, неинтерактивный разделитель.

Как пишется

Скопировано

Задайте role="separator" любому тегу, лучше <div> или <span>.

Чаще всего разделители статические, однако бывают ситуации, когда пользователи могут взаимодействовать с ними.

Визуально статические разделители выглядят как горизонтальная черта и для них лучше использовать <hr>.

Интерактивные разделители можно перемещать и они не обязательно располагаются горизонтально. Такие разделители могли встречать в меню программ и текстовых редакторах. У них должен быть атрибут aria-valuenow с числовым значением, которое означает позицию элемента. Ещё не забудьте задать aria-valuemin и aria-valuemax.

У роли separator есть встроенное свойство aria-orientation="horizontal".

Для обычных разделителей можно использовать глобальные ARIA-атрибуты, а для интерактивных некоторые другие атрибуты виджетовaria-disabled и aria-valuetext.