Как скрыть контент визуально, но оставить для screen readers?

Question

Accepted Answer

## Не делайте так

- `display: none` / `visibility: hidden` / `hidden` — обычно **убирают из a11y-дерева**.
- `opacity: 0` без правильного фокуса — ловушка для клавиатуры.

## Классический visually-hidden

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

Или современный вариант с `clip-path`. Для «показать при фокусе» — `.sr-only:focus { ... reset ... }` (skip link).

## Когда что

Иконка-кнопка: видимый фокус + `aria-label` / visually-hidden текст. Контент только для AT — sr-only. Временно скрыть и от всех — `display: none` / `hidden`.

## Итог

Visually-hidden паттерн прячет от глаз, но оставляет в accessibility tree; `display: none` — нет.