IT Довідник

Українська

Русский
English

Українська

Русский
English

Appearance

Основные понятия WCAG (Web Content Accessibility Guidelines) ​

1. Принципы доступности ​

WCAG основан на четырех основных принципах, сокращенно POUR:

  1. Perceivable (Воспринимаемость) – контент должен быть доступен для всех органов чувств пользователя (зрение, слух, осязание).
  2. Operable (Управляемость) – интерфейс и навигация должны быть удобны для использования всеми пользователями.
  3. Understandable (Понимаемость) – информация и интерфейс должны быть понятными и предсказуемыми.
  4. Robust (Надежность) – контент должен корректно работать с различными технологиями, включая вспомогательные устройства.

2. Уровни соответствия WCAG ​

WCAG имеет три уровня соответствия:

  • A (минимальный) – базовые требования для доступности.
  • AA (рекомендуемый) – расширенные требования, соответствующие большинству юридических норм.
  • AAA (высший) – строгие требования, применимые к контенту с высокой степенью доступности.

3. Ключевые рекомендации ​

3.1. Текстовые альтернативы ​

Требование: Все нефоновые изображения должны иметь текстовые описания.

html
<img src="example.jpg" alt="Описание изображения">

Примечание: Исключения возможны для декоративных изображений (alt="").

3.2. Контрастность ​

Требование: Минимальный контраст текста и фона – 4.5:1 (для обычного текста) и 3:1 (для крупного текста).

Пример достаточного контраста:

css
body {
  color: #000; /* Черный текст */
  background-color: #FFF; /* Белый фон */
}

Пример плохого контраста:

css
body {
  color: #AAA;
  background-color: #FFF;
}

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

Требование: Весь контент должен быть доступен без мыши.

Пример корректного фокуса:

css
a:focus, button:focus {
  outline: 2px solid blue;
}

3.4. Использование ARIA-атрибутов ​

Требование: ARIA-атрибуты помогают улучшить доступность для экранных дикторов.

Пример применения:

html
<button aria-label="Закрыть окно">✖</button>

3.5. Управление всплывающим контентом ​

Требование: Всплывающие окна должны быть доступны с клавиатуры и озвучиваться экранными дикторами.

Пример:

html
<div role="dialog" aria-labelledby="dialog-title" tabindex="-1">
  <h2 id="dialog-title">Диалоговое окно</h2>
</div>

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

4.1. Автоматизированные инструменты ​

  • axe DevTools (расширение для браузера)
  • WAVE (онлайн-анализатор)
  • Lighthouse (встроен в Chrome DevTools)

4.2. Ручное тестирование ​

  • Проверка с клавиатуры (Tab, Shift+Tab, Enter, Esc)
  • Тестирование с экранным диктором (NVDA, VoiceOver, JAWS)
  • Изменение размеров текста и использование высококонтрастных тем

Заключение ​

Соблюдение стандартов WCAG помогает сделать веб-контент доступным для всех пользователей, включая людей с ограниченными возможностями. Следование рекомендациям улучшает юзабилити и юридическую соответствие сайта.

Создавайте доступные интерфейсы! 🚀