Доступен ли сайт от нейросети людям с ограничениями

Частично, и это надо проверять руками. Zugo прогоняет каждую сборку в песочнице, но проверка отвечает на один вопрос: страница открылась. Контраст, подписи к полям, порядок фокуса и альтернативный текст она не смотрит. Ни один конструктор не выдаёт доступность по умолчанию, зато почти всё найденное чинится правкой за 3 кредита.

Что вообще значит «доступный сайт»?

Доступность это не отдельная функция, которую включают галочкой. Это набор свойств интерфейса, при которых им можно пользоваться без мыши, без зрения и при слабом зрении. Человек ходит по странице клавишей Tab, слушает разметку скринридером, увеличивает шрифт до 200 процентов.

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

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

Что делает сборка сама, а что остаётся на вас?

Стоит развести две разные проверки. Zugo запускает проект в песочнице перед тем, как отдать его вам: сборка, которая не открылась, не выдаётся. Это защита от белого экрана, и она работает. Но она не проверяет контраст и не слушает страницу скринридером.

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

Хорошая новость в том, что цикл правок здесь короткий. Вы находите проблему, пишете одну фразу, получаете новую версию. Одна правка стоит 3 кредита, режим Hi-Fi для правки стоит 6. На Pro за $25 в месяц вы получаете 200 кредитов, это 66 правок, и доводка доступности редко занимает больше десяти из них.

Как проверить сборку за десять минут?

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

Проходите список сверху вниз, копите замечания и отправляйте их одной правкой, а не шестью. Одна фраза с шестью пунктами стоит столько же, сколько одна фраза с одним, и это самая заметная экономия кредитов на всём цикле доводки.

Какие проблемы встречаются в сгенерированных страницах чаще всего?

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

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

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

Невидимый фокус. Браузер рисует рамку вокруг активного элемента, а декоративные стили её нередко убирают ради чистоты. Для того, кто ходит по странице клавишей Tab, это означает движение вслепую.

Иконка вместо слова. Кнопка, на которой нарисован только значок, ничего не сообщает скринридеру и часто ничего не сообщает обычному человеку. Подпись рядом со значком решает обе проблемы сразу.

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

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

Что писать в промпте, чтобы получить меньше проблем?

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

Формулируйте конкретно. Вместо «сделай доступный сайт» напишите: «текст основного содержания тёмный на светлом, вторичный текст не светлее среднесерого, у всех интерактивных элементов видимый фокус, у полей формы настоящие подписи, у картинок alt». Модель выполняет проверяемые требования заметно лучше, чем оценочные.

Второе, что помогает: назвать аудиторию. «Сайт районной поликлиники, значительная часть посетителей старше шестидесяти» задаёт крупный шрифт и высокий контраст точнее, чем прямое требование про размеры. Как формулировать такие описания, разобрано в отдельном материале про промпт для сборки.

Третье: начинайте с шаблона, если задача типовая. В Zugo 25 готовых шаблонов, из них 5 игровых. Шаблон это уже проверенная структура страницы, и доводить его по списку выше быстрее, чем разбирать сгенерированную с нуля вёрстку.

Что делать, если нужен настоящий аудит?

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

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

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

Кому это нужно раньше всех?

Есть проекты, где доступность перестаёт быть хорошим тоном и становится условием работы.

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

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

Крупные работодатели. Страница вакансий, недоступная для скринридера, отсекает кандидатов ещё до отклика, и это заметно быстрее, чем кажется.

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

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

Где проходит честная граница?

Три вещи стоит назвать прямо.

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

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

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

С чего начать сегодня

Соберите первую версию, пройдите шесть пунктов из таблицы, соберите замечания в одну правку. Дальше повторите проход: обычно второй круг находит уже мелочи. Если проект перерастает конструктор, забирайте код и отдавайте специалисту. Начать можно на бесплатном тарифе на zugo.dev, где даётся 5 кредитов на знакомство с интерфейсом. Учтите арифметику честно: сборка стоит 6 кредитов, так что стартового гранта хватает осмотреться, а не собрать проект целиком. Сколько стоят действия и что входит в тарифы, подробно разобрано в материале про цену сайта на нейросети.