Kontekst i wyzwanie
Od 28 czerwca 2025 roku europejski akt o dostępności obejmuje sklepy internetowe. W Polsce wszedł ustawą z 26 kwietnia 2024 roku, w Niemczech jako BFSG. Właściciel sklepu na Shopify zwykle nie wie, od czego zacząć. Najprościej kupić nakładkę. To skrypt, który zmienia wygląd strony w przeglądarce. Kod motywu zostaje jednak taki sam, a to on trafia do czytników ekranu i do audytora. W styczniu 2025 roku amerykańska FTC ogłosiła, że accessiBe zapłaci milion dolarów za obietnice, których nakładka nie spełniała. Ręczny audyt trwa z kolei dni albo tygodnie i kończy się raportem, który właściciel musi komuś przekazać.
AccessifyAI miał pokazać właścicielowi, co jest nie tak w jego sklepie, zrozumiałym językiem i w kolejności, w jakiej warto to naprawiać. Każdy problem miał prowadzić do konkretnego pliku motywu, a klienci sklepu mieli dostać pomoc od razu, zanim lista się skończy. Bez obietnic zgodności, bo żadne narzędzie nie może ich dać.
Rozwiązanie
AccessifyAI to mój własny produkt w Shopify App Store. Zaprojektowałem go, zbudowałem i utrzymuję: skaner, panel w adminie Shopify, widget dla klientów sklepu, stronę accessifyai.de i listing w czterech językach. Skaner automatycznie testuje 15 z 55 kryteriów WCAG 2.2 na poziomach A i AA oraz dwa na poziomie AAA, w tym trzy nowe w wersji 2.2: za małe przyciski do stuknięcia, fokus schowany pod przyklejonym nagłówkiem i CAPTCHA przy logowaniu. Wynik mówi to wprost. Na górze stoi, ile z 15 testowanych kryteriów przechodzi, pod spodem panel z listą tego, co zostało sprawdzone, i tego, co musi sprawdzić człowiek, a ocena od 0 do 100 jest linią drugorzędną, bo ocena to nie zgodność. Pierwszy wynik dla strony głównej przychodzi po około 30 sekundach. Sklep zamknięty hasłem też da się sprawdzić. Hasło jest przechowywane w postaci zaszyfrowanej.
Ekran skanera zaczyna się od jednego zdania o stanie sklepu, potem liczby problemów krytycznych, poważnych i drobnych oraz historia skanów ze zmianą od poprzedniego. Każdy problem jest opisany dla właściciela sklepu: co jest nie tak, kogo to dotyczy i od czego zacząć, a numer kryterium WCAG stoi obok, gdy potrzebuje go programista. Błąd w nagłówku albo stopce pokazuje wszystkie strony, na których się powtarza. Naprawia się go raz. Przy błędach motywu aplikacja wskazuje plik Liquid i otwiera go w edytorze kodu Shopify. Zmianę wprowadza właściciel albo jego programista, więc w motywie nic nie zmienia się bez ich wiedzy. Szkice opisów zdjęć produktów pisze AI. W planie Pro model ogląda samo zdjęcie, a właściciel czyta i zatwierdza każdy szkic, zanim trafi do sklepu. Poprzedni tekst zostaje zachowany.
Klienci sklepu dostają widget z ośmioma profilami, między innymi dla osób z epilepsją, dysleksją albo ADHD, dla seniorów i dla osób, które poruszają się klawiaturą. Do tego kontrast, rozmiar tekstu, linijka do czytania i lupa. Panel otwiera się też skrótem Alt+A. Widget pomaga od pierwszego dnia. Nie zmienia kodu motywu, nie udaje, że naprawia sklep, i otwiera się od razu na ustawieniach dostępności, bez zapisów i reklam. Pełny panel przeglądarka pobiera dopiero po jego otwarciu. Aplikacja, widget, strona i listing w Shopify App Store mówią po polsku, angielsku, niemiecku i francusku. Widget możesz wypróbować w materiałach tego projektu, na stronie samego produktu.
Efekty i stack
Aplikacja Shopify, która znajduje bariery dostępności w sklepie, tłumaczy je po ludzku i wskazuje plik motywu z poprawką.
- 15 z 55
- kryteriów WCAG 2.2 A i AA testowanych automatycznie, reszta na liście do sprawdzenia przez człowieka
- 8 profili
- w widgecie dla klientów sklepu, od epilepsji po czytnik ekranu
- 4 języki
- w aplikacji, widgecie, na stronie i w listingu Shopify
React RouterTypeScriptShopify App BridgePolarisPrismaPostgreSQLNext.jsGoogle Cloud Run
