region

Как добавить ориентир для независимого блока с контентом с помощью WAI-ARIA.

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

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

Кратко

Секция статьи "Кратко"

ARIA-роль ориентира, которая определяет область важного независимого блока с контентом. К примеру, блок новостей или последних постов.

Роль region есть у <section> по умолчанию.

Пример

Секция статьи "Пример"
        
          
          <div role="region" aria-labelledby="region-heading">  <h2 id="region-heading">Последние новости</h2>  <ul>    <li>      <a href="#">Попугай из Манчестера поёт лучше, чем Мадонна</a>    </li>    <li>      <a href="#">Хомячок из Сиэтла установил мировой рекорд по прыжкам в длину</a>    </li>  </ul></div>
          <div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">Последние новости</h2>
  <ul>
    <li>
      <a href="#">Попугай из Манчестера поёт лучше, чем Мадонна</a>
    </li>
    <li>
      <a href="#">Хомячок из Сиэтла установил мировой рекорд по прыжкам в длину</a>
    </li>
  </ul>
</div>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу role="region". Лучше, чтобы это были семантически нейтральные <div> или <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

В большинстве случаев лучше использовать <section> вместо роли region.

Хорошо подписывать области с region. Это можно сделать с помощью aria-labelledby.

Для элемента с ролью region можно использовать все глобальные ARIA-атрибуты.

Как понять

Секция статьи "Как понять"

Роль region создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню со всеми ориентирами.