zisky:
- Schopnost ovládat a zlepšovat barevný kontrast, alternativní text, přístup z klávesnice a kritéria WCAG s podporou umělé inteligence
- Schopnost generovat a ověřovat texty přístupnosti, jako je zkušenost se čtečkou obrazovky, alternativní text a štítky formulářů s umělou inteligencí
- Pochopení limitu ověřování doporučení pro přístupnost AI pomocí skutečné asistenční technologie a uživatelského testování
Přístupnost (zkráceně a11y) je schopnost produktu používat každý, včetně osob se zdravotním postižením: zrakově postižený uživatel se může pohybovat pomocí čtečky obrazovky (pomocný software, který převádí text na řeč), osoba s motorickými obtížemi může dělat cokoliv s klávesnicí, barvoslepá osoba může přijímat informace, aniž by se spoléhala na barvu. Inkluzivní design je širší: do centra designu staví lidskou rozmanitost, včetně věku, jazyka, kultury, dočasného postižení (zlomená ruka) nebo kontextuálního postižení (obrazovka na slunci). Přístupnost není „navíc“, ale základní odpovědností a právním požadavkem ve většině zemí. AI je v této oblasti výkonný prescreener a generátor tahu; ale skutečná dostupnost je potvrzena pouze skutečnou asistenční technologií a uživatelským testováním.
WCAG a klíčové oblasti ovládání
WCAG (Web Content Accessibility Guidelines) je soubor mezinárodně uznávaných kritérií pro přístupnost; Úroveň AA je obecně zaměřena. Má čtyři principy: obsah musí být vnímatelný, rozhraní musí být použitelné, informace musí být srozumitelné a technicky správné. Nejběžnější oblasti ovládání v praxi jsou:
- Barevný kontrast: Je rozdíl mezi textem a pozadím dostatečný? (Pro AA alespoň poměr 4,5:1 v normálním textu.)
- Alternativní text (alt text): Mají obrázky textový ekvivalent, který je vysvětluje čtečce obrazovky?
- Přístup z klávesnice: Dá se něco dělat bez myši? Má pořadí zaměření smysl?
- Informace pouze pro barvy: Fráze jako „Vyplňte červená pole“ vylučují barvoslepého uživatele.
- Štítky formulářů: Má každé vstupní pole štítek, který bude čtečka obrazovky číst?
- Dotykový cíl: Jsou tlačítka dostatečně velká, aby se dala pohodlně mačkat prsty?
Umělá inteligence může provést rychlý předběžný sken v mnoha z těchto oblastí: můžete zadat nějaký text a zeptat se „je dostatečný kontrast?“, zadat popis obrázku a požádat „navrhnout alternativní text“, poskytnout popis rozhraní a zeptat se „jaké jsou problémy s přístupem z klávesnice“.
Upozornění: To, že AI říká „vypadá přístupně“, není zárukou dostupnosti. Automatická kontrola zachytí pouze některé z chyb WCAG; Zbytek se ukáže skutečným používáním.
Alt text: tajemství dobrého alternativního textu
Alternativní text nahradí obrázek pro nevidomého uživatele. Dobrý alternativní text vyjadřuje funkci a význam obrázku, nikoli jeho dekorativní detail. Alternativní text pro ikonu „přidat do košíku“ by měl být „Přidat do košíku“ a nikoli „obrázek nákupního košíku“, protože pro uživatele záleží na akci. AI je dobrá při generování obrysů podtextu, ale protože nezná kontext, může vytvářet příliš popisný nebo irelevantní text. Ptáte se každého alternativního textu „proč je zde tento obrázek?“ Ořízněte otázku.
vizuální
Slabý podtext
Silný podtext
Ikona košíku (tlačítko)
"Ikona košíku, šedá barva"
"Přidat do košíku"
fotografii produktu
"obrázek"
"Modrý zimní kabát, pohled zepředu"
dekorativní linka
"Ozdobná linie"
(nechat prázdné — dekorativní)
Grafika
"Grafický obrázek"
„Tržby 2024: zvyšujte se každé čtvrtletí“
Inkluzivní jazyk a rozsah
Přístupnost není omezena na technické kontroly; Jazyk je také inkluzivní. Text, který předpokládá pohlaví („uživatel a jeho manžel/ka“), vylučuje na základě schopností („pohled“, „snadno slyší“) nebo obsahuje kulturní předpoklady, vyloučí některé uživatele. AI může skenovat text z této perspektivy, ale musíte zajistit, aby „neutrální“ jazyk, který navrhuje, zůstal přirozený a srozumitelný; Nadměrné opravy mohou způsobit, že text bude nepohodlný.
tři mini pouzdra
Případ 1 – Chyby kontrastu zachyceny brzy. Tým nechal AI naskenovat barvy textu na 20 obrazovkách a zjistil, že kontrast byl pod prahem AA na 7 místech. Opravy byly provedeny, aniž by se šlo do vývoje; se předešlo nákladům na následnou opravu. Ale tým stále nepřeskočil skutečný test čtečky obrazovky.
Případ 2 – Opraveny byly pouze informace týkající se barvy. Jeden formulář zobrazoval chybová pole pouze s červeným okrajem. AI to označila; Tým také ke každé chybě přidal text a ikony. Barvoslepí uživatelé nyní viděli chybu. Poučení: samotná barva nemůže předávat informaci.
Případ 3 – falešné schválení AI. Jeden návrhář vynechal testování čtečky obrazovky, protože nazval AI „dostupnou“. V reálném testu se ukázalo, že pořadí ostření bylo zmatené a některá tlačítka nebyla přečtena vůbec. Poučení: automatické potvrzení je začátek; skutečné testování asistenčních technologií je povinné.
Kopírovatelné výzvy
Předběžně naskenujte tento popis rozhraní kvůli usnadnění:1) Jsou zde informace přenášeny pouze na základě barvy?2) Existuje textový štítek pro každý prvek, na který lze kliknout?3) Existují nějaké prvky, ke kterým nelze přistupovat pomocí klávesnice?4) Má pořadí zaměření smysl?Uveďte všechny problémy a návrhy. Přidejte poznámku "Vyžadován skutečný test". Recept: <<text>>
Navrhněte alternativní text pro tyto obrázky. Pravidlo: zprostředkovat FUNKCI/význam obrázku, nikoli dekorativní detail. Napište akci pro ikony tlačítek. U dekorativních obrázků řekněte „alt text by měl zůstat prázdný“. Kontext a popis obrázků: <<seznam>>
Zkontrolujte, zda tyto texty obsahují inkluzivní jazyk: existují genderové předpoklady, vylučovací jazyk založený na schopnostech (jako „vidět“, „slyšet“), kulturní předpoklady? Navrhněte alternativy, které zůstanou přirozené; nepřekorigujte.Texty: <<seznam>>
Napište přístupnou chybu a text štítku pro tento formulář: viditelný štítek pro každé pole, popis pro čtečku obrazovky a zprávu popisující chybu bez ohledu na barvu (text + ikona). Hlas a tón: <<karta>>Pole formuláře: <<seznam>>
Slabá výzva / Silná výzva
Slabé: "Napište alternativní text pro tento obrázek."
Výsledek: „Obrázek“ nebo příliš popisný text, který postrádá funkci.
Strong: "Navrhněte alternativní text pro tyto obrázky; sdělte funkci/význam obrázku; napište akci pro ikony tlačítek; označte dekorativní jako 'musí zůstat prázdné'."
Výsledek: Kontextové, funkčně orientované, přesné podtexty.
Rozdíl: silná výzva přináší funkční zaměření + konvence tlačítek + dekorativní rozlišení.
Časté chyby
- Chybné schválení umělé inteligence jako záruka přístupnosti. Nenahrazuje skutečné testování.
- Stačí načíst informace do barvy. Barvoslepým uživatelům chybí informace.
- Vysvětlení obrázku, nikoli funkce, v alternativním textu. Pro ikonu tlačítka musí být napsána akce.
- Přístupnost ponecháváme jako poslední. Pokud se nespustí ve fázi drátěného modelu, bude nákladné jej později opravit.
- Překorigovaný jazyk. Inkluzivní jazyk, který ztrácí přirozenost, také zhoršuje srozumitelnost.
V souhrnu
Dostupnost znamená, že produkt je dostupný všem; Nejde o nic navíc, jde o zásadní a na většině míst právní odpovědnost. Umělá inteligence je cenná jako rychlý generátor před výstupem a návrhů pro kontrast, alternativní text, přístup z klávesnice a včetně skenování jazyků. Ale automatické schválení zachytí jen některé z chyb WCAG; Skutečná dostupnost je potvrzena testováním se čtečkami obrazovky a skutečnými uživateli asistenčních technologií. Použijte model jako přední prohlížeč, získejte důkaz ze skutečného testování.
Aplikační úkol
- Předběžně naskenujte popis rozhraní pro usnadnění přístupu na první výzvu.
- Opravte pouze barevné informace nebo neoznačené položky.
- Pomocí druhé výzvy vygenerujte funkčně orientované alternativní texty pro vizuály na obrazovce.
- Pomocí třetí výzvy zkontrolujte, zda vaše texty obsahují jazyk.
- Pokud je to možné, vyzkoušejte skutečný test pomocí čtečky obrazovky a poznamenejte si, co automatické skenování vynechá.
kontrolní seznam
- [ ] Předběžně jsem naskenoval kontrast, přístup z klávesnice a štítky.
- [ ] Nezanechal jsem informace pouze na základě barvy.
- [ ] Podtexty jsem napsal funkčně a ozdobné nechal prázdné.
- [ ] Udělal jsem inkluzivní jazykovou kontrolu, zachoval jsem přirozenost.
- [ ] Automatické schválení jsem nepovažoval za záruku přístupnosti.
- [ ] Plánoval/provedl jsem skutečné testování asistenčních technologií.