Что входит в технику Accessibility?

Что входит в технику Accessibility (a11y)

Accessibility — это практика разработки веб-приложений так, чтобы они были доступны для всех пользователей, включая людей с ограниченными возможностями. Это не просто хорошее намерение, а юридическое требование (WCAG, ADA) и бизнес-практика, которая расширяет аудиторию.

Семантический HTML

Основой доступности является правильная семантика:

<!-- ❌ Неправильно: div вместо button -->
<div onclick="handleClick()" role="button">Нажми меня</div>

<!-- ✅ Правильно: семантический элемент -->
<button onclick="handleClick()">Нажми меня</button>

Используй правильные теги:

• <button>, <a> для интерактивных элементов
• <header>, <nav>, <main>, <footer> для структуры
• <label> для текстовых полей
• <h1>, <h2>, <h3> для заголовков

ARIA-атрибуты

Когда семантики недостаточно, используй ARIA (Accessible Rich Internet Applications):

<!-- Роли -->
<div role="alert" aria-live="polite">Ошибка загрузки</div>

<!-- Состояния -->
<button aria-expanded="false" aria-controls="menu">
  Меню
</button>

<!-- Описания -->
<input aria-label="Поиск по сайту" type="search" />
<img src="photo.jpg" alt="Описание изображения" />

Навигация с клавиатуры

• Tab: навигация между элементами
• Enter/Space: активация кнопок
• Стрелки: навигация в меню

function useKeyboardNavigation() {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleActivate();
    }
  };
  return { handleKeyDown };
}

Контрастность и читаемость

• Минимум 4.5:1 для обычного текста (WCAG AA)
• 3:1 для крупного текста
• Не полагайся только на цвет (используй иконки, текст, узоры)

Фокус и индикаторы

/* Видимый фокус для клавиатурной навигации */
button:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* ❌ Не удаляй outline без замены! */
button:focus {
  outline: none; /* Bad! */
}

Изображения и мультимедия

• alt текст для всех изображений
• Субтитры для видео
• Транскрипции для аудио
• Описания для сложных диаграмм

Формы

<!-- ✅ Связь label с input -->
<label for="email">Email:</label>
<input id="email" type="email" name="email" />

<!-- Валидация доступна -->
<input 
  aria-describedby="email-error" 
  aria-invalid="true"
/>
<span id="email-error">Некорректный email</span>

Движение и анимация

Уважай пользовательские предпочтения:

/* Отключи анимацию если пользователь предпочитает -->
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Структура страницы

• Один <h1> на странице
• Логическая иерархия заголовков (h1 → h2 → h3)
• Каждой форме — <legend>
• Используй <table> для табличных данных

Тестирование доступности

• WAVE — браузерное расширение
• axe DevTools — автоматические проверки
• Screen Reader (VoiceOver, NVDA) — ручное тестирование
• Lighthouse — в DevTools

Доступность — это не микрофункция, а фундаментальный принцип дизайна и разработки.