🎨 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