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