Как реализуется доступность CSS

Доступность в CSS обеспечивается через правильное использование стилей, которые не мешают работе скринридеров и других вспомогательных технологий. Основные подходы:

1. Семантическая вёрстка – стилизация должна дополнять, а не заменять семантику HTML (например, button вместо div с обработчиком клика).

2. Контрастность – соблюдение минимального соотношения 4.5:1 для текста (WCAG):

.button {
  color: #fff;
  background: #0056b3; /* Соотношение ~5.7:1 */
}

3. Focus-стили – обязательная визуализация фокуса для клавиатурной навигации:

a:focus, button:focus {
  outline: 2px solid #4d90fe;
}

4. Скрытие элементов – используйте методы, сохраняющие доступность:

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

5. Псевдоэлементы – добавляйте ARIA-атрибуты, если псевдоэлементы несут смысловую нагрузку.

Важно тестировать стили с отключённым CSS и с помощью скринридеров.