European Accessibility Act — ликбез: что это и почему это важно

28 июня 2025 года вступил в силу European Accessibility Act (EAA). Я делаю аудиты для компаний, которые хотят соответствовать требованиям этого акта, и подумала, что можно провести краткий (и поверхностный) ликбез на эту тему здесь и дать практические советы, с чего начать.

Что это за акт?

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

Почему этот акт важен?

Это первый общий европейский закон, который обязывает быть доступным коммерческий сектор в Европе. Сюда относятся как сами европейские продукты и сервисы, так и их закупки. То есть условное приложение для детского рисования из Беларуси должно быть доступным, чтобы его купила школа в Германии. Исключение делается для совсем маленьких европейских компаний, где меньше 10 человек и оборот меньше 2 миллионов евро.

Как эту доступность обеспечить?

В двух словах - веб-сайты должны соответствовать WCAG 2.1, это стандарт цифровой доступности. В EAA добавлены свои нюансы, связанные с трансляциями, звонками и прочим, но 99% требований это соответствие WCAG 2.1.

Сложно ли это сделать?

В целом, сама доступность это не rocket science, но там есть довольно много мелких нюансов. Хорошая новость в том, что 90% проблем это не мелкие нюансы (о них ниже). Плохая - если продукт проблемный и кривой, временами его проще сжечь и сделать новый, чем поправить.

Кто этим должен заниматься?

Идеально, если есть человек, который весь этот процесс менеджерит, а то и целый отдел с собственным тестированием. В реальности в лучшем случае это беспокоит юристов, юристы беспокоят продактов/проджектов, а они беспокоят дизайнеров, фронтендеров и тестировщиков. В худшем - все должен как-то сделать один человек в компании. И желательно вчера.

С чего начать?

Контраст.

Пройдите по элементам сайта с помощью инспектора в devtools, обратите внимание на строчку contrast.

Автоматические инструменты не умеют пока что измерять контраст на градиентах, изображениях, это нужно сделать руками. Скачайте Color Contrast Analyser, он бесплатный, и состоит из двух пипеток, которыми вам нужно выбрать цвета. Вот Юникло нам предлагает разглядеть красную цену на фоне красной машины.

Клавиатура

Поставьте курсор в адресную строку и уберите мышку. Используя клавиши Tab, Shift и Enter, попробуйте проделать все стандартные сценарии вашего продукта только с клавиатурой.

Например, попробуем купить футболку в Юникло. Поставили курсор в адресную строку, нажали Tab, видим синюю рамку вокруг логотипа, уже неплохо (хотя бы есть рамка).

Доходим до поиска, открываем его, пишем t-shirt. Спускаемся табом до нужной категории, нажимаем Enter… И всё, на этом в Юникло ваш шоппинг завершился, дальше без мышки не пройти.

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

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

Скринридер

Уровень Pro - запустить скринридер. Это программа, которая зачитывает все с экрана (или передает шрифтом брайля, но так глубоко нам погружаться не нужно). На маке он встроенный, ищите в настройках VoiceOver. На винду скачайте NVDA.

Запустите скринридер, пройдите обучение. Запомните, как выключить скринридер! Потом включите отладку для разработчиков (вывод текста на экран) и вернитесь к своему продукту.

Задача такая же, как с клавиатурой, но теперь вам нужно ориентироваться только на то, что говорит скринридер. При желании упороться можно выключить монитор, но я так не делаю :)

Пытаемся выбрать цвет футболки. Вот Юникло вместо черного цвета говорит “69”.

Включите в экспериментальных функциях Хрома Accessibility Tree и смотрите, как видят ваш код ассистивные технологии (скринридеры и прочее). Вот, к примеру, та футболка (имя, цвета, добавление в избранное).

На этом этапе вы увидите уже 90% проблем, уже есть чем заняться :) Не забывайте, что каждая новая фича несет с собой новые проблемы, так что проверки нужно делать регулярно. А по-хорошему внедрить на начальных этапах разработки и дизайна, когда переделывать еще не так много.

P.S. А что с автоматические тестами? Как любую тулзу, их нужно использовать, хорошо понимая, что и зачем ты делаешь. А главное, для новичка они не дают понимания, что это за проблема и почему она важна. Гораздо нагляднее пытаться угадать на слух, что значит "69" у футболки в своем продукте (и автотесты это не найдут). Поэтому я бы отложила автоматику на потом.