Доступность веб-сайтов: WCAG, ARIA и инклюзивный дизайн

Что такое доступность веб-сайтов?

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

По данным ВОЗ, 15% населения мира живёт с какой-либо формой инвалидности. Недоступные сайты исключают этих пользователей.

Доступность веб-сайтов — это не только этическое обязательство, но и может быть юридическим требованием. Многие страны (США, ЕС, Великобритания) приняли законы о доступности.

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

Стандарты WCAG

WCAG (Web Content Accessibility Guidelines) — стандарт доступности веб-контента, опубликованный W3C. Построен на четырёх основных принципах: Воспринимаемый, Управляемый, Понятный, Надёжный (POUR).

Воспринимаемый (Perceivable): Информация и компоненты UI должны быть представлены так, чтобы пользователи могли их воспринять. Alt text, контраст цветов, текстовые альтернативы.

Управляемый (Operable): Компоненты UI и навигация должны быть управляемыми. Навигация с клавиатуры, достаточное время, избегание контента, вызывающего судороги.

Понятный (Understandable): Информация и работа UI должны быть понятны. Читаемый текст, предсказуемое поведение, помощь при вводе.

Надёжный (Robust): Контент должен быть достаточно надёжным, чтобы интерпретироваться различными user agents. Семантический HTML, роли ARIA.

Уровень AA WCAG 2.1 — стандарт для большинства юридических требований. Уровень AAA — наивысший уровень доступности, но не требуется для всего контента.

Роли и свойства ARIA

ARIA (Accessible Rich Internet Applications) — атрибуты, добавляемые к HTML для улучшения доступности динамического веб-контента. role, aria-label, aria-hidden и др.

Атрибут role определяет назначение элемента: role="navigation", role="button", role="dialog". Скринридеры используют эту информацию для озвучивания контента.

aria-label определяет доступное имя элемента. Критично для кнопок-иконок без визуального текста: <button aria-label="Закрыть меню">X</button>.

aria-hidden="true" скрывает декоративные элементы от скринридеров. Используется для чисто визуальных иконок и отступов.

aria-live уведомляет скринридеры о динамически обновляемом контенте. Уведомления озвучиваются с role="alert" или aria-live="polite".

Важно: Первое правило ARIA — 'Используйте нативные HTML-элементы, когда это возможно.' Не используйте <div role="button"> вместо <button>.

Советы по инклюзивному дизайну

Контраст цветов: Обеспечьте достаточный контраст между текстом и фоном. WCAG AA требует 4.5:1 для обычного текста, 3:1 для крупного.

Навигация с клавиатуры: Все интерактивные элементы (ссылки, кнопки, формы) должны быть доступны с клавиатуры. Навигация по Tab, активация по Enter/Space.

Alt text: Добавьте описательный alt text ко всем значимым изображениям. Используйте alt="" (пустой) для декоративных изображений.

Labels форм: Используйте элемент <label> для каждого input формы. Текст placeholder не заменяет labels. Связывайте сообщения об ошибках с aria-describedby.

Индикатор focus: Элемент с focus должен быть видимым при навигации с клавиатуры. Не используйте outline: none.

Семантический HTML: Используйте правильные HTML-элементы: <nav>, <main>, <article>, <aside>, <header>, <footer>. Правильно используйте иерархию заголовков (h1-h6).

Тестирование и оценка

Автоматизированные инструменты тестирования: axe DevTools, Lighthouse Accessibility audit, WAVE. Обнаруживают распространённые проблемы, но не все.

Ручное тестирование: Навигируйте всю страницу с клавиатуры. Тестируйте со скринридером (NVDA, VoiceOver, TalkBack). Проверяйте с симуляцией цветовой слепоты.

Пользовательское тестирование: Тестируйте с реальными пользователями с инвалидностью. Автоматизированные инструменты и ручное тестирование не полностью отражают реальный пользовательский опыт.

Аудит доступности: Закажите профессиональный аудит доступности. Получите отчёт о соответствии WCAG и дорожную карту улучшений.

Инструменты доступности Utilgo

Utilgo предлагает проверку контраста цветов, генератор alt text и инструменты аудита доступности. Все инструменты работают в браузере.

Страница инструмента: utilgo.net/ru/web/proverka-kontrasta-cvetov