единици
1. Въведение в изкуствения интелект в UI/UX дизайна: роли, граници, удостоверяване и потребителски данни 2. Синтез на потребителски изследвания: Извличане на прозрения от данни от интервюта и проучвания 3. Създаване на карта за пътуване на личност и потребител 4. Информационна архитектура и проектиране на потребителски потоци 5. Генериране на Wireframe и дизайн с ниска разделителна способност 6. Текст на интерфейса и писане на UX: Писане на микро текстове с изкуствен интелект 7. Изкуствен интелект в прототипирането и дизайна с висока разделителна способност 8. Анализ на тестване на използваемостта и синтез на открития 9. Система за проектиране: Изкуствен интелект в компонент, токен и документация 10. Изкуствен интелект в достъпността и приобщаващия дизайн 11. Етика, поверителност, авторско право и екосистема с инструменти за изкуствен интелект
единица 10 / 11

Изкуствен интелект в достъпността и приобщаващия дизайн

Печалби:

  • Възможност за контрол и подобряване на цветовия контраст, алтернативен текст, достъп до клавиатурата и WCAG критерии с поддръжка на изкуствен интелект
  • Възможност за генериране и проверка на текстове за достъпност, като изживяване с екранен четец, алтернативен текст и етикети на формуляри с изкуствен интелект
  • Разбиране на ограничението на валидирането на препоръките за достъпност на AI с реални помощни технологии и потребителско тестване

Достъпността (накратко a11y) е способността на продукта да се използва от всеки, включително хора с увреждания: потребител с увредено зрение може да навигира с екранен четец (допълнителен софтуер, който преобразува текст в реч), човек с двигателни затруднения може да прави всичко с клавиатура, далтонист може да получава информация, без да разчита на цвят. Приобщаващият дизайн е по-широк: той поставя човешкото разнообразие в центъра на дизайна, включително възраст, език, култура, временно увреждане (счупена ръка) или контекстуално увреждане (екран на слънце). Достъпността не е „екстра“, а основна отговорност и законово изискване в повечето страни. AI е мощен инструмент за предварителна проверка и генератор на чернови в тази област; но истинската достъпност се потвърждава само от действителна помощна технология и потребителско тестване.

WCAG и ключови контролни зони

WCAG (Указания за достъпност на уеб съдържание) е набор от международно приети критерии за достъпност; Нивото на АА обикновено е целево. Той има четири принципа: съдържанието трябва да бъде възприемаемо, интерфейсът трябва да бъде използваем, информацията трябва да бъде разбираема и технически издържана. Най-често срещаните области на контрол в практиката са:

  • Цветов контраст: Достатъчна ли е разликата между текст и фон? (За AA съотношение поне 4,5:1 в нормален текст.)
  • Алтернативен текст (алтернативен текст): Имат ли изображенията текстов еквивалент, който ги обяснява на екранния четец?
  • Достъп от клавиатурата: Може ли да се направи нещо без мишка? Има ли смисъл редът на фокусиране?
  • Информация само за цвят: Фрази като „Попълнете червените полета“ изключват потребителя с далтонист.
  • Етикети на формуляри: Всяко поле за въвеждане има ли етикет, който екранният четец ще прочете?
  • Цел за докосване: Достатъчно големи ли са бутоните, за да се натискат удобно с пръсти?

AI може да извърши бързо предварително сканиране в много от тези области: можете да дадете текст и да попитате „достатъчен ли е контрастът?“, да дадете описание на изображението и да попитате „предложете алтернативен текст“, да дадете описание на интерфейса и да попитате „какви са проблемите с достъпа до клавиатурата“.

Внимание: Само защото изкуственият интелект казва „изглежда достъпно“ не е гаранция за достъпност. Автоматичната проверка улавя само някои от WCAG грешките; Останалите ще се появят при реална употреба.

Алтернативен текст: тайната на добрия алтернативен текст

Алтернативният текст замества изображението за потребител с увредено зрение. Добрият алтернативен текст предава функцията и значението на изображението, а не неговия декоративен детайл. Алтернативният текст за иконата „добавяне в количката“ трябва да бъде „Добавяне в количката“, а не „изображение на пазарската количка“, защото това е действието, което има значение за потребителя. AI е добър в генерирането на очертания на подтекста, но тъй като не познава контекста, може да произведе прекалено описателен или неуместен текст. Вие питате всеки алтернативен текст „защо това изображение е тук?“ Изрязване с въпроса.

визуален

Слаб подтекст

Силен подтекст

Икона на количка (бутон)

„Икона на количка, сив цвят“

„Добавяне в количката“

снимка на продукта

"картина"

„Синьо зимно палто, изглед отпред“

декоративна линия

"Орнаментна линия"

(оставете празно — декоративен)

Графика

"Графично изображение"

„Продажби за 2024 г.: увеличаване на всяко тримесечие“

Приобщаващ език и обхват

Достъпността не се ограничава до технически контроли; Езикът също включва. Текст, който предполага пол („потребител и неговия/нейния съпруг“), изключва въз основа на способности („поглед“, „чува лесно“) или съдържа културни предположения, ще изключи някои потребители. AI може да сканира текста от тази гледна точка, но трябва да сте сигурни, че „неутралния“ език, който предлага, остава естествен и разбираем; Прекомерното коригиране може да направи текста неудобен.

три мини калъфа

Случай 1 — Грешки в контраста, открити рано. Екип накара AI да сканира цветовете на текста на 20 екрана и установи, че контрастът е под прага на AA на 7 места. Корекциите са направени без да се навлиза в развитие; разходите за последваща корекция бяха избегнати. Но екипът все още не е пропуснал действителния тест на екранния четец.

Случай 2 — Коригирана е само информация, свързана с цвета. Един формуляр показваше полета за грешки само с червена рамка. AI маркира това; Екипът също добави текст и икони към всяка грешка. Далтонистите вече могат да видят грешката. Урок: цветът сам по себе си не може да предаде информация.

Случай 3 — Подведено одобрение от AI. Един дизайнер пропусна тестването на екранния четец, защото нарече AI "достъпен". При реалния тест се оказа, че редът на фокусиране е объркан и някои бутони изобщо не се четат. Урок: автоматичното потвърждение е началото; действителното тестване на помощните технологии е задължително.

Копируеми подкани

Предварително сканирайте това описание на интерфейса за достъпност: 1) има ли информация, пренасяна единствено въз основа на цвят? 2) има ли текстов етикет за всеки елемент, върху който може да се кликне? 3) има ли елементи, които не могат да бъдат достъпни чрез клавиатура? 4) редът на фокусиране има ли смисъл? Избройте всеки проблем и предложение. Добавете бележка „Изисква се истински тест“. Рецепта: <<текст>>

Предложете алтернативен текст за тези изображения. Правило: предавайте ФУНКЦИЯТА/смисъла на изображението, а не декоративния детайл. Напишете действието за иконите на бутоните. За декоративни изображения кажете „алтернативният текст трябва да се остави празен“. Описания на контекст и изображения: <<списък>>

Проверете тези текстове за приобщаващ език: има ли допускания за пола, изключващ език, базиран на способности (като „виждам“, „чувам“), културни допускания? Предложете алтернативи, които остават естествени; не коригирайте прекалено много.Текстове: <<списък>>

Напишете достъпен текст за грешка и етикет за този формуляр: видим етикет за всяко поле, описание за екранния четец и съобщение, описващо грешката, независимо от цвета (текст + икона). Глас и тон: <<карта>>Полета на формуляра: <<списък>>

Слаба подкана / Силна подкана

Слабо: „Напишете алтернативен текст за това изображение.“

Резултатът: „Изображение“ или прекалено описателен текст, който пропуска функцията.

Силно: „Предложете алтернативен текст за тези изображения; предайте функцията/значението на изображението; напишете действието за иконите на бутоните; маркирайте декоративните като „трябва да се оставят празни“.“

Резултатът: контекстуални, функционално ориентирани, точни подтекстове.

Разлика: силната подкана носи функционален фокус + конвенционални бутони + декоративно разграничение.

Често срещани грешки

  • Погрешно приемане на одобрението на изкуствения интелект като гаранция за достъпност. Не е заместител на истинското тестване.
  • Просто зареждане на информация в цвят. Далтонистите пропускат информация.
  • Обяснение на изображението, а не на функцията, в алтернативния текст. Трябва да се напише действие за иконата на бутона.
  • Оставяме достъпността за накрая. Ако не е стартиран на етапа на телена рамка, ще бъде скъпо да го закърпите по-късно.
  • Свръхкоригиран език. Приобщаващият език, който губи естественост, също влошава разбираемостта.

В обобщение

Достъпност означава, че продуктът е достъпен за всеки; Това не е екстра, това е съществена и на повечето места законова отговорност. AI е ценен като бърз предполетен генератор и генератор на чернови за контраст, алтернативен текст, достъп до клавиатурата и включително езиково сканиране. Но автоматичното одобрение улавя само някои от WCAG грешките; Действителната достъпност се потвърждава чрез тестване с екранни четци и реални потребители на помощни технологии. Използвайте модела като преден браузър, вземете доказателството от реални тестове.

Задача за приложение

  1. Предварително сканирайте описание на интерфейса за достъпност при първата подкана.
  2. Коригирайте само базирана на цвят информация или елементи без етикет.
  3. Генерирайте функционално ориентирани алтернативни текстове за визуализациите на вашия екран с втората подкана.
  4. Проверете вашите текстове за включващ език с третото подканяне.
  5. Ако е възможно, опитайте действителния тест с екранен четец и отбележете какво пропуска автоматичното сканиране.

контролен списък

  • [ ] Предварително сканирах контраста, достъпа до клавиатурата и етикетите.
  • [ ] Не съм оставил информация, базирана единствено на цвят.
  • [ ] Написах подтекстовете функционално и оставих декоративните празни.
  • [ ] Направих приобщаващ езиков контрол, запазих естествеността.
  • [ ] Не смятах автоматичното одобрение за гаранция за достъпност.
  • [ ] Планирах/изпълних действително тестване на помощни технологии.