region

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 создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню со всеми ориентирами.