/ ↲
    Расширенный поиск

    Доступность

    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.

    Читайте также