Кратко
СкопированоРоль изменяющихся областей. Делает часть страницы live region или «живой» областью. log
нужна для областей с логами.
Пример
Скопировано<div role="log"> <h1>История сообщений</h1> <ul> <li><time datetime="2077-04-21T13:00+06:00">13:00</time> Тебя снова взломали?</li> <li><time datetime="2077-04-21T12:09+06:00">12:09</time> Одолжишь своего вельш-корги-кардигана до понедельника? Очень нужно.</li> </ul></div>
<div role="log"> <h1>История сообщений</h1> <ul> <li><time datetime="2077-04-21T13:00+06:00">13:00</time> Тебя снова взломали?</li> <li><time datetime="2077-04-21T12:09+06:00">12:09</time> Одолжишь своего вельш-корги-кардигана до понедельника? Очень нужно.</li> </ul> </div>
Как пишется
СкопированоДобавьте к тегу атрибут role
. Роль можно использовать для всех тегов.
У log
по умолчанию есть свойство aria
.
Скринридер объявит сообщения с ролью log
после другой, более важной информации.
Как понять
Скопировано«Живая» область — это область страницы, в которой что-то постоянно обновляется из-за внешних событий. Например, появляется уведомление или ошибка, когда пользователь сделал что-то неправильно. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.
Роль log
используют для истории сообщений, списков ошибок и похожей информации. Для логов важна последовательность, в которой появляется новая информация. Старая информация обычно скрывается по мере добавления новой.