Перед публикацией сайта есть вопрос более важный, чем то, насколько впечатляюще выглядит hero:

Действительно ли им может пользоваться каждый?

Недостаточно, чтобы сайт хорошо выглядел на мобильном.

Недостаточно, чтобы он быстро загружался.

Недостаточно сильной визуальной концепции.

И недостаточно пройти автоматический аудит.

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

Это и есть веб-доступность.

И о ней нужно думать с первого эскиза.

По данным Всемирной организации здравоохранения, более 1,3 миллиарда человек, около 16 % населения мира, живут со значимой инвалидностью.

Но доступность касается не только людей, которые идентифицируют себя как люди с инвалидностью.

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

Поэтому возникает другой вопрос:

Мы проектируем для идеальной ситуации или для реальных людей?

Результаты WebAIM Million 2026 очень показательны.

В анализе одного миллиона главных страниц 83,9 % имели выявляемые проблемы с недостаточным контрастом. У 53,1 % изображений отсутствовал альтернативный текст, а 51 % страниц содержали поля форм без корректных подписей.

Это не футуристические проблемы.

Доступность часто нарушается из-за очень простых решений:

Текст с недостаточным контрастом.

Кнопка, которой нельзя пользоваться с клавиатуры.

Информационное изображение без альтернативы.

Форма без понятных инструкций.

Анимация, игнорирующая предпочтения пользователя.

Хорошая новость в том, что многие из этих решений находятся непосредственно под нашим контролем.

“

Многие улучшения доступности начинаются с очень простых решений в дизайне.

WCAG 2.2 организует доступность вокруг четырёх принципов:

Воспринимаемость

Информация должна быть доступна для восприятия.

Управляемость

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

Понятность

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

Надёжность

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

Это может звучать технически.

Для нас это также отличный инструмент дизайна:

Можно ли это воспринять?

Можно ли этим пользоваться?

Можно ли это понять?

Работает ли это на самом деле?

Контраст — это вопрос доступности, но также и решение визуальной концепции.

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

WCAG 2.2 устанавливает минимальное соотношение контраста 4,5:1 для обычного текста на уровне AA и 3:1 для крупного текста.

Градиенты, прозрачность, изображения, glassmorphism и анимированные фоны могут прекрасно работать, если важная информация остаётся читаемой.

Есть ещё один очень полезный тест:

отключите мышь.

Используйте только Tab, Shift + Tab, Enter, Space и клавиши со стрелками.

Можно ли добраться до всех элементов управления?

Понятно ли, где вы находитесь?

Можно ли открыть и закрыть меню?

Заполнить форму?

Закрыть модальное окно?

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

Навигация — это тоже дизайн.

Важная информация должна оставаться контентом.

Заголовок, превращённый в изображение, может выглядеть эффектно, но обычный текст лучше адаптируется к предпочтениям пользователя, может увеличиваться и копироваться и может интерпретироваться вспомогательными технологиями.

Творчество должно подчёркивать контент, а не прятать его.

То же касается изображений.

Не каждому изображению нужно длинное описание.

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

Для декоративной текстуры можно использовать alt="".

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

Вопрос не в том:

«Добавили ли мы alt?»

А в том:

«Какую роль играет это изображение?»

Формы требуют такого же внимания.

Понятные подписи.

Понятные инструкции.

Ясное обозначение обязательных полей.

Полезные сообщения об ошибках.

Логичный порядок.

И прежде всего:

Более простой интерфейс часто оказывается и более доступным.

Сайт не должен зависеть от одного конкретного способа просмотра.

Что происходит при увеличении текста?

При узком окне?

При увеличении масштаба?

При изменении размера шрифта?

WCAG 2.2 включает специальные критерии для масштабирования текста и reflow, чтобы контент мог адаптироваться без потери информации или функциональности.

Также существует критерий Target Size (Minimum), который в применимых случаях устанавливает минимальный размер интерактивной области 24 × 24 CSS-пикселя.

Это не только вопрос соответствия стандарту.

Это хорошая практика для мобильных устройств.

Слишком маленькая кнопка может раздражать любого пользователя.

“

Дизайн должен адаптироваться к пользователю, а не заставлять пользователя адаптироваться к дизайну.

Мы любим анимацию.

Частицы.

Эффекты scroll.

Движение, когда оно создаёт ритм, иерархию или характер.

Но больше движения не означает автоматически лучший дизайн.

Анимация может выглядеть великолепно и при этом быть некомфортной для некоторых людей.

Поэтому мы учитываем prefers-reduced-motion, когда движение не является необходимым.

Вопрос должен быть не только:

«Можем ли мы это анимировать?»

Но и:

«Что даёт эта анимация и что произойдёт, если человеку нужно меньше движения?»

Добавление aria-label само по себе не делает интерфейс доступным.

ARIA может быть очень полезна.

Но она не заменяет семантический HTML, логичную структуру, правильно построенные элементы управления и последовательную навигацию.

Сначала:

Надёжная структура.

Затем:

ARIA там, где она действительно приносит пользу.

Доступность — это не коллекционирование атрибутов.

Это создание интерфейса, который имеет смысл.

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

Аудиты полезны для поиска проблем.

Но отсутствие автоматических ошибок не доказывает, что сайт доступен.

Проверка человеком остаётся необходимой.

Это самая важная часть для нас.

Мы не хотим создавать красивые сайты, которые работают только для человека, который их разработал.

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

Поэтому доступность для нас — не дополнительная опция.

Она часть процесса.

Мы учитываем её при выборе цветов.

При создании компонентов.

При разработке форм.

При создании навигации.

При добавлении анимаций.

При подготовке изображений.

При адаптации интерфейса.

И при проверке проекта перед публикацией.

Наша цель ясна:

Мы работаем над тем, чтобы сделать собственный сайт на 100 % доступным.

Не как значок.

Не как виджет.

Не как одноразовый аудит.

Доступность — это постоянный процесс.

Каждый новый раздел может создать новую проблему.

Каждый новый компонент может потерять фокус.

Каждая новая анимация может добавить слишком много движения.

Каждому новому изображению может понадобиться другая альтернатива.

Поэтому мы проверяем, тестируем и улучшаем.

И эту же философию мы хотим применять к проектам, которые создаём для клиентов.

Доступный сайт не обязан быть скучным.

Он может быть редакционным.

Экспериментальным.

Динамичным.

Он может использовать halftones.

Частицы.

Крупную типографику.

Градиенты.

Изображения.

Motion.

Сильную арт-дирекцию.

Вопрос в другом:

Может ли человек выбирать, как именно он взаимодействует с сайтом?

Может ли читать?

Навигировать?

Понимать?

Взаимодействовать?

Использовать клавиатуру?

Увеличивать текст?

Уменьшать движение?

Понимать элементы управления?

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

Они становятся одним:

Хорошим дизайном.

Чем раньше мы интегрируем доступность, тем проще сделать всё правильно.

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

Когда доступность становится частью процесса с самого начала, мы можем принимать лучшие решения с первого дня.

Мы можем выбрать достаточный контраст.

Создать состояния фокуса.

Сделать компоненты удобными для клавиатуры.

Учитывать предпочтения движения.

Правильно подготовить изображения.

И сохранить сильную визуальную идентичность, не превращая её в барьер.

“

Доступность не ограничивает творчество. Плохое планирование — да.