contentinfo

Как добавить ориентир футера на страницу.

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

Кратко

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

ARIA-роль ориентира, которая определяет область футера или «подвала» сайта. Обычно в футере находится справочная информация о сайте, копирайтинг, основная навигация, ссылки на социальные сети и другой похожий контент.

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

Пример

Секция статьи "Пример"
        
          
          <body>  <div role="contentinfo">    <p>© Киберпанк, 2077</p>  </div></body>
          <body>
  <div role="contentinfo">
    <p>© Киберпанк, 2077</p>
  </div>
</body>

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

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

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

Элементу с ролью contentinfo можно задавать все глобальные ARIA-атрибуты.

В большинстве случаев лучше использовать <footer> вместо contentinfo. При этом не стоит вкладывать в элемент с contentinfo тег <footer> и наоборот.

Футер может быть не только у страницы, но и у отдельных элементов на ней. Когда в <article> или <main> вложен <footer>, скринридер не считает их ориентирами. Роль contentinfo есть только у тега, который напрямую вложен в <body>.

У страницы может быть только один ориентир contentinfo. Футеры из <iframe> не суммируются.

Если на странице больше одного <footer>, хорошо задать им уникальные имена с помощью aria-label. Имя — это краткое название элемента, которое скринридер объявит вместе с ролью.

        
          
          <body>  <main>    <article>      <h2>Котики</h2>      <!-- Содержимое статьи -->      <footer aria-label="Дата публикации «Котики»">        <p>Опубликовано <time datetime="2037-12-11 15:40">11 декабря 2037</time></p>      </footer>    </article>  </main>  <footer aria-label="Копирайт и социальные сети">    <!-- Содержимое футера -->  </footer></body>
          <body>
  <main>
    <article>
      <h2>Котики</h2>
      <!-- Содержимое статьи -->
      <footer aria-label="Дата публикации «Котики»">
        <p>Опубликовано <time datetime="2037-12-11 15:40">11 декабря 2037</time></p>
      </footer>
    </article>
  </main>

  <footer aria-label="Копирайт и социальные сети">
    <!-- Содержимое футера -->
  </footer>
</body>

        
        
          
        
      

Как понять

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

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

На практике

Секция статьи "На практике"

Татьяна Фокина советует

Секция статьи "Татьяна Фокина советует"

Раньше добавляли к <footer> явную роль contentinfo.

        
          
          <footer role="contentinfo">  <p>© Киберпанк, 2077</p></footer>
          <footer role="contentinfo">
  <p>© Киберпанк, 2077</p>
</footer>

        
        
          
        
      

Это делали из-за того, что не все старые браузеры и Accessibility API правильно обрабатывали <footer>. Например, у тега не было встроенной роли contentinfo в Safari до 13 версии и в Firefox до 70 версии. Поэтому пользователи этих браузеров не могли быстро переместиться к области футера.

Сейчас этот хак не нужен, если только не поддерживаете настолько старые версии Safari и Firefox.