Что такое веб-доступность? WCAG и инклюзивный дизайн простыми словами

Веб-доступность означает создание сайтов и приложений, которыми могут пользоваться люди с инвалидностью — незрячие люди со screen reader, те, кто не может пользоваться мышью, люди со слабым зрением или дальтонизмом, глухие люди, люди с когнитивными или учебными нарушениями. На практике это сводится к таким вещам, как текстовые альтернативы для изображений, достаточный цветовой контраст, формы с правильными подписями и работа всего интерфейса только с клавиатуры. Международный стандарт в этой области — WCAG, Рекомендации по доступности веб-контента от W3C.

Доступность часто сокращают до a11y — «a», затем 11 букв, затем «y».

Почему доступность важна при создании сайтов с ИИ

ИИ-конструкторы хорошо делают приложения, которые выглядят правильно. Доступность в основном касается того, чего не видно на скриншоте: является ли кнопка настоящей кнопкой, есть ли у поля ввода подпись, которую может озвучить screen reader, можно ли открыть меню клавишей Tab.

Поэтому важно спрашивать:

• Это легко пропустить. Самостоятельно стилизованный выпадающий список может выглядеть идеально и быть непригодным без мыши. Вы этого не заметите, пока не проверите.
• Дешевле сделать правильно с самого начала. Просьба о доступных компонентах с первого запроса почти ничего не стоит. Доработка готового приложения означает правку каждого экрана.
• Это помогает всем. Субтитры помогают людям в шумных местах, хороший контраст — людям с телефонами на солнце, а понятные подписи ускоряют заполнение форм для всех.
• Это пересекается с SEO. Правильные заголовки, понятные ссылки и alt-текст помогают поисковикам понимать ваши страницы — см. SEO для сайтов, созданных с ИИ.
• Это может быть обязательным. В зависимости от того, где вы работаете и кого обслуживаете, доступность может быть юридической обязанностью.

Бытовая аналогия

Представьте вход в здание.

Ступеньки подходят многим людям. Пандус нужен людям на инвалидных колясках — а также родителям с колясками, курьерам с тележками и путешественникам с чемоданами. Автоматические двери, понятные указатели, шрифт Брайля на кнопках лифта и хорошее освещение убирают барьер для кого-то.

Веб-доступность — та же идея для цифрового пространства: пандусы, указатели и поручни вашего приложения. И, как и в здании, гораздо проще заложить пандус в проект, чем добавить его, когда бетон уже застыл.

WCAG в двух словах

WCAG публикует Инициатива W3C по веб-доступности. Текущая версия — WCAG 2.2, впервые опубликованная в октябре 2023 года. Она обратно совместима: контент, соответствующий WCAG 2.2, соответствует и 2.1, и 2.0, а W3C рекомендует использовать последнюю версию. WCAG 2.2 также утверждён как международный стандарт ISO/IEC 40500:2025. Совсем другой WCAG 3 находится в разработке как ранний черновик, а не как готовый стандарт.

WCAG построен на четырёх принципах, которые часто запоминают как POUR:

Каждое правило содержит проверяемые критерии успеха на трёх уровнях:

• Уровень A — минимум. Невыполнение блокирует доступ для некоторых людей полностью.
• Уровень AA — стандартная цель и уровень, на который ссылаются большинство законов и политик.
• Уровень AAA — самый высокий. Полезно стремиться к нему местами, но W3C не рекомендует требовать его для всего сайта, так как некоторое содержимое не может ему соответствовать.

WCAG 2.2 добавил к 2.1 девять критериев успеха, в том числе Размер цели (минимальный) на уровне AA — кликабельные элементы должны быть, как правило, не меньше 24 на 24 CSS-пикселя, с исключениями — и Доступная аутентификация (минимальная), которая ограничивает шаги входа, требующие памяти или головоломок, например необходимость набирать пароль заново без возможности вставить его. Также был убран устаревший критерий «Парсинг».

Пример: форма регистрации

Вот форма регистрации, которую мог бы выдать ИИ, и то, что найдёт проверка доступности:

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

Основные термины

Частые заблуждения

• «Доступность важна только для незрячих пользователей». Она касается зрительных, двигательных, слуховых, речевых и когнитивных нарушений, а также временных ситуаций вроде сломанной руки.
• «Доступные сайты выглядят скучно». Доступность ограничивает несколько вещей — контраст, стили фокуса, размер текста, — но красивые доступные сайты — норма, а не исключение.
• «Автоматическая проверка показала 100 баллов, значит, всё готово». Автоматические инструменты находят только часть проблем. Осмысленность alt-текста или то, понятен ли поток для пользователя screen reader, должен проверить человек.
• «Виджет-оверлей сделает нас соответствующими требованиям». Панели, наложенные сверху, не исправляют отсутствующие подписи или сломанный доступ с клавиатуры в вашем коде. Исправляйте источник.
• «У нас нет пользователей с инвалидностью». Вы можете просто этого не знать. Многие нарушения не видны, а люди, которые сталкиваются с барьером, обычно просто уходят.

Что просить у ИИ-конструктора

• «Сделай это в соответствии с WCAG 2.2 уровня AA».
• «Используй семантический HTML: настоящие кнопки, ссылки, заголовки по порядку и подписи для каждого поля формы».
• «Убедись, что каждый интерактивный элемент работает только с клавиатуры и имеет видимый стиль фокуса».
• «Проверь контрастность всех цветов текста и иконок — 4,5:1 для обычного текста, 3:1 для крупного текста и иконок».
• «Добавь осмысленный alt-текст для информативных изображений и пустой alt для декоративных».
• «Показывай ошибки формы текстом, связанным с полем, а не только цветом».
• «Учитывай настройку пользователя «уменьшить движение» для анимаций».
• «Запусти автоматическую проверку доступности и перечисли то, что она не может проверить, чтобы я проверил это вручную».

Затем проверьте сами: отложите мышь и попробуйте выполнить основной сценарий, используя только Tab, Shift+Tab, Enter и пробел. Попробуйте встроенный screen reader на телефоне на главной странице. Увеличьте браузер до 200% и посмотрите, ничего ли не сломалось.

Доступность в Mythex

В Mythex нет отдельного инструмента проверки доступности, поэтому считайте доступность частью ваших запросов и тестирования. Просите WCAG 2.2 AA с первого запроса, проверяйте результат в предпросмотре с клавиатуры и используйте /test, чтобы агент прошёл по основным сценариям перед публикацией, — см. App Testing. В рецепте SEO тоже просят семантические заголовки и осмысленный alt-текст, которые служат обеим целям.

Практический чек-лист есть в статье как сделать сайт доступным. По дизайну читайте как спроектировать красивое приложение с ИИ, а перед запуском — как протестировать приложение перед запуском. Авторитетный источник — обзор WCAG на сайте W3C.

Вопросы