Доступность сайта означает, что им могут пользоваться люди с нарушениями зрения, слуха, моторики или внимания и все, кто оказался в неудобных условиях: на ярком солнце, с одной свободной рукой, при слабом интернете. Ориентир – стандарт WCAG с уровнями A, AA, AAA; для большинства сайтов реалистичная цель – уровень AA. Базовые вещи: контраст, клавиатура, подписи, структура, alt-тексты.
Коротко
- WCAG опирается на четыре принципа (воспринимаемость, управляемость, понятность, надежность) и три уровня соответствия: A, AA, AAA.
- Уровень AA чаще всего берут за ориентир в нормативных документах и требованиях заказчиков.
- Основа: достаточный контраст, увеличение текста, alt-тексты, правильные заголовки, подписи полей, полная работа с клавиатуры.
- Автоматические проверки находят часть проблем; ручная проверка клавиатурой, масштабом и программой чтения с экрана дополняет их.
- Требования закона зависят от страны и сферы, поэтому актуальные правила уточняйте у юриста.
- Доступность закладывают в дизайн и шаблон, потому что исправлять готовый сайт обычно сложнее.
Для кого нужна доступность
Доступность полезна более широкому кругу людей, чем кажется на первый взгляд.
- Зрение: незрячие и слабовидящие пользователи, люди с дальтонизмом.
- Слух: глухие и слабослышащие; видео без субтитров для них закрыто.
- Моторика: управление клавиатурой, голосом или переключателем, тремор рук.
- Внимание и восприятие: дислексия, нарушения внимания, усталость.
- Ситуативные ограничения: травмированная рука, яркое солнце, шум, слабый интернет, маленький экран.
- Старший возраст: мелкий шрифт и низкий контраст создают трудности.
Для бизнеса это означает более широкую аудиторию, меньше потерянных заказов и удобство для всех посетителей. Часть требований совпадает с практикой SEO: логичные заголовки, описательные alt-тексты, понятные ссылки. Это помогает поисковым системам понимать страницу, хотя гарантий позиций доступность не дает.
Что такое WCAG: принципы и уровни
WCAG (Web Content Accessibility Guidelines) – международные рекомендации консорциума W3C. Широко используются версии 2.1 и 2.2; каждая новая версия дополняет предыдущую. Требования сгруппированы по четырем принципам.
| Принцип | Что означает | Примеры требований |
|---|
| Воспринимаемость | Информацию можно воспринять разными способами | Alt-тексты, субтитры, достаточный контраст |
| Управляемость | Интерфейсом можно управлять разными способами | Работа с клавиатуры, видимый фокус, достаточно времени |
| Понятность | Текст и поведение сайта предсказуемы | Подписи полей, понятные ошибки, язык страницы |
| Надежность | Контент работает в разных браузерах и вспомогательных технологиях | Семантическая разметка, правильные роли элементов |
Каждое требование имеет уровень: A – базовый минимум, AA – основной практический уровень, AAA – самый высокий, его обычно применяют к отдельным элементам. Для типичного сайта компании или магазина разумная цель – уровень AA.
Базовый список проверки
Цвет, контраст и текст
- Контраст обычного текста с фоном – не менее 4,5 к 1, крупного текста – 3 к 1 (уровень AA); рамки полей и иконки тоже требуют 3 к 1.
- Информация передается не одним цветом: ошибка имеет текст и значок в дополнение к красному.
- Текст увеличивается до 200% без потери содержимого; на экране шириной около 320 пикселей нет горизонтальной прокрутки.
Клавиатура и фокус
- Меню, кнопки, формы, модальные окна и слайдеры управляются клавишами Tab, Enter, пробел, Esc.
- Текущий фокус хорошо виден; рамку выделения не убирают без качественной замены.
- Ссылка-пропуск в начале страницы ведет к основному содержимому, и весь список меню проходить не требуется.
- Порядок фокуса совпадает с визуальным порядком.
Структура страницы
- Один заголовок H1, далее H2 и H3 без пропусков в иерархии.
- Семантические элементы (header, nav, main, footer), списки, кнопки для действий и ссылки для переходов.
- Язык страницы указан атрибутом lang, на многоязычном сайте отдельно для каждой версии.
- Заголовки вкладок (title) уникальны, тексты ссылок понятны вне контекста.
Изображения, видео и движение
- Alt-текст коротко передает смысл или функцию изображения; декоративные изображения имеют пустой alt.
- У видео есть субтитры, у аудио – стенограмма; автозапуск со звуком отключен.
- Анимацию можно остановить, сайт учитывает системную настройку уменьшения движения; элементы, мигающие чаще трех раз в секунду, не используются.
Формы
- Каждое поле имеет связанную подпись (label); placeholder используют для примера.
- Ошибки описаны текстом рядом с полем и подсказывают, как исправить.
- Атрибут autocomplete подсказывает браузеру тип данных: имя, e-mail, телефон.
- Цели для нажатия достаточно крупные: WCAG 2.2 уровня AA задает минимум 24 на 24 CSS-пикселя с некоторыми исключениями, для пальца удобнее больше.
Читабельность текста
- Короткие абзацы и предложения, списки вместо сплошного полотна текста.
- Расшифрованные сокращения и объясненные специальные термины.
- Выравнивание по левому краю и свободный межстрочный интервал.
- Ссылки выделены подчеркиванием или другим признаком, кроме цвета.
Мобильные устройства
- Масштабирование страницы пальцами разрешено, сайт работает в обеих ориентациях экрана.
- Между кнопками и ссылками есть отступы, чтобы не нажать соседний элемент.
- Жесты (свайп, перетаскивание) имеют альтернативу в виде кнопок.
- Всплывающие окна и баннеры не закрывают основное содержимое и закрываются понятной кнопкой.
Как проверить доступность самостоятельно
- Пройдите ключевые страницы только клавиатурой: Tab, Shift+Tab, Enter, пробел, Esc. Фокус должен быть видимым и нигде не застревать.
- Увеличьте масштаб страницы до 200% и откройте сайт на узком экране телефона.
- Измерьте контраст текста и элементов интерфейса средством проверки контраста из инструментов разработчика браузера.
- Запустите автоматические проверки: Lighthouse, axe или WAVE. Они находят, например, отсутствующие alt-тексты и подписи полей, но содержательность текстов оценивает только человек.
- Прослушайте ключевые страницы программой чтения с экрана: NVDA или Narrator в Windows, VoiceOver на Mac и iPhone, TalkBack на Android.
- Пройдите форму заявки и оформление заказа, намеренно вызвав ошибки.
- Составьте список проблем по важности: сначала то, что блокирует действие (кнопка недоступна с клавиатуры), потом вопросы удобства.
Доступность и закон
Во многих странах требования к доступности закреплены законами и стандартами для государственного сектора и для отдельных частных сервисов. В ЕС действует европейский акт о доступности, который охватывает ряд продуктов и услуг, в том числе часть сервисов электронной коммерции. Требования, сроки и исключения зависят от страны, размера бизнеса и сферы, и правила меняются.
Если ваши клиенты находятся в ЕС, уточните у юриста, касаются ли эти требования вашего бизнеса. Полезно иметь на сайте короткое заявление о доступности и контакт, по которому можно сообщить о проблеме.
Как заложить доступность в проект
- Выберите шаблон или дизайн-систему с проверенными цветами, шрифтами и компонентами.
- Рассчитайте контраст палитры до начала верстки.
- Добавьте требования доступности в техническое задание и приемку работ.
- Обучите редакторов: alt-тексты, заголовки, понятные ссылки, субтитры.
- Проверяйте доступность после крупных обновлений, новых форм и виджетов.
- Виджеты-накладки поверх сайта, как правило, не устраняют причин проблем в коде; надежнее исправить разметку и дизайн.
Типичные ошибки
- Светло-серый текст на белом. Низкий контраст затрудняет чтение даже людям с хорошим зрением.
- Убранная рамка фокуса. Пользователь клавиатуры теряет ориентир на странице.
- Меню и кнопки, собранные из произвольных элементов. Они часто недоступны с клавиатуры.
- Формальные alt-тексты. Подписи вроде image1 или перечень ключевых слов ничего не объясняют.
- Формы без подписей. Программа чтения с экрана не сообщает, что вводить.
- Видео с автозапуском и без субтитров. Оно мешает одним и закрыто для других.
- Модальное окно без закрытия клавишей Esc. Пользователь клавиатуры застревает.
- Опора на один автоматический тест. Зеленая оценка еще не гарантирует удобства.
Вопросы и ответы
Обязателен ли WCAG для малого бизнеса?
Зависит от страны, сферы и рынков, на которых вы работаете. Для многих небольших сайтов WCAG служит практическим стандартом качества; правила меняются, поэтому актуальные требования уточните у юриста.
Какой уровень WCAG выбрать?
Для большинства сайтов – AA. Он охватывает основные потребности: контраст, клавиатуру, подписи, структуру. Уровень A полезен как первый этап, а уровень AAA применяют к отдельным элементам.
Достаточно ли автоматической проверки?
Нет, автоматические инструменты находят только часть проблем. Они оценивают наличие атрибутов, но содержательность alt-текста, логику порядка фокуса и понятность сообщений проверяет человек. Сочетайте инструменты с ручным прохождением.
Влияет ли доступность на SEO?
Часть практик совпадает: структура заголовков, описательные alt-тексты, понятные ссылки, скорость. Это помогает и людям, и поисковым системам. Прямой гарантии роста позиций доступность не дает.
Поможет ли виджет доступности, который добавляется одной строкой кода?
Такие накладки могут добавить вспомогательные функции, например увеличение шрифта, но обычно не исправляют причины проблем в разметке и дизайне. Надежнее исправить сам сайт.
Вывод
Доступность складывается из простых практик: достаточный контраст, полная работа с клавиатуры, подписи полей, логичная структура и понятные тексты. Их выгодно заложить на старте проекта и проверять после каждого обновления. Небольшие улучшения дают заметный эффект: больший контраст, видимый фокус и честные подписи полей обычно не требуют смены всего дизайна. Составьте небольшой список исправлений по приоритету и выполняйте его поэтапно. Уровень AA стандарта WCAG хорошо подходит как цель для большинства сайтов компаний и магазинов. Если нужна помощь, LightSEO может учесть эти требования при создании корпоративного сайта и проверить технические основы сайта в рамках SEO-аудита.
Читайте также
