Zyski:
- Możliwość kontrolowania i poprawiania kontrastu kolorów, tekstu alternatywnego, dostępu do klawiatury i kryteriów WCAG przy wsparciu sztucznej inteligencji
- Możliwość generowania i weryfikowania tekstów dostępności, takich jak czytnik ekranu, tekst alternatywny i etykiety formularzy ze sztuczną inteligencją
- Zrozumienie ograniczeń walidacji zaleceń dotyczących dostępności AI za pomocą prawdziwej technologii wspomagającej i testów z użytkownikami
Dostępność (w skrócie a11y) to możliwość korzystania z produktu przez wszystkich, w tym osoby niepełnosprawne: użytkownik niedowidzący może poruszać się za pomocą czytnika ekranu (oprogramowanie pomocnicze konwertujące tekst na mowę), osoba z trudnościami motorycznymi może zrobić wszystko za pomocą klawiatury, osoba niewidoma na kolory może odbierać informacje bez polegania na kolorze. Projektowanie włączające jest szersze: w centrum projektowania stawia różnorodność ludzką, w tym wiek, język, kulturę, tymczasową niepełnosprawność (złamana ręka) lub niepełnosprawność kontekstową (ekran na słońcu). Dostępność nie jest „dodatkiem”, ale podstawowym obowiązkiem i wymogiem prawnym w większości krajów. AI jest potężnym narzędziem do wstępnej selekcji i generatorem przeciągu w tej dziedzinie; ale prawdziwą dostępność potwierdza jedynie faktyczna technologia wspomagająca i testy użytkowników.
WCAG i kluczowe obszary kontrolne
WCAG (Wytyczne dotyczące dostępności treści internetowych) to zestaw międzynarodowych kryteriów dostępności; Zazwyczaj celem jest poziom AA. Opiera się na czterech zasadach: treść musi być zrozumiała, interfejs musi być użyteczny, informacja musi być zrozumiała i solidna technicznie. W praktyce najczęstszymi obszarami kontroli są:
- Kontrast kolorów: czy różnica między tekstem a tłem jest wystarczająca? (W przypadku AA, co najmniej współczynnik 4,5: 1 w normalnym tekście.)
- Tekst alternatywny (tekst alternatywny): Czy obrazy mają odpowiednik tekstowy wyjaśniający je czytnikowi ekranu?
- Dostęp za pomocą klawiatury: czy można coś zrobić bez myszy? Czy kolejność ustawiania ostrości ma sens?
- Informacje dotyczące tylko kolorów: wyrażenia takie jak „Wypełnij czerwone pola” wykluczają użytkownika niewidomego na kolory.
- Etykiety formularzy: Czy każde pole wejściowe ma etykietę, którą odczyta czytnik ekranu?
- Cel dotykowy: czy przyciski są wystarczająco duże, aby można je było wygodnie naciskać palcami?
Sztuczna inteligencja może wykonać szybki wstępny skan w wielu z tych obszarów: możesz podać tekst i zapytać „czy kontrast jest wystarczający?”, podać opis obrazu i zapytać „zaproponuj tekst alternatywny”, podać opis interfejsu i zapytać „jakie są problemy z dostępem do klawiatury”.
Uwaga: samo stwierdzenie przez sztuczną inteligencję „wygląda na dostępne” nie gwarantuje dostępności. The automatic check catches only some of the WCAG errors; Reszta okaże się w trakcie faktycznego użytkowania.
Tekst alternatywny: sekret dobrego tekstu alternatywnego
Tekst alternatywny zastępuje obraz dla użytkownika niedowidzącego. Dobry tekst alternatywny przekazuje funkcję i znaczenie obrazu, a nie jego dekoracyjne detale. Tekst alternatywny ikony „dodaj do koszyka” powinien brzmieć „Dodaj do koszyka”, a nie „obraz koszyka”, ponieważ dla użytkownika liczy się akcja. Sztuczna inteligencja jest dobra w generowaniu zarysów podtekstów, ale ponieważ nie zna kontekstu, może wygenerować tekst zbyt opisowy lub nieistotny. Pytasz każdy tekst alternatywny „dlaczego ten obraz jest tutaj?” Przytnij z pytaniem.
wizualne
Słaby podtekst
Mocny podtekst
Ikona koszyka (przycisk)
„Ikona koszyka, kolor szary”
„Dodaj do koszyka”
zdjęcie produktu
„obraz”
"Niebieski płaszcz zimowy, widok z przodu"
linia dekoracyjna
„Linia ozdobna”
(pozostaw puste – dekoracyjne)
Grafika
„Obraz graficzny”
„Sprzedaż 2024: wzrost co kwartał”
Włączający język i zakres
Dostępność nie ogranicza się do kontroli technicznych; Język także jest włączający. Tekst, który zakłada płeć („użytkownik i jego/jej małżonek”), wyklucza na podstawie umiejętności („spojrzenie”, „łatwo słyszeć”) lub zawiera założenia kulturowe, wykluczy niektórych użytkowników. Sztuczna inteligencja może skanować tekst z tej perspektywy, należy jednak zadbać o to, aby sugerowany przez nią „neutralny” język pozostał naturalny i zrozumiały; Nadmierna korekta może sprawić, że tekst będzie niezręczny.
trzy mini etui
Przypadek 1 — Błędy kontrastu wykryte wcześnie. Zespół zlecił sztucznej inteligencji przeskanowanie kolorów tekstu na 20 ekranach i ustalił, że w 7 miejscach kontrast był poniżej progu AA. Poprawki zostały wprowadzone bez wchodzenia w prace rozwojowe; uniknięto kosztów późniejszej korekty. Ale zespół nadal nie pominął faktycznego testu czytnika ekranu.
Przypadek 2 — Poprawiono jedynie informacje dotyczące koloru. W jednym formularzu pola błędów były tylko oznaczone czerwoną obwódką. AI to zasygnalizowała; Zespół dodał także tekst i ikony do każdego błędu. Użytkownicy cierpiący na daltonizm mogli teraz zobaczyć błąd. Lekcja: sam kolor nie jest w stanie przekazać informacji.
Przypadek 3 – AI wprowadziła w błąd akceptację. Jeden z projektantów pominął testy czytnika ekranu, ponieważ nazwał sztuczną inteligencję „dostępną”. W prawdziwym teście okazało się, że pomylono kolejność ustawiania ostrości, a niektóre przyciski w ogóle nie zostały odczytane. Lekcja: automatyczne potwierdzenie to początek; faktyczne testowanie technologii wspomagających jest obowiązkowe.
Monity, które można kopiować
Przeskanuj wstępnie opis interfejsu pod kątem dostępności:1) czy informacje są przenoszone wyłącznie w oparciu o kolor?2) czy każdy klikalny element ma etykietę tekstową?3) czy są jakieś elementy, do których nie można uzyskać dostępu za pomocą klawiatury?4) czy kolejność skupiania się ma sens? Wypisz każdy problem i sugestię. Dodaj notatkę „Wymagany prawdziwy test”. Przepis: <<tekst>>
Zaproponuj tekst alternatywny dla tych obrazów. Zasada: przekazuj FUNKCJĘ/znaczenie obrazu, a nie detal dekoracyjny. Napisz akcję dla ikon przycisków. W przypadku obrazów dekoracyjnych powiedz „tekst alternatywny powinien pozostać pusty”. Kontekst i opisy obrazów: <<lista>>
Sprawdź te teksty pod kątem języka włączającego: czy istnieją założenia dotyczące płci, język wykluczający oparty na umiejętnościach (taki jak „widzieć”, „słyszeć”), założenia kulturowe? Zaproponuj alternatywy, które pozostają naturalne; nie przesadzaj.Teksty: <<lista>>
Wpisz dostępny tekst błędu i etykietę dla tego formularza: widoczną etykietę dla każdego pola, opis czytnika ekranu i komunikat opisujący błąd, niezależnie od koloru (tekst + ikona). Głos i ton: <<karta>>Pola formularza: <<lista>>
Słaba zachęta/silna zachęta
Słabe: „Napisz tekst alternatywny dla tego obrazu”.
Rezultat: „Obraz” lub zbyt opisowy tekst, który nie spełnia swojej funkcji.
Mocne: „Zaproponuj tekst alternatywny dla tych obrazów; przekaż funkcję/znaczenie obrazu; napisz akcję dla ikon przycisków; zaznacz ikony dekoracyjne jako „muszą pozostać puste”.”
Rezultat: kontekstowe, zorientowane na funkcje, dokładne podteksty.
Różnica: silna zachęta zapewnia skupienie funkcjonalne + konwencję przycisków + dekoracyjne wyróżnienie.
Typowe błędy
- Mylenie zgody na sztuczną inteligencję z gwarancją dostępności. Nie zastępuje prawdziwych testów.
- Po prostu ładuję informacje do koloru. Użytkownicy niewidomi na kolory tracą informacje.
- Wyjaśnienie obrazu, a nie funkcji, w tekście alternatywnym. Dla ikony przycisku należy napisać akcję.
- Dostępność zostawmy na koniec. Jeśli nie zostanie rozpoczęty na etapie szkieletu, późniejsze łatanie będzie kosztowne.
- Przesadnie poprawiony język. Język włączający, który traci naturalność, pogarsza także zrozumiałość.
Podsumowując
Dostępność oznacza, że produkt jest dostępny dla każdego; To nie jest dodatek, to niezbędna i w większości przypadków prawna odpowiedzialność. Sztuczna inteligencja jest cenna jako szybki generator wstępnej analizy i wersji roboczej dla kontrastu, tekstu alternatywnego, dostępu do klawiatury i włączającego skanowania języka. Jednak automatyczne zatwierdzanie wychwytuje tylko niektóre błędy WCAG; Rzeczywista dostępność została potwierdzona testami z czytnikami ekranu i prawdziwymi użytkownikami technologii wspomagających. Użyj modelu jako przeglądarki frontowej, uzyskaj dowód z rzeczywistych testów.
Zadanie aplikacji
- Przy pierwszym monicie przeskanuj wstępnie opis interfejsu pod kątem dostępności.
- Poprawiaj wyłącznie informacje oparte na kolorach lub elementy nieoznaczone.
- Generuj teksty alternatywne zorientowane na funkcje dla wizualizacji na ekranie za pomocą drugiego monitu.
- Sprawdź swoje teksty pod kątem języka włączającego, korzystając z trzeciego monitu.
- Jeśli to możliwe, wypróbuj rzeczywisty test za pomocą czytnika ekranu i zwróć uwagę, czego brakuje podczas automatycznego skanowania.
lista kontrolna
- [ ] Wstępnie zeskanowałem kontrast, dostęp do klawiatury i etykiety.
- [ ] Nie zostawiłem informacji opartych wyłącznie na kolorze.
- [ ] Podteksty napisałem funkcjonalnie, dekoracyjne pozostawiłem puste.
- [ ] Dokonałem inkluzywnej kontroli języka, zachowałem naturalność.
- [ ] Nie uważałem automatycznego zatwierdzania za gwarancję dostępności.
- [ ] Zaplanowałem/wdrożyłem faktyczne testowanie technologii wspomagających.