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

Кратко

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

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

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

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

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

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

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

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