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

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

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

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

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

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

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

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

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

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

        
          
          .sr-only {  clip: rect(0 0 0 0);  clip-path: inset(50%);  height: 1px;  overflow: hidden;  position: absolute;  white-space: nowrap;  width: 1px;}
          .sr-only {
  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"    width="24"    height="24"    viewBox="0 0 24 24"    fill="none"    stroke="#000000"    stroke-width="3"    stroke-linecap="round"    stroke-linejoin="round"    xmlns="http://www.w3.org/2000/svg"  >    <!-- Описание фигуры -->  </svg></button>
          <label for="search">Поиск:</label>
<input id="search" type="text">
<button class="button">
  <span class="sr-only">Искать на странице</span>
  <svg
    aria-hidden="true"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="#000000"
    stroke-width="3"
    stroke-linecap="round"
    stroke-linejoin="round"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- Описание фигуры -->
  </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 перемещает содержимое на одну ширину экрана влево.

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

• 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;
}

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

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

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

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

• Hiding content for screen readers, WebAIM.
• Hide and show items inclusively, W3C.

На практике

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

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

Скопировать ссылку "Татьяна Фокина советует" Скопировано

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

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

+ Развернуть

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

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

Задать вопрос в рубрику

🤚 Я знаю ответ

Матвей Романов  отвечает

Скопировать ссылку "Матвей Романов  отвечает" Скопировано

1. hidden — это HTML-атрибут, который предназначен для скрытия элемента на странице. Это означает, что элемент не будет отображаться в пользовательском интерфейсе и скроется от вспомогательных технологий, но он все ещё существует в DOM.
2. aria-hidden="true" — это атрибут ARIA (Accessible Rich Internet Applications), который используется для указания, что элемент должен быть скрыт от вспомогательных технологий, таких как скринридеры. Это означает, что элемент не будет доступен для слушателей событий или считывания содержимого вспомогательными технологиями, но он все ещё виден в пользовательском интерфейсе.
3. role="presentation" — это ARIA-атрибут, который указывает, что элемент является частью представления или дизайна и не имеет никакой роли в вспомогательных технологиях. Это означает, что роль элемента будет игнорироваться такими технологиями.
4. role="none" — это синоним role="presentation", который тоже указывает, что элемент не имеет роли для вспомогательных технологий. Это означает, что роль элемента не будет доступна для слушателей событий или механизмов навигации вспомогательными технологиями.

+ Развернуть

🤚 Я знаю ответ

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