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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Скринридер зачитает код из примера примерно так: «Последние новости, секция».

В первую очередь используйте <section>. Роль region пригодится только в случае сложного кастомного компонента или при поддержке очень старых браузеров. Явную роль role="region" лучше задавать <div> и <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

Обязательно подписывайте области с region, особенно если их несколько. Подписи к ориентирам region помогают пользователям скринридеров узнавать о содержимом блоков и упрощают навигацию по ним.

aria-label добавляет к элементу region подпись, о которой знают только пользователи вспомогательных технологий.

        
          
          <div role="region" aria-label="Недавние события">  <!-- Содержимое блока --></div>
          <div role="region" aria-label="Недавние события">
  <!-- Содержимое блока -->
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Атрибут aria-labelledby связывает с region видимую подпись из заголовка <h1>–<h6>:

        
          
          <div role="region" aria-labelledby="label-1">  <h2 id="label-1">Первая глава</h2>  <p>Как найти смысл жизни.</p>  <p>Секрет моего успеха.</p></div><div role="region" aria-labelledby="label-2">  <h2 id="label-2">Вторая глава</h2>  <p>Как перестать беспокоиться.</p>  <p>И начать играть в бридж.</p></div><div role="region" aria-labelledby="label-3">  <h2 id="label-3">Третья глава</h2>  <p>Перестаём грустить вместе.</p>  <p>Просто улыбнись.</p></div>
          <div role="region" aria-labelledby="label-1">
  <h2 id="label-1">Первая глава</h2>
  <p>Как найти смысл жизни.</p>
  <p>Секрет моего успеха.</p>
</div>
<div role="region" aria-labelledby="label-2">
  <h2 id="label-2">Вторая глава</h2>
  <p>Как перестать беспокоиться.</p>
  <p>И начать играть в бридж.</p>
</div>
<div role="region" aria-labelledby="label-3">
  <h2 id="label-3">Третья глава</h2>
  <p>Перестаём грустить вместе.</p>
  <p>Просто улыбнись.</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если оставить элементы region без подписей, скринридеры не посчитают их ориентирами.

        
          
          <div role="region">  <h2>Первая глава</h2>  <p>Как найти смысл жизни.</p>  <p>Секрет моего успеха.</p></div><div role="region">  <h2>Вторая глава</h2>  <p>Как перестать беспокоиться.</p></div><div role="region">  <h2>Третья глава</h2>  <p>Перестаём грустить вместе.</p></div>
          <div role="region">
  <h2>Первая глава</h2>
  <p>Как найти смысл жизни.</p>
  <p>Секрет моего успеха.</p>
</div>
<div role="region">
  <h2>Вторая глава</h2>
  <p>Как перестать беспокоиться.</p>
</div>
<div role="region">
  <h2>Третья глава</h2>
  <p>Перестаём грустить вместе.</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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