Способы скрыть элемент визуально, но оставить доступным для скринридеров

Цель

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

Подход 1: CSS-класс ".sr-only"

Это самый распространённый способ скрытия элемента от глаз, но не от скринридеров.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

<p class="sr-only">Это видит только скринридер</p>

Используется в Tailwind, Bootstrap (.sr-only) и других UI-фреймворках.

Подход 2: Атрибут "aria-hidden="true""

Противоположное поведение — скрывает от скринридеров, но оставляет на экране.

<p aria-hidden="true">Этот текст виден, но не читается скринридерами</p>

Используйте aria-hidden="true" только для декоративных или дублирующихся элементов.

Подход 3: "span" с текстом + "aria-label"

Когда хотите визуально показать один элемент, но скринридеру передать другой текст.

<button aria-label="Закрыть модальное окно">
  ❌
</button>

Подход 4: Текст вне экрана (менее предпочтительно)

.hidden-offscreen {
  position: absolute;
  left: -9999px;
}

Этот способ работает, но менее надёжен и может вызывать проблемы с навигацией.

Чего не стоит делать

• display: none и visibility: hidden — полностью скрывают и от глаз, и от скринридеров.
• Удаление элемента из DOM.