Что такое доступность интерфейсов?

Доступность интерфейсов (Accessibility, a11y) — принцип проектирования для всех пользователей

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

Основные категории доступности

1. Зрительная доступность

Для пользователей с нарушениями зрения (слепота, низкое зрение, дальтонизм):

<!-- ❌ Плохо —нет alt-текста -->
<img src="user.png">

<!-- ✅ Хорошо — описательный alt -->
<img src="user.png" alt="Фото профиля пользователя John Doe">

<!-- ❌ Плохо — недостаточный контраст -->
<p style="color: #999; background: #f0f0f0;">Важный текст</p>

<!-- ✅ Хорошо — контраст не менее 4.5:1 -->
<p style="color: #222; background: #fff;">Важный текст</p>

2. Моторная доступность

Для пользователей, которые не могут использовать мышь:

<!-- ❌ Плохо — невозможно активировать клавиатурой -->
<div onclick="handleClick()" style="cursor: pointer;">Нажми</div>

<!-- ✅ Хорошо — семантический элемент -->
<button onclick="handleClick()">Нажми</button>

<!-- ❌ Плохо — нет видимого фокуса -->
<button>Кнопка</button>

<!-- ✅ Хорошо — виден фокус -->
<button style="outline: 2px solid blue; outline-offset: 2px;">Кнопка</button>

3. Слуховая доступность

Для пользователей с нарушениями слуха:

<!-- ❌ Плохо — видео без субтитров -->
<video src="tutorial.mp4"></video>

<!-- ✅ Хорошо — с track для субтитров -->
<video src="tutorial.mp4">
  <track kind="captions" src="subtitles.vtt" srclang="ru" label="Русский">
</video>

4. Когнитивная доступность

Для пользователей с когнитивными нарушениями:

<!-- ✅ Хорошо —простой и понятный язык -->
<!-- ✅ Логичная структура с заголовками -->
<h1>Основная информация</h1>
<section>
  <h2>Раздел 1</h2>
  <p>Описание в два предложения.</p>
</section>

<!-- ✅ Последовательная навигация -->
<!-- ✅ Ясные сообщения об ошибках -->

ARIA (Accessible Rich Internet Applications)

Добавляет семантику для скринридеров:

<!-- ❌ Плохо — без роли -->
<div class="toggle">Показать/скрыть</div>

<!-- ✅ Хорошо — с ARIA атрибутами -->
<button 
  aria-pressed="false" 
  aria-label="Показать детали"
  onclick="this.setAttribute('aria-pressed', 'true')">
  Показать/скрыть
</button>

<!-- Другие важные ARIA атрибуты -->
<div role="alert" aria-live="polite">Ошибка при загрузке</div>
<nav aria-label="Основная навигация"></nav>
<form aria-describedby="error-message"></form>
<div id="error-message">Заполните обязательные поля</div>

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

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

<!-- ❌ Плохо — неправильная семантика -->
<div class="button" onclick="submit()">Отправить</div>
<div class="heading">Заголовок</div>
<div class="list-item">Пункт</div>

<!-- ✅ Хорошо — семантические элементы -->
<button>Отправить</button>
<h1>Заголовок</h1>
<li>Пункт</li>

<!-- Структурные элементы -->
<header>Шапка</header>
<nav>Навигация</nav>
<main>Основной контент</main>
<article>Статья</article>
<aside>Боковая панель</aside>
<footer>Подвал</footer>

Практические примеры для React

// ✅ Хорошо — доступная форма
function LoginForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email) {
      setError('Email обязателен');
      inputRef.current?.focus();
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        ref={inputRef}
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        aria-invalid={error ? 'true' : 'false'}
        aria-describedby={error ? 'error-message' : undefined}
      />
      {error && <div id="error-message" role="alert">{error}</div>}
      <button type="submit">Войти</button>
    </form>
  );
}

// ✅ Хорошо — доступный модальный диалог
function Modal({ isOpen, title, onClose, children }) {
  return (
    <dialog open={isOpen} aria-labelledby="dialog-title">
      <h2 id="dialog-title">{title}</h2>
      {children}
      <button onClick={onClose} aria-label="Закрыть диалог">✕</button>
    </dialog>
  );
}

Инструменты тестирования

1. Lighthouse — встроен в Chrome DevTools
2. WAVE — расширение браузера для проверки доступности
3. axe DevTools — мощный инструмент для поиска проблем
4. Screen readers — NVDA (бесплатно), JAWS (платно)
5. Keyboard navigation — используйте Tab, Enter, Arrow keys

WCAG 2.1 стандарты

• A — базовый уровень доступности
• AA — рекомендуемый уровень (контраст 4.5:1, размер текста ≥14px)
• AAA — усиленный уровень (контраст 7:1)

Частые ошибки

1. Игнорирование клавиатурной навигации
2. Отсутствие alt-текста на изображениях
3. Недостаточный контраст цветов
4. Отсутствие labels на input полях
5. Использование только цвета для передачи информации
6. Автоматическое проигрывание аудио/видео
7. Малый размер кликаемых элементов (менее 44x44px)

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