Все люди выбирают сайты глазами. Визуал — первое, с чем сталкивается человек, открывая любой сайт в интернете.

Но визуальная часть — это поверхность. Под ней: программный код, семантическая вёрстка, скорость загрузки, доступность для скринридеров, логика индексации поисковиками, навигация, оптимизация. Внешний вид опирается на невидимую глазу основу.

Один из факторов, от которого зависит место сайта в выдаче — выполнение требований «доступности». Эти требования часто вступают в противоречие с требованиям заказчиков к дизайну. 

Разберемся с терминами

Аксессибилити (англ. Accessibility, A11y) — это «доступность» цифрового продукта. Аксессибилити дает возможность людям с ограничениями зрения, слуха или моторики использовать сайты так же, как и людям без ограничений.

Есть международный стандарт WCAG (Web Content Accessibility Guidelines / Руководство по обеспечению доступности веб-контента) — это стандарт веб-доступности, разработанный консорциумом W3C. Он определяет, как сделать цифровой контент (сайты, приложения) удобным для людей с ограничениями зрения, слуха, моторики или когнитивных функций. 

Сейчас, в 2026 году действует версия WCAG 2.2. К 2028–2029 году ожидается релиз WCAG 3.0.

Заказчик сайта против WCAG: почему требования к дизайну нервируют разработчиков сайтов 

Так в чём проблема? 

Если кратко, то проблема в том, что требования заказчиков к дизайну нарушают или не позволяют выполнить требования аксессибилити.

Очень часто заказчики требуют ввести элементы, которые будут хорошо смотреться в буклетах, но плохо в интерфейса браузера. Например, могут потребовать в дизайне:

• слишком тонкий шрифт
• слишком светлый шрифт
• маленькие кнопки, светлые стрелки
• очень светлый фон, на котором выведен неконтрастный шрифт
• динамические слайдеры
• анимационные элементы
• нестандартную сетку
• и т.д.

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

Основные ошибки в дизайне

Пройдём по основным, повторяющимся ошибкам в дизайне.

Ошибка №1. Низкая контрастность текста и фона 

Дизайнеры стремятся к «легким» интерфейсам. В моде минимализм: скрытые меню, иконки без подписей, бледные цвета. 

Пользователям с когнитивными нарушениями (и тем, у кого их нет) или пожилым людям нужна максимальная понятность: текст на кнопках, понятные списки и отсутствие лишних кликов.

Решение

Достигайте порядка и визуальной чистоты через продуманную информационную иерархию. Посмотрите на любую книгу и возьмите подход в качестве примера. В книге есть содержание, заголовки, подзаголовки, текст, иллюстрации. У 90% книг текст будет контрастен фону страницы.

Ошибка №2. Типографика против читаемости

Да, использование декоративных, тонких или нестандартных шрифтов делает сайт уникальным. Однако для людей с дислексией или нарушениями зрения весь контент превращается в нечитаемый текст.

Решение

Выбирайте шрифты с правильным межстрочным интервалом, возможностью масштабирования. Проверяйте на разных размерах.

Мы, например, используем стандартные, проверенные шрифты Google Fonts. 

Ошибка №3. Полагаться на фирстиль

Фирменная палитра компании может иметь слабый контраст, например, светло-серый текст на белом фоне. Для пользователей с нарушениями цветовосприятия, например с дальтонизмом, такой текст будет сливаться с фоном.

Решение

Проверяйте цвета на соответствие стандарту WCAG. Текст должен быть достаточно тёмным и максимально контрастным (или светлым) по отношению к фону.

Ошибка №4. Сложная вёрстка и анимация

Дизайнеры часто включает нестандартную сетку, динамические элементы. Например, всеми любимы слайдеры заставляют страницу «прыгать». Динамическая анимация, «выезжающие " или иконки мешает пользователям.

Для выполнения требований аксессибилити сайт должен быть предсказуемым, управляемым с клавиатуры. Это значит, что скринридер может понять действия пользователя. Например, вы заполняете формы и кликаете не мышкой на кнопку, а нажимаете на клавиатуре „enter“.

Скринридер (экранный диктор) — это программа, которая озвучивает голосом всё, что происходит на экране компьютера или смартфона. Она создана для незрячих и слабовидящих людей, позволяя им полноценно пользоваться техникой, читать сайты и работать в приложениях.

Решение

Откажитесь от чрезмерной анимации.

Добавляйте скрытые вспомогательные элементы (ARIA-тегов). Для кнопки-иконки (например, крестика закрытия или корзины) ARIA-атрибуты обязательны, так как внутри неё нет обычного текста, который скринридер мог бы прочитать.

4 основных принципа WCAG для сайта

Любой интерфейс по стандартам WCAG должен соответствовать четырем критериям, которые легко проверить, если задаться несколькими вопросами:

1. Легко ли прочитать текст на любом элементе человеку с плохим зрением? А если посмотреть этот контент на мобильном телефоне?
2. Удобно ли попасть в навигационные элементы? 
3. Работают ли навигационные элементы с клавиатуры?
4. Проходит ли сайт техническую проверку?

№1. Воспринимаемость (Perceivable)

Органы чувств: контент должен быть виден и слышен.

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

Как это сделать на сайте

Адаптивность верстки: Контент должен сохранять смысл, порядок чтения и структуру при изменении масштаба (до 200%), подстраиваясь под любые экраны (десктоп, мобильные). Т.е. текст не должен иметь горизонтальной прокрутки.

При сильном увеличении масштаба (200%+) красивые широкоформатные баннеры, сложные коллажи и декоративные фоны неизбежно смещаются или обрезаются. Задача разработчиков — сделать так, чтобы при этом не перекрывался и не пропадал сам текст.

Цветовая контрастность: Текст должен быть достаточно контрастным по отношению к фону (коэффициент обычного текста (до 18pt) должен быть не менее 4,5:1 крупного текста (от 18 pt) — 3:1, нетекстовые элементы (такие как иконки, границы полей, — контрастность не менее 3:1). 

Текст: 

• Разбивайте большие блоки текста на несколько абзацев, выравнивайте по левому краю.   
• Основной шрифт должен быть не менее 14–16 px (Arial, Verdana, Georgia, Times New Roman), межстрочный интервал — 1,5.
• Используйте теги заголовков (от Н1 до H6) для создания четкой иерархии документа и уровней заголовков. 
• Ссылки и кнопки должны иметь текст, четко объясняющий, куда они ведут. 
• Используйте описательные заголовки и названия, поскольку они помогают читателю ориентироваться в браузере и на странице. 
• Используйте нумерованные и маркированные списки.

Текстовые альтернативы: Картинки, графики, иконки должны иметь текстовое описание (атрибут alt), для использования специальных программ озвучивания с экрана.

Аудио и видео: Добавьте субтитры, расшифровки или описания к аудио- и видеоконтенту, не используйте мерцающие или мигающие элементы. 

Таблицы: Предваряйте таблицы вводным текстом, так как не все программы чтения с экрана заранее оповещают о наличии таблицы. Не используйте таблицы, если это не лучший способ представления информации. Таблицы сложны для восприятия программами чтения с экрана. 

№2. Управляемость (Operable)

Интерфейс: сайтом можно управлять без мыши и без спешки.

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

Как это сделать на сайте

Должна быть «доступность» с клавиатуры, режим переключения версии для слабовидящих. Не должно быть движущихся элементов, или виджетов, которыми нельзя управлять.

№3. Понятность (Understandable)

Логика: интерфейс предсказуем, а тексты ясны. 

Информация и логика работы созданного интерфейса должны быть понятны любому пользователю.

Как это сделать на сайте

• Язык контента должен быть программно определен в вёрстке.
• Навигация при клике на элементы страниц не должна менять свое место. Такие элементы, как, например, «корзина», «поиск», должны быть одинаково оформлены и расположены на всех страницах сайта.
• Все формы должны предоставлять понятные подсказки и давать возможность отменять, проверять или сохранять отправку важных данных.

№4. Надежность (Robustness)

Код: сайт дружит с технологиями и скринридерами.

Программный код должен быть технически «чистым», чтобы сайт корректно работал на любых устройствах и считывался скринридерами.

Ради сложных визуальных эффектов, 3D-анимаций или нестандартных слайдеров разработчикам приходится жертвовать структурой кода. В итоге сайт выглядит эффектно, но превращается в «белый лист» и кашу из звуков для программ экранного доступа и поисковых роботов.

Как это сделать на сайте

• Откажитесь от ненужных визуальных эффектов.
• Потребуется тщательная проработка «технической части» (семантическая верстка, валидный HTML и CSS, использование атрибутов WAI-ARIA).

Финансовые потери от «недоступного» сайта

Выше мы писали о том, почему «доступность» важна.

На одной чаше весов у вас «красота», а на второй  — видит ли ваш сайт поисковая система, остаются ли на сайте посетители.

• Люди с нарушениями зрения, моторики или дислексией просто уйдут к конкурентам, чей сайт более удобен.
• Поисковые роботы (особенно Google) оценивают структуру сайта так же, как скринридеры. Плохая семантика и отсутствие alt -текстов ухудшают позиции сайта в выдаче.

Пока у нас только вводятся требования к сайтам образовательных, медицинских, финансовых и государственных организаций. В США действует закон ADA, в Евросоюзе — European Accessibility Act: за недоступные сайты коммерческих компаний предусмотрены огромные судебные иски, штрафы и блокировки. 

За 2025 год в США было подано более 5 000 исков за цифровую доступность, а динамика 2026 года прогнозирует рекордный рост до 6 100 дел. Испания ввела штрафы до 1 млн евро, Германия — 100 тыс евро, а Ирландия пошла дальше и ввела уголовную ответственность с лишением свободы на срок до 18 месяцев.

Автор статьи:

Евгения Мирошкина

Руководитель проектов по разработке сайтов

Редактор статьи:

Инга Соколова

Редактор, автор, контент-редактор