8 (499) 3-777-413

Как скрыть элемент на странице для скрин-ридеров

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

Дизайн-макеты почти всегда не позволяют разместить заголовок там, где требует валидация. Решение – использовать заголовки, которые будут скрыты от обычного пользователя, но будут восприниматься устройствами для чтения экрана.

Наиболее очевидные решения не будут работать так, как мы ожидаем:

h2.hidden {
	display: none;
}
/* Код выше не сработает на устройстве чтения экранов: такой элемент удален из потока документа, а значит читалка экрана его просто проигнорирует. */

h2.hidden {
	visibility: hidden;
}
/* Код выше не сработает на устройстве чтения экранов: такой элемент невидим а значит читалка экрана его проигнорирует до тех пор, пока элемент не станет виден. Кроме того, некоторые браузеры исключают невидимые элементы из потока документа.*/

Поэтому нам необходимо скрыть элемент страницы так, чтобы он остался в потоке документа, но при этом не влиял на верстку и был невидим обычному пользователю. Решением будет следующий код:

h2.sr-only {
    border: 0;
    clip: rect(0 0 0 0); /* Обрезать видимую область элемента*/
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Готово. Мы прибегнули к методам скрытия элементов, разрешенным Google.