Продолжаю рассказывать про ARIA-роли.
region — это область с контентом, которая имеет особое значение в рамках страницы, которое определено автором. Элемент с этой ролью попадает в список ориентиров, поэтому пользователи вспомогательных технологий смогут быстро добраться к этому участку страницы. При этом region должен использоваться для группировки контента, назначение которого не попадает ни под один из существующих ориентиров (banner, navigation, contentinfo, complementary, main, search или form).Иными словами, роль
region позволяет создавать ориентиры, не прибегая к использованию элементов-ориентиров или ролей-ориентиров не по их прямому назначению. Это можно использовать для выделения важных частей страницы:- область с основным описанием продукта и формой добавления в корзину в интернет-магазине
- область с Call-To-Action формой на сайте услуг
- разные по функционалу панели в админке
- область с чатом возле основного плеера на стриминговом сервисе
То есть какая-то область страницы, которая представляет для пользователя интерес и к которой хочется быстро переключиться. К
region нужно привязать короткое описание, размеченное заголовком.<div role="region" aria-labelledby="r1">
<h2 id="r1">Важная область</h2>
<!-- контент -->
</div>
Если к встроенному в HTML элементу
<section> привязать заголовок, то элемент получит встроенную роль region. Исходя из первого правила ARIA, лучше использовать именно такой вариант.<section aria-labelledby="r1">
<h2 id="r1">Важная область</h2>
<!-- контент -->
</section>
К
region можно быстро переключиться через список ориентиров или горячие клавиши. В этом смысле заголовки решает похожую задачу. Но region добавляет дополнительную семантику, скринридеры озвучат границы и название области. При помощи aria-roledescription можно дать роли более конкретное название. Подробнее об использовании region можно прочитать в технике ARIA20.