Niedawno zapytano mnie o WCAG, zażartowałem że to nie wiedza tajemna i jak czegoś nie wiem to sobie doczytam. Więc projektujesz sobie fajny interfejs w Figmie, wszystko wygląda fantastycznie, ale czy przypadkiem nie tworzysz właśnie cyfrowego labiryntu dla osób, które widzą gorzej niż mole w nocy?

Kontrast

Czyli jak nie robić szarego tekstu na szarym tle Wyobraź sobie, że czytasz coś na ekranie po 8 godzinach scrollowania TikToka – oczy już i tak ledwo zipią. A teraz dodaj do tego tekst w kolorze #CCCCCC na tle #F5F5F5. No po co to?

Ratunek: Wtyczka Stark – klikasz, a ona krzyczy: "O kurde, kontrast 2:1, stary, popraw to!".

Lifehack: Jak nie masz pluginu, zrób screenshot i przerzuć do czarno-białego – jeśli wszystko zlewa się w jedną szarą miazgę, to znak, że jesteś diabłem dostępności. Możesz też użyć mojego skryptu poniżej.

Alt tekst

Czyli jak opisać obrazek, żeby ślepy kolega wiedział, o co chodzi Wrzucasz ikonę kosza? Super. Ale czy ktoś, kto nie widzi, ma się domyślić, że to nie jest ikona "wyrzuć swoje marzenia"?

Jak to ogarnąć: Klikasz prawym na ikonę w Figmie, wpisujesz w opis coś w stylu: "Ikona kosza – kliknij, żeby usunąć ten nieszczęsny produkt, którego i tak nie kupisz".

Lifehack: Jeśli obrazek jest tylko dla ozdoby (np. abstrakcyjny pasek), daj alt="" – czytniki go wtedy oleją.

Przyciski

Czyli jak nie robić kropek wielkości ziarnka piasku. Pamiętasz te przyciski, które na mobile'u trzeba klikać pazurami, bo inaczej trafiasz w sąsiedni element? No właśnie. WCAG mówi: min. 44x44 piksele.

Jak to ogarnąć: Najeżdżasz kursorem na przycisk w Figmie i myślisz: "Czy mój palec to trafi po piątym browarze?". Jeśli nie – powiększ.

Lifehack: Dodaj stan "focus" (np. niebieską obwódkę), żeby wiadomo było gdzie jesteś.

Semantyczny html

Czyli jak nie robić bałaganu w kodzie. Tworzysz nagłówek? Nie rób tego divem z klasą "tytuł-mega-wazny", tylko użyj H1. Dlaczego? Bo czytniki ekranu to nie mentaci.

Jak to ogarnąć: Używaj Text Styles i nazywaj je "Heading 1", "Heading 2" – developerzy będą ci błogosławić.

Lifehack: Kolejność warstw w Figmie = kolejność czytania. Jeśli najpierw jest "Submit", a potem pola formularza, to ktoś się wkurzy xd.

Testowanie

Czyli jak nie być tym gościem, który mówi "u mnie działa".

Jak to ogarnąć: Symulacja daltonizmu, w Figmie, Adee Comprehensive Accessibility Tool, sprawdzi ci color blindness, czy twój piękny czerwony error nie wygląda jak tło.

Lifehack: Prototypowanie klawiatury, sprawdź, czy da się przejść przez cały formularz tabem. Nie? – czas na poprawki.