Как скрыть содержимое от скринридеров

Как скрыть содержимое страницы от скринридеров и других вспомогательных технологий.

Время чтения: 6 мин

Кратко

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

В этой статье рассмотрим распространённые сценарии, в которых может потребоваться скрыть содержимое страницы от скринридеров или наоборот скрыть контент визуально, но оставить доступным для программ чтения с экрана.

Когда может понадобиться скрыть контент только для пользователей скринридеров? К примеру, когда на странице сайта часто повторяются декоративные элементы — логотип, иконки и подобное. Повторяющийся контент не помогает пользователям программ чтения с экрана, так что его можно не показывать им.

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

Существует несколько способов скрытия содержимого в зависимости от целей.

ARIA-атрибут aria-hidden

Секция статьи "ARIA-атрибут aria-hidden"

Можно использовать атрибут aria-hidden со значением true, чтобы скрыть содержимое от программ чтения с экрана, но оставить его видимым на странице.

        
          
          <p aria-hidden="true">Этот текст виден на странице, но скрыт от скринридера.</p>
          <p aria-hidden="true">Этот текст виден на странице, но скрыт от скринридера.</p>

        
        
          
        
      

Свойство aria-hidden скрывает элемент от скринридеров и других вспомогательных технологий, но не скрывает его визуально. Если используете этот ARIA-атрибут на неинтерактивном элементе с вложенным интерактивным, то вложенный элемент унаследует этот атрибут. Это тоже приведёт к проблемам с доступностью для вспомогательных устройств.

Классы .visually-hidden, .sr-only, .off-screen

Секция статьи "Классы .visually-hidden, .sr-only, .off-screen"

Чтобы скрыть контент визуально, но оставить к нему доступ для вспомогательных технологий, можно использовать специальные CSS-стили для визуального скрытия содержимого, которое прочтёт программа чтения с экрана. Для таких стилей обычно используют классы .visually-hidden, .vh или .sr-only. Так как контент с такими стилями по-прежнему является частью содержимого страницы, скринридеры будут его читать.

        
          
            clip: rect(0 0 0 0);  clip-path: inset(50%);  height: 1px;  overflow: hidden;  position: absolute;  white-space: nowrap;  width: 1px;
            clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;

        
        
          
        
      
        
          
          <p class="sr-only">Этот текст скрыт визуально, но доступен для скринридеров.</p>
          <p class="sr-only">Этот текст скрыт визуально, но доступен для скринридеров.</p>

        
        
          
        
      

Свойство clip устарело, но его можно использовать браузеров, которые не поддерживают более новое свойство clip-path.
Для класса, который скрывает содержимое визуально, используют набор свойств для сжатия элемента до квадрата размером 1 пиксель и абсолютное позиционирование, чтобы удалить элемент из обычного потока документа.

Давайте используем .sr-only в реальном примере с кнопкой, у которой вместо текста иконка.

        
          
          <label for="search">Поиск:</label><input id="search" type="text"><button class="button">  <span class="sr-only">Искать на странице</span>  <svg    aria-hidden="true"    xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"    width="30"    height="30"    viewBox="0 0 17 17">    <!-- Описание фигуры -->  </svg></button>
          <label for="search">Поиск:</label>
<input id="search" type="text">
<button class="button">
  <span class="sr-only">Искать на странице</span>
  <svg
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="30"
    height="30"
    viewBox="0 0 17 17">
    <!-- Описание фигуры -->
  </svg>
</button>

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

В демке aria-hidden: true добавлен для того, чтобы скринридер не озвучивал код SVG и не запутывал пользователя.

Обратите внимание на то, что свойства width: 0px и height: 0px удаляют элементы из потока страницы, поэтому скринридеры их не прочитают.

Чтобы предоставить скринридеру доступ к элементу, но оставить его скрытым визуально, можно так же использовать атрибут aria-label. Атрибут подойдёт для интерактивных элементов, таких как ссылки, кнопки, а ещё для элементов форм, например input. Однако aria-label не всегда хорошо поддерживается скринридерами для статических элементов. Не забывайте переводить содержимое атрибута, если поддерживаете на сайте несколько языков.

Другой способ скрыть содержимое от просмотра — вывести его за пределы видимой области просмотра браузера.

        
          
          .off-screen {  left: -100vw;  position: absolute;}
          .off-screen {
  left: -100vw;
  position: absolute;
}

        
        
          
        
      

Свойство position: absolute сообщает браузеру, что нужно удалить элемент из потока страницы и расположить по заданным координатам. Свойство left: -100vw перемещает содержимое на 10000 пикселей влево.

Свойства display: none и visibility: hidden

Секция статьи "Свойства display: none и visibility: hidden"

Эти стили можно применить, если нужно скрыть контент от всех пользователей. Содержимое визуально удаляется со страницы и игнорируется программами чтения с экрана. Хотя оба свойства применяются для одной цели, они ведут себя немного по-разному:

  • visibility: hidden скрывает содержимое тега, но оставляет элемент в обычном потоке страницы таким образом, что он по-прежнему занимает место.
  • display: none полностью удаляет элемент из документа. Он не занимает места, хотя всё ещё находится в исходном HTML-коде.

Не используйте эти стили CSS, если хотите, чтобы содержимое читалось программой чтения с экрана.

        
          
          <article>  <p class="visibility-visible">Этот текст виден всем пользователям.</p>  <p class="visibility-hidden">Этот текст скрыт, но элемент занимает место в потоке.</p>  <p class="visibility-none">Этот текст снова скрыт и не занимает место на странице.</p></article>
          <article>
  <p class="visibility-visible">Этот текст виден всем пользователям.</p>
  <p class="visibility-hidden">Этот текст скрыт, но элемент занимает место в потоке.</p>
  <p class="visibility-none">Этот текст снова скрыт и не занимает место на странице.</p>
</article>

        
        
          
        
      
        
          
          .visibility-hidden {  visibility: hidden;}.visibility-none {  display: none;}
          .visibility-hidden {
  visibility: hidden;
}

.visibility-none {
  display: none;
}

        
        
          
        
      

Атрибут hidden

Секция статьи "Атрибут hidden"

HTML-атрибут hidden работает как display: none. Если добавить атрибут к элементу, он визуально скроется со страницы и не будет занимать место, как-будто его совсем нет.

        
          
          <p hidden>Этот текст не виден на странице и не виден для скринридера.</p>
          <p hidden>Этот текст не виден на странице и не виден для скринридера.</p>

        
        
          
        
      

Дополнительные ссылки

Секция статьи "Дополнительные ссылки"

На практике

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

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

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

🛠 По идее, скрытый контент с помощью класса .visually-hidden не влияет на поисковую выдачу в Google и не нарушает правила, если делаете это для улучшения доступности. Однако наверняка знать не может никто кроме самого Google.

🛠 Декоративные картинки из <img>, у которых нет смысловой нагрузки, скрывайте от скринридеров пустым атрибутом alt. Не стоит усложнять код и добавлять aria-hidden или что-то ещё.

На собеседовании

Секция статьи "На собеседовании"

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

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

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