Кратко
СкопированоВ этой статье рассмотрим распространённые сценарии, в которых может потребоваться скрыть содержимое страницы от скринридеров или наоборот скрыть контент визуально, но оставить доступным для программ чтения с экрана.
Когда может понадобиться скрыть контент только для пользователей скринридеров? К примеру, когда на странице сайта часто повторяются декоративные элементы — логотип, иконки и подобное. Повторяющийся контент не помогает пользователям программ чтения с экрана, так что его можно не показывать им.
Бывают ситуации, когда информация или функции элемента понятны визуально, но могут быть неочевидны для пользователей программ чтения с экрана. В этом случае можно сделать так, чтобы скринридер читал содержимое, но при этом оно оставалось невидимым для зрячих пользователей. Например, название кнопки со значком лупы рядом со строкой поиска.
Существует несколько способов скрытия содержимого в зависимости от целей.
Можно использовать атрибут aria
со значением true
, чтобы скрыть содержимое от программ чтения с экрана, но оставить его видимым на странице.
<p aria-hidden="true"> Этот текст виден на странице, но скрыт от скринридера.</p>
<p aria-hidden="true"> Этот текст виден на странице, но скрыт от скринридера. </p>
Свойство aria
скрывает элемент от скринридеров и других вспомогательных технологий, но не скрывает его визуально. Если используете этот ARIA-атрибут на неинтерактивном элементе с вложенным интерактивным, то вложенный элемент унаследует этот атрибут. Это тоже приведёт к проблемам с доступностью для вспомогательных устройств.
Чтобы скрыть контент визуально, но оставить к нему доступ для вспомогательных технологий, можно использовать специальные CSS-стили для визуального скрытия содержимого, которое прочтёт программа чтения с экрана. Для таких стилей обычно используют классы .visually
, .vh
или .sr
. Так как контент с такими стилями по-прежнему является частью содержимого страницы, скринридеры будут его читать.
.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
.
Для класса, который скрывает содержимое визуально, используют набор свойств для сжатия элемента до квадрата размером 1 пиксель и абсолютное позиционирование, чтобы удалить элемент из обычного потока документа.
Давайте используем .sr
в реальном примере с кнопкой, у которой вместо текста иконка.
<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
добавлен для того, чтобы скринридер не озвучивал код SVG и не запутывал пользователя.
Обратите внимание на то, что свойства width
и height
удаляют элементы из потока страницы, поэтому скринридеры их не прочитают.
Чтобы предоставить скринридеру доступ к элементу, но оставить его скрытым визуально, можно так же использовать атрибут aria
. Атрибут подойдёт для интерактивных элементов, таких как ссылки, кнопки, а ещё для элементов форм, например input
. Однако aria
не всегда хорошо поддерживается скринридерами для статических элементов. Не забывайте переводить содержимое атрибута, если поддерживаете на сайте несколько языков.
Другой способ скрыть содержимое от просмотра — вывести его за пределы видимой области просмотра браузера.
.off-screen { left: -100vw; position: absolute;}
.off-screen { left: -100vw; position: absolute; }
Свойство position
сообщает браузеру, что нужно удалить элемент из потока страницы и расположить по заданным координатам. Свойство left
перемещает содержимое на одну ширину экрана влево.
Эти стили можно применить, если нужно скрыть контент от всех пользователей. Содержимое визуально удаляется со страницы и игнорируется программами чтения с экрана. Хотя оба свойства применяются для одной цели, они ведут себя немного по-разному:
visibility
скрывает содержимое тега, но оставляет элемент в обычном потоке страницы таким образом, что он по-прежнему занимает место.: hidden display
полностью удаляет элемент из документа. Он не занимает места, хотя всё ещё находится в исходном HTML-коде.: none
Не используйте эти стили 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
. Если добавить атрибут к элементу, он визуально скроется со страницы и не будет занимать место, как будто его совсем нет.
<p hidden> Этот текст не виден на странице и не виден для скринридера.</p>
<p hidden> Этот текст не виден на странице и не виден для скринридера. </p>
Дополнительные ссылки
Скопировано- Hiding content for screen readers, WebAIM.
- Hide and show items inclusively, W3C.
На практике
Скопированосоветует Скопировано
🛠 По идее, скрытый контент с помощью класса .visually
не влияет на поисковую выдачу в Google и не нарушает правила, если делаете это для улучшения доступности. Однако наверняка знать не может никто кроме самого Google.
🛠 Декоративные картинки из <img>
, у которых нет смысловой нагрузки, скрывайте от скринридеров пустым атрибутом alt
. Не стоит усложнять код и добавлять aria
или что-то ещё.
На собеседовании
СкопированоЭто вопрос без ответа. Вы можете помочь! Чтобы написать ответ, следуйте инструкции.