Как стилизовать элементы форм доступно?

Question

Accepted Answer

## Правила

1. Не убивайте **фокус**: видимый `:focus-visible` outline/кольцо.
2. Связка `<label for>` — кликабельная зона и имя для AT.
3. Контраст текста, границ, placeholder ≠ единственная подсказка.
4. Состояния `:invalid`/ошибки — текстом рядом, не только цветом.
5. Кастомный checkbox/radio — сохраняйте нативный input (visually-hidden) + `label`, или ARIA-паттерн целиком.

```css
input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
input:disabled { opacity: 0.6; cursor: not-allowed; }
```

`accent-color` помогает нативным контролам без полного restyle. `appearance: none` — только если вы реально рисуете UI и не ломаете клавиатуру.

## Итог

Доступная стилизация форм = нативная семантика + видимый фокус + понятные ошибки, а не «красивый div вместо input».