Прибыль:
- Возможность контролировать и улучшать цветовой контраст, альтернативный текст, доступ с клавиатуры и критерии WCAG с поддержкой искусственного интеллекта.
- Возможность генерировать и проверять тексты специальных возможностей, такие как средства чтения с экрана, замещающий текст и метки форм, с помощью искусственного интеллекта.
- Понимание пределов проверки рекомендаций искусственного интеллекта по доступности с помощью реальных вспомогательных технологий и пользовательского тестирования.
Доступность (сокращенно a11y) — это возможность использования продукта всеми, в том числе людьми с ограниченными возможностями: пользователь с нарушениями зрения может перемещаться с помощью программы чтения с экрана (вспомогательного программного обеспечения, преобразующего текст в речь), человек с нарушениями моторики может делать что угодно с помощью клавиатуры, дальтоник может получать информацию, не полагаясь на цвет. Инклюзивный дизайн шире: он ставит в центр дизайна человеческое разнообразие, включая возраст, язык, культуру, временную инвалидность (сломанная рука) или контекстуальную инвалидность (экран на солнце). Доступность — это не «дополнительно», а фундаментальная ответственность и требование закона в большинстве стран. ИИ — мощный предварительный фильтр и генератор проектов в этой области; но истинная доступность подтверждается только реальными вспомогательными технологиями и пользовательским тестированием.
WCAG и ключевые зоны контроля
WCAG (Руководство по обеспечению доступности веб-контента) — это набор международно признанных критериев доступности; Уровень АА обычно является целевым. У него четыре принципа: контент должен быть понятен, интерфейс должен быть удобен, информация должна быть понятной и технически обоснованной. Наиболее распространенными на практике областями контроля являются:
- Цветовой контраст: достаточна ли разница между текстом и фоном? (Для АА соотношение не менее 4,5:1 в обычном тексте.)
- Альтернативный текст (замещающий текст): есть ли у изображений текстовый эквивалент, объясняющий их программе чтения с экрана?
- Доступ с клавиатуры: можно ли что-нибудь сделать без мыши? Имеет ли смысл порядок фокусировки?
- Информация только для цветов: такие фразы, как «Заполните красные поля», исключают пользователя с дальтонизмом.
- Метки форм. Имеет ли каждое поле ввода метку, которую будет читать программа чтения с экрана?
- Сенсорная цель: достаточно ли велики кнопки, чтобы их можно было удобно нажимать пальцами?
ИИ может выполнить быстрое предварительное сканирование во многих из этих областей: вы можете дать некоторый текст и спросить «достаточный ли контраст?», дать описание изображения и спросить «предложить альтернативный текст», дать описание интерфейса и спросить «какие проблемы с доступом к клавиатуре».
Внимание: то, что ИИ говорит «это выглядит доступным», не является гарантией доступности. Автоматическая проверка выявляет только некоторые ошибки WCAG; Остальное выяснится при фактическом использовании.
Альтернативный текст: секрет хорошего альтернативного текста
Альтернативный текст заменяет изображение для слабовидящего пользователя. Хороший альтернативный текст передает функцию и значение изображения, а не его декоративную деталь. Альтернативный текст для значка «Добавить в корзину» должен быть «Добавить в корзину», а не «Изображение корзины», поскольку именно это действие имеет значение для пользователя. ИИ хорошо генерирует контуры подтекста, но поскольку он не знает контекста, он может создавать слишком описательный или нерелевантный текст. Вы спрашиваете каждый альтернативный текст: «Почему здесь это изображение?» Обрезка с вопросом.
визуальный
Слабый подтекст
Сильный подтекст
Значок корзины (кнопка)
«Значок корзины, серый цвет»
«Добавить в корзину»
фото продукта
"картина"
«Синее зимнее пальто, вид спереди»
декоративная линия
«Линия орнамента»
(оставьте пустым — декоративное)
Графика
«Графический образ»
«Продажи 2024 года: рост каждый квартал»
Инклюзивный язык и объем
Доступность не ограничивается техническим контролем; Язык также инклюзивен. Текст, который предполагает пол («пользователь и его/ее супруга»), исключает на основании способностей («взгляд», «легко слышит») или содержит культурные предположения, будет исключать некоторых пользователей. ИИ может сканировать текст с этой точки зрения, но вы должны следить за тем, чтобы «нейтральный» язык, который он предлагает, оставался естественным и понятным; Чрезмерная коррекция может сделать текст неуклюжим.
три мини-кейса
Случай 1. Ошибки контрастности обнаружены рано. Команда попросила ИИ просканировать цвета текста на 20 экранах и определила, что контрастность ниже порога АА в 7 местах. Исправления внесены без перехода в разработку; удалось избежать затрат на последующую коррекцию. Но команда все равно не пропустила настоящий тест программы чтения с экрана.
Случай 2. Исправлена только информация, связанная с цветом. В одной форме поля ошибок были только с красной рамкой. ИИ отметил это; Команда также добавила текст и значки к каждой ошибке. Пользователи с дальтонизмом теперь могли видеть ошибку. Урок: цвет сам по себе не может передать информацию.
Случай 3 — ИИ ввел в заблуждение одобрение. Один дизайнер пропустил тестирование программы чтения с экрана, потому что назвал ИИ «доступным». В реальном тесте оказалось, что порядок фокусировки перепутан, а некоторые кнопки вообще не читаются. Урок: автоматическое подтверждение — это начало; фактическое тестирование вспомогательных технологий является обязательным.
Копируемые подсказки
Предварительно просканируйте это описание интерфейса на предмет доступности: 1) есть ли информация, передаваемая исключительно на основе цвета? 2) есть ли текстовая метка для каждого кликабельного элемента? 3) есть ли элементы, к которым нельзя получить доступ с помощью клавиатуры? 4) имеет ли смысл порядок фокусировки? Перечислите каждую проблему и предложение. Добавьте пометку «Требуется настоящий тест». Рецепт: <<текст>>
Предложите альтернативный текст для этих изображений. Правило: передавайте ФУНКЦИЮ/значение изображения, а не декоративную деталь. Напишите действие для значков кнопок. Для декоративных изображений скажите «Замещающий текст следует оставить пустым». Описания контекста и изображения: <<список>>
Проверьте эти тексты на наличие инклюзивного языка: существуют ли гендерные предположения, исключающий язык, основанный на способностях (например, «видеть», «слышать»), культурные предположения? Предлагайте альтернативы, которые остаются естественными; не переусердствуйте.Тексты: <<list>>
Напишите доступный текст ошибки и метки для этой формы: видимую метку для каждого поля, описание для программы чтения с экрана и сообщение, описывающее ошибку, независимо от цвета (текст + значок). Голос и тон: <<card>>Поля формы: <<list>>
Слабая подсказка / Сильная подсказка
Слабое: «Напишите альтернативный текст для этого изображения».
Результат: «изображение» или слишком описательный текст, не отвечающий данной функции.
Сильный: «Предложите альтернативный текст для этих изображений; передайте функцию/значение изображения; напишите действие для значков кнопок; отметьте декоративные как «необходимо оставить пустыми».
Результат: контекстуальные, функционально-ориентированные, точные подтексты.
Отличие: сильная подсказка обеспечивает функциональную направленность + условные обозначения кнопок + декоративные отличия.
Распространенные ошибки
- Ошибочное принятие одобрения искусственного интеллекта как гарантия доступности. Это не замена реальному тестированию.
- Просто загружаю информацию в цвет. Пользователи с дальтонизмом упускают информацию.
- Объяснение изображения, а не функции в замещающем тексте. Для иконки кнопки необходимо написать действие.
- О доступности оставим напоследок. Если его не запустить на этапе каркаса, потом исправлять его будет дорого.
- Чрезмерно исправленный язык. Инклюзивный язык, теряющий естественность, также ухудшает понятность.
В заключение
Доступность означает, что продукт доступен каждому; Это не дополнительная, а необходимая и в большинстве случаев юридическая ответственность. ИИ ценен как быстрый предварительный просмотр и генератор черновиков для контраста, замещающего текста, доступа с клавиатуры и комплексного языкового сканирования. Однако автоматическое утверждение обнаруживает лишь некоторые ошибки WCAG; Фактическая доступность подтверждена тестированием с использованием программ чтения с экрана и реальных пользователей ассистивных технологий. Используйте модель в качестве главного браузера и получите доказательства в ходе реальных испытаний.
Задача приложения
- Предварительно просканируйте описание интерфейса на предмет доступности при первом же запросе.
- Исправляйте только информацию, основанную на цвете, или немаркированные элементы.
- Создавайте функциональные альтернативные тексты для визуальных элементов на экране с помощью второго приглашения.
- Проверьте свои тексты на предмет инклюзивного языка с помощью третьего запроса.
- Если возможно, попробуйте выполнить настоящий тест с помощью программы чтения с экрана и обратите внимание, что не хватает при автоматическом сканировании.
контрольный список
- [ ] Я предварительно отсканировал контрастность, доступ к клавиатуре и метки.
- [ ] Я не оставлял информацию, основанную исключительно на цвете.
- [ ] Подтексты я написал функционально, а декоративные оставил пустыми.
- [ ] Сделал инклюзивный языковой контроль, естественность сохранил.
- [ ] Я не считал автоматическое одобрение гарантией доступности.
- [ ] Я планировал/провёл фактическое тестирование ассистивных технологий.