🎨 CSS Tip: Как скрыть контент визуально, но оставить его доступным

В погоне за минималистичным дизайном мы часто используем иконки без подписей. Но для пользователей скринридеров (и для SEO!) кнопка без текста - это проблема.

❌ Ошибка: Использовать display: none, visibility: hidden или opacity: 0.
Эти свойства полностью убирают элемент из дерева доступности. Скринридер его просто проигнорирует.

✅ Решение: Паттерн .visually-hidden (или .sr-only).
Этот класс заставляет элемент «исчезнуть» с экрана, но остаться в DOM и быть доступным для ассистивных технологий.

Разбор магии из сниппета:

1. position: absolute - убираем элемент из потока документа, чтобы он не занимал место.
2. width: 1px; height: 1px - некоторые скринридеры игнорируют элементы с нулевыми размерами, поэтому оставляем 1 пиксель.
3. overflow: hidden - скрываем контент, который не влезает в наш 1 пиксель.
4. white-space: nowrap - предотвращаем перенос текста (если текст разобьется на строки в 1px, скринридер может прочитать его некорректно).
5. clip-path: circle(0) - финальный штрих, полностью обрезаем видимую область этого 1 пикселя.

📌 Сниппет:

.visually-hidden {
  /* Убираем из потока */
  position: absolute;
  
  /* Размеры 1px, чтобы скринридер не игнорировал элемент */
  width: 1px;
  height: 1px;
  
  /* Скрываем всё, что не влезает */
  overflow: hidden;
  
  /* Запрещаем перенос строк */
  white-space: nowrap;
  
  /* Обрезаем визуальную часть */
  clip-path: circle(0);
  
  /* Альтернативные варианты скрытия: */
  /* transform: scale(0); */
  /* transform: translateX(-9999px); */
}

Итог:
✅ Виден для Screen Reader
✅ Перехватывает фокус (если это интерактивный элемент)
❌ Не занимает места в верстке
❌ Не реагирует на клики мыши (но работает с клавиатуры)

👉@frontend_sovet