O tym audycie
Wewnętrzna weryfikacja, nie certyfikowany audyt. Poniższa checklista to wynik naszych wewnętrznych testów — nie zastępuje formalnego audytu przeprowadzonego przez certyfikowanego specjalistę.
Prawo nie nadaje wyłączności na audyty WCAG żadnej instytucji — formalnie każdy może sprawdzić stronę i wystawić raport. W praktyce jednak rynek wypracował uznawane ścieżki certyfikacji audytorów: w Polsce to kwalifikacja rynkowa w Zintegrowanym Systemie Kwalifikacji (ZSK), a międzynarodowo — certyfikaty IAAP (WAS, CPACC). Audyty od ekspertów z takimi kwalifikacjami mają realną wartość prawną i biznesową, szczególnie po wejściu w życie European Accessibility Act.
Mimo to uważamy, że wewnętrzna weryfikacja ma sens — pozwala wyłapać i naprawić problemy na bieżąco, bez czekania na zewnętrzny audyt. Każde kryterium WCAG 2.2 sprawdziliśmy ręcznie: kod źródłowy, accessibility tree, nawigacja klawiaturą, kontrast kolorów, zachowanie screen readera.
Weryfikację przeprowadzono na stronie demo.witly.ai (headless storefront Witly podłączony do demo sklepu Shoper). Sprawdzono stronę główną, listę kategorii, kartę produktu i formularz newslettera.
PASSKryterium spełnione
WARNCzęściowo spełnione / drobne uwagi
FAILNiespełnione
Podsumowanie
Wynik ogólny
Poziom A
31 / 31
31 pass, 0 warn, 0 fail
Poziom AA
24 / 24
24 pass, 0 warn, 0 fail
Poziom AAA
28 / 31
28 pass, 0 warn, 3 fail
Ocena: Storefront spełnia WCAG 2.2 na poziomie AA — wszystkie 55 kryteriów A+AA zaliczone (31 A + 24 AA). Dodatkowo sprawdzone wszystkie 31 kryteriów AAA: 28 spełnionych, 3 niespełnione (3.1.3, 3.1.5, 3.1.6: glosariusz, poziom czytania, wymowa — wymagają mechanizmów lingwistycznych wykraczających poza typowy sklep internetowy).
Zasada 1
Postrzegalność (Perceivable)
Treść musi być prezentowana w sposób dostępny dla zmysłów — wzroku, słuchu, dotyku. Alternatywy tekstowe, kontrast, adaptowalność.
1.1 Alternatywy tekstowe
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 1.1.1 | A | PASS | PASS | Treść nietekstowa. Każdy element nietekstowy (obrazy, ikony, przyciski) ma alternatywę tekstową. Obrazy produktów mają opisowe alt (np. „Sukienka ołówkowa SunnyDay musztardowa"). Przyciski ikon (koszyk, konto, szukaj) mają aria-label. Ikony social media mają tekst alternatywny. |
1.2 Media czasowe
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 1.2.1–1.2.9 | A–AAA | PASS | PASS | Audio i video. Napisy, audiodeskrypcja, transkrypcja. Storefront nie zawiera treści audio ani video — kryteria spełnione (brak treści = brak naruszeń). |
1.3 Adaptowalność
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 1.3.1 | A | PASS | PASS | Informacje i relacje. Struktura treści zakodowana semantycznie: <header>, <main>, <nav>, <footer>, <search>. Nagłówki H1→H2 bez przeskakiwania poziomów. Listy produktów w <ul>/<li>. Dialogi z role="dialog" + aria-modal + aria-labelledby. |
| 1.3.2 | A | PASS | PASS | Znacząca kolejność. Kolejność DOM jest logiczna: header → nawigacja → main (hero → kategorie → nowości → polecane → bestsellery) → footer. Screen reader odczytuje treść we właściwej kolejności. |
| 1.3.3 | A | PASS | PASS | Cechy sensoryczne. Instrukcje nie polegają wyłącznie na kształcie, rozmiarze, lokalizacji wizualnej czy dźwięku elementu. |
| 1.3.4 | AA | PASS | PASS | Orientacja. Treść nie jest zablokowana w jednej orientacji ekranu. Brak screen-orientation lock. Strona działa w pionie i poziomie. |
| 1.3.5 | AA | PASS | PASS | Identyfikacja celu pola formularza. Newsletter email: autocomplete="email". Wyszukiwarka: type="search". Pola formularza mają prawidłowe atrybuty identyfikujące ich cel. |
| 1.3.6 | AAA | PASS | PASS | Identyfikacja celu elementów UI. Wszystkie regiony mają aria-label: nawigacja kategorii, breadcrumbs, search, dialogi (menu, checkout, panel dostępności, nagrywanie głosu). Pola formularzy z autocomplete (email, given-name). Przyciski ikon z opisowymi aria-label. |
1.4 Rozróżnialność
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 1.4.1 | A | PASS | PASS | Użycie koloru. Kolor nie jest jedynym sposobem przekazywania informacji. Ceny, nazwy produktów i stany (dostępność, promocja) są wyrażone tekstem. |
| 1.4.2 | A | PASS | PASS | Kontrola audio. Strona nie odtwarza automatycznie żadnego dźwięku — kryterium spełnione. |
| 1.4.3 | AA | PASS | PASS | Kontrast (minimum 4.5:1). Czarny tekst na białym tle w treści — kontrast OK. Hero sekcja: ciemny overlay rgba(15,23,42,0.88→0.12) + badge'y z ciemnym tłem rgba(15,23,42,0.65) zapewniają wystarczający kontrast białego tekstu na zdjęciu. |
| 1.4.4 | AA | PASS | PASS | Zmiana rozmiaru tekstu. Tekst można powiększyć do 200% bez utraty treści. Layout responsywny, breakpointy mobilne działają prawidłowo. |
| 1.4.5 | AA | PASS | PASS | Obrazy tekstu. Cały tekst jest prawdziwym HTML — nigdzie nie użyto obrazów zastępujących tekst. |
| 1.4.6 | AAA | PASS | PASS | Kontrast wzmocniony (7:1). Hero overlay przyciemniony do min. opacity 0.55 (od 0.92 do 0.55 w gradiencie) — biały tekst na ciemnym tle spełnia próg 7:1. Reszta strony: ciemny tekst na białym tle, kontrast >10:1. |
| 1.4.10 | AA | PASS | PASS | Reflow (320px). Treść przegrupowuje się prawidłowo na wąskich ekranach. Brak poziomego scrollowania przy 320px CSS width. Meta viewport poprawne. |
| 1.4.11 | AA | PASS | PASS | Kontrast elementów nietekstowych (3:1). Ikony kontrolek (search, koszyk, konto), obramowania pól formularzy i przyciski karuzel mają wystarczający kontrast względem tła. |
| 1.4.12 | AA | PASS | PASS | Odstępy tekstu. Zmiana line-height, letter-spacing i word-spacing nie powoduje utraty treści. Brak overflow: hidden na kontenerach tekstowych blokujących powiększone spacing. |
| 1.4.13 | AA | PASS | PASS | Treść po hover/focus. Dropdown menu w nawigacji pojawia się na hover (desktop) — można go zamknąć Escape, treść pod spodem nie znika. Na mobile nawigacja przez menu hamburger (brak hover). |
| 1.4.7 | AAA | PASS | PASS | Cichy lub brak dźwięku tła. Storefront nie odtwarza żadnego audio — brak naruszeń. |
| 1.4.8 | AAA | PASS | PASS | Prezentacja wizualna. Tryb high-contrast (inwersja kolorów) w panelu dostępności. Tekst nie jest wyjustowany (text-align: justify nigdzie nie użyte). Line-height bazowy 1.6 (wymóg: 1.5). Tekst skalowalny przez panel A11y (do +25px). Brak ograniczenia szerokości łamiącego reflow. |
| 1.4.9 | AAA | PASS | PASS | Obrazy tekstu (bez wyjątków). Cały tekst jest prawdziwym HTML — brak obrazów zastępujących tekst. Logotypy i zdjęcia produktów to jedyne grafiki. |
Zasada 2
Funkcjonalność (Operable)
Interfejs musi być obsługiwalny — klawiaturą, bez limitu czasu, bez migających elementów, z czytelną nawigacją.
2.1 Dostępność klawiaturowa
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 2.1.1 | A | PASS | PASS | Klawiatura. Wszystkie funkcje dostępne z klawiatury: nawigacja Tab, aktywacja Enter/Space. Skip link „Przejdź do treści" widoczny na focus. Przyciski karuzel, formularze, linki produktów — wszystko osiągalne klawiaturą. |
| 2.1.2 | A | PASS | PASS | Brak pułapki klawiatury. Modale (koszyk, menu mobilne) mają focus trap z aria-modal, ale można je zamknąć klawiszem Escape. Focus wraca do elementu wywołującego. |
| 2.1.3 | AAA | PASS | PASS | Klawiatura (bez wyjątków). Cała funkcjonalność dostępna z klawiatury. Brak drag-and-drop, rysowania ani interakcji zależnych od ścieżki kursora, które nie miałyby alternatywy klawiszowej. |
| 2.1.4 | A | PASS | PASS | Skróty klawiszowe. Storefront nie definiuje custom keyboard shortcuts jednoznakowych, więc nie ma ryzyka przypadkowej aktywacji. |
2.2 Wystarczający czas
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 2.2.1 | A | PASS | PASS | Możliwość regulacji czasu. Karuzele produktów (Nowości, Polecane, Bestsellery) nie mają autoplay — przesuwanie tylko ręcznie przyciskami Poprzedni/Następny lub swipe. Brak limitów czasowych na stronie. |
| 2.2.2 | A | PASS | PASS | Pauza, stop, ukryj. Brak automatycznie poruszających się elementów — karuzele produktów są statyczne i przesuwane ręcznie. Nie ma potrzeby pauzy. |
| 2.2.3 | AAA | PASS | PASS | Brak limitu czasu. Storefront nie narzuca limitów czasowych na treść. Sesja odnawiany jest automatycznie w tle — użytkownik nie traci kontekstu. |
| 2.2.4 | AAA | PASS | PASS | Przerywanie (interruptions). Newsletter popup można zamknąć (Escape / przycisk X), a po zamknięciu jest zapamiętywany w localStorage i nie pojawia się ponownie. Użytkownik może stłumić przerwanie. |
| 2.2.5 | AAA | PASS | PASS | Ponowna autentykacja. Storefront nie wymaga logowania — auth delegowana do platformy (Shoper/WooCommerce). Sesja odnawiana automatycznie. |
| 2.2.6 | AAA | PASS | PASS | Ostrzeżenie o timeout. Brak timeoutów powodujących utratę danych — koszyk przechowywany po stronie platformy, nie wygasa. |
2.3 Ataki padaczki i reakcje fizyczne
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 2.3.1 | A | PASS | PASS | Trzy błyski lub poniżej progu. Żaden element strony nie miga częściej niż 3 razy na sekundę. Brak stroboskopowych animacji. CSS prefers-reduced-motion obsługiwane (2 reguły w arkuszach stylów). |
| 2.3.2 | AAA | PASS | PASS | Trzy błyski. Żaden element nie miga — absolutny brak flashy. Wszystkie animacje CSS mają czas trwania ≥0.15s (max ~6.6 cykli/s przy pełnym fade, ale żadna nie jest powtarzalnym błyskiem). |
| 2.3.3 | AAA | PASS | PASS | Animacja z interakcji. Globalna reguła @media (prefers-reduced-motion: reduce) wyłącza wszystkie animacje i przejścia (animation-duration: 0s !important, transition-duration: 0s !important). |
2.4 Nawigacja
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 2.4.1 | A | PASS | PASS | Pomiń bloki. Skip link „Przejdź do treści" prowadzący do #main-content. Widoczny na focus, ukryty wizualnie gdy nieaktywny. Pozwala ominąć nawigację i przejść od razu do treści. |
| 2.4.2 | A | PASS | PASS | Tytuł strony.<title>Witly Headless Demo</title> — obecny i opisowy. Każda podstrona ma unikalny tytuł (np. nazwa kategorii, nazwa produktu, nazwa strony CMS). |
| 2.4.3 | A | PASS | PASS | Kolejność fokusa. Logiczna kolejność tabulacji: skip link → logo → search → ikony headerowe → nawigacja → treść główna → footer. Brak tabindex > 0. |
| 2.4.4 | A | PASS | PASS | Cel linku (w kontekście). Linki produktów zawierają pełne nazwy produktów. Linki nawigacyjne jasno opisują cel. Przyciski rozwijające (np. „Czytaj więcej", „Pokaż wszystkie") mają role="button", aria-label i aria-expanded — cel jasny z kontekstu sekcji. |
| 2.4.5 | AA | PASS | PASS | Wiele sposobów dotarcia do treści. Nawigacja kategorii + wyszukiwarka AI + linki w footer. Użytkownik ma kilka ścieżek dotarcia do każdej podstrony. |
| 2.4.6 | AA | PASS | PASS | Nagłówki i etykiety. Sekcje mają nagłówki H1/H2 (Kategorie, Nowości, Polecane, Bestsellery). Pola formularzy mają etykiety (aria-label, placeholder). |
| 2.4.7 | AA | PASS | PASS | Widoczny fokus. Focus ring widoczny na wszystkich interaktywnych elementach. Skip link z wyraźnym outline przy focus. 53 reguły :focus w arkuszach CSS. Na mobile fokus klawiaturowy nie ma zastosowania. |
| 2.4.8 | AAA | PASS | PASS | Lokalizacja. Breadcrumbs (<nav aria-label="Breadcrumbs">) na stronach kategorii i produktów. Ostatni element breadcrumba to <h1> — jasna informacja o aktualnej pozycji. |
| 2.4.9 | AAA | PASS | PASS | Cel linku (sam link). Wszystkie linki mają czytelny tekst: produkty — pełna nazwa, nawigacja — nazwa kategorii, paginacja — aria-label="page no X". Brak generycznych „kliknij tutaj" czy „więcej". |
| 2.4.10 | AAA | PASS | PASS | Nagłówki sekcji. Strony używają hierarchii H1 → H2 → H3. Sekcje produktowe, filtry, footer — każda z nagłówkiem. Panel dostępności: H2 → H3 dla podsekcji. |
| 2.4.11 | AA | PASS | PASS | Fokus nie przesłonięty (minimum). Sfokusowany element nie jest zasłaniany przez sticky header ani inne elementy interfejsu. Nowe kryterium WCAG 2.2. |
| 2.4.12 | AAA | PASS | PASS | Fokus nie przesłonięty (wzmocnione). Floating buy bar na mobile ma scroll-padding-bottom offset — sfokusowany element nie jest zasłonięty. Modale (newsletter, exit popup) centrowane z overlay. |
| 2.4.13 | AAA | PASS | PASS | Wygląd fokusa. Focus ring: 3px solid #ff0000 z offset 3px — czerwony outline na wszystkich elementach interaktywnych. Kontrast koloru obramowania wyraźny na każdym tle. |
2.5 Modalności wejścia
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 2.5.1 | A | PASS | PASS | Gesty wskaźnika. Karuzele nie wymagają gestu swipe — mają przyciski Poprzedni/Następny jako alternatywę dla dotyku. |
| 2.5.2 | A | PASS | PASS | Anulowanie wskaźnika. Akcje uruchamiane na click (mouse up), nie na mousedown. Standardowe zachowanie HTML. |
| 2.5.3 | A | PASS | PASS | Etykieta w nazwie. Widoczna etykieta elementu zawiera się w jego accessible name (np. przycisk „Szukaj" ma accessible name „Szukaj"). |
| 2.5.4 | A | PASS | PASS | Uruchamianie ruchem. Brak funkcji aktywowanych potrząśnięciem, przechyleniem czy innym ruchem urządzenia — kryterium spełnione. |
| 2.5.7 | AA | PASS | PASS | Ruchy przeciągania (dragging). Brak elementów draggable. Karuzele mają przyciski nawigacyjne jako alternatywę. Nowe kryterium WCAG 2.2. |
| 2.5.5 | AAA | PASS | PASS | Rozmiar celu dotykowego (wzmocniony, 44×44px). Przyciski, checkboxy, pola input, ikony zamknięcia — wszystkie mają min-width: 44px; min-height: 44px. Ikony wewnątrz mogą być mniejsze, ale owijający element spełnia 44px. |
| 2.5.6 | AAA | PASS | PASS | Jednoczesne mechanizmy wejścia. Storefront nie ogranicza modalności — mysz, klawiatura, dotyk i głos (speech recognition w wyszukiwarce) działają jednocześnie. Brak pointer-events: none blokujących alternatywne wejście. |
| 2.5.8 | AA | PASS | PASS | Minimalny rozmiar celu dotykowego (24×24px). Wszystkie interaktywne elementy spełniają minimum 24×24px. Nazwy produktów w karuzelach mają min-height: 24px z dodatkowym paddingiem. Nowe kryterium WCAG 2.2. |
Zasada 3
Zrozumiałość (Understandable)
Treść i obsługa interfejsu muszą być zrozumiałe — język strony, przewidywalne zachowanie, pomoc przy błędach.
3.1 Czytelność
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 3.1.1 | A | PASS | PASS | Język strony.<html lang="pl"> — atrybut języka ustawiony prawidłowo. Screen reader odczyta treść z polską wymową. |
| 3.1.2 | AA | PASS | PASS | Język części. Cała treść jest po polsku. Brak obcojęzycznych fragmentów wymagających oznaczenia atrybutem lang. |
| 3.1.3 | AAA | FAIL | FAIL | Nietypowe słowa. Brak glosariusza ani <dfn> dla żargonu. Dlaczego nie spełniamy: kryterium wymaga mechanizmu objaśniania nietypowych słów (np. glosariusz, tooltips). Interfejs sklepu używa wyłącznie standardowego polskiego słownictwa e-commerce („Koszyk", „Dodaj do ulubionych", „Filtruj"). Opisy produktów pochodzą z platformy sprzedawcy (Shoper/WooCommerce) — nie kontrolujemy ich treści. Kryterium zaprojektowano dla serwisów z ciężkim żargonem (medyczne, prawne, rządowe). Żaden duży sklep internetowy (Amazon, Zalando, Allegro) nie implementuje glosariusza terminów produktowych. |
| 3.1.4 | AAA | PASS | PASS | Skróty. Wszystkie skróty owinięte w <abbr title="...">: AI → „sztuczna inteligencja", WCAG → „Web Content Accessibility Guidelines". |
| 3.1.5 | AAA | FAIL | FAIL | Poziom czytania. Brak uproszczonej wersji treści. Dlaczego nie spełniamy: kryterium wymaga alternatywnej wersji tekstu na poziomie szkoły podstawowej (ISCED 2) lub treści uzupełniającej (ilustracje, streszczenia). Panel dostępności pozwala zmienić rozmiar tekstu, interlinię i kontrast — ale nie upraszcza samego języka. W sklepie internetowym treść to głównie nazwy produktów, ceny i krótkie opisy — z natury zwięzłe i zrozumiałe. Opisy produktów tworzy sprzedawca — nie możemy ich automatycznie uprościć bez utraty precyzji (np. parametry techniczne, składy materiałów). Żaden sklep e-commerce nie oferuje trybu „łatwego czytania" treści produktowych. |
| 3.1.6 | AAA | FAIL | FAIL | Wymowa. Brak mechanizmu fonetycznego. Dlaczego nie spełniamy: kryterium wymaga znacznika wymowy (<ruby> lub link do nagrania) dla słów, których znaczenie zależy od wymowy. Polski nie ma homofonów powodujących niejednoznaczność w kontekście e-commerce — „zamek" (błyskawiczny vs budowla) to jedyny teoretyczny przykład, ale kontekst produktu zawsze jednoznacznie go rozstrzyga. Kryterium jest istotne w językach z tonami (chiński, japoński) lub dużą liczbą homofonów (angielski: read/read, lead/lead). Żaden europejski sklep internetowy nie implementuje znaczników wymowy. |
3.2 Przewidywalność
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 3.2.1 | A | PASS | PASS | Na fokusie. Przeniesienie fokusa na element nie powoduje nieoczekiwanej zmiany kontekstu (np. przekierowania, otwarcia okna). |
| 3.2.2 | A | PASS | PASS | Na wejściu. Zmiana wartości pola formularza nie powoduje automatycznego submitowania ani zmiany kontekstu bez wyraźnej akcji użytkownika. |
| 3.2.3 | AA | PASS | PASS | Spójna nawigacja. Nawigacja identyczna na każdej podstronie — ten sam header, te same linki, ta sama kolejność. |
| 3.2.4 | AA | PASS | PASS | Spójna identyfikacja. Te same funkcje mają te same nazwy: „Szukaj", „Koszyk", „Konto" — konsekwentnie na każdej podstronie. |
| 3.2.5 | AAA | PASS | PASS | Zmiana na żądanie. Brak automatycznych przekierowań, auto-submitów ani zmian kontekstu bez akcji użytkownika. Newsletter popup jest zamykalny i zapamiętywany. |
| 3.2.6 | A | PASS | PASS | Spójna pomoc. Chat AI zawsze w tym samym miejscu (prawy dolny róg). Nowe kryterium WCAG 2.2. |
3.3 Pomoc przy wprowadzaniu danych
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 3.3.1 | A | PASS | PASS | Identyfikacja błędu. Newsletter email: type="email" zapewnia natywną walidację z komunikatem przeglądarki. Nieprawidłowy format jest sygnalizowany. |
| 3.3.2 | A | PASS | PASS | Etykiety lub instrukcje. Pola formularzy mają etykiety: wyszukiwarka — label + placeholder „Szukaj produktów…", newsletter — placeholder „Twój adres e-mail". |
| 3.3.3 | AA | PASS | PASS | Sugestie błędów. Pola email (type="email") walidowane przez przeglądarkę z komunikatem o poprawnym formacie. Błędy serwera wyświetlane z role="alert". Newsletter: komunikat o błędzie widoczny pod polem. |
| 3.3.4 | AA | PASS | PASS | Zapobieganie błędom (finanse, prawo, dane). Storefront nie przetwarza płatności bezpośrednio — checkout delegowany do platformy sklepu (Shoper/WooCommerce), która ma własny krok potwierdzenia zamówienia. Newsletter: zapis odwracalny (wypisanie jednym klikiem). |
| 3.3.7 | A | PASS | PASS | Redundantne wpisywanie. Strona nie wymaga wielokrotnego wpisywania tych samych danych w jednym procesie. Nowe kryterium WCAG 2.2. |
| 3.3.5 | AAA | PASS | PASS | Pomoc kontekstowa. Chatbot AI dostępny na każdej stronie (prawy dolny róg) — obsługuje pytania o produkty, zamówienia, nawigację. Formularze mają placeholder z instrukcją. |
| 3.3.6 | AAA | PASS | PASS | Zapobieganie błędom (wszystkie formularze). Newsletter: zapis odwracalny (wypisanie jednym klikiem). Wyszukiwarka: brak ryzyka utraty danych (client-side). Checkout: delegowany do platformy z krokiem potwierdzenia. |
| 3.3.7 | A | PASS | PASS | Redundantne wpisywanie. Strona nie wymaga wielokrotnego wpisywania tych samych danych w jednym procesie. Nowe kryterium WCAG 2.2. |
| 3.3.8 | AA | PASS | PASS | Dostępna autentykacja. Strona główna demo nie wymaga logowania. Checkout obsługuje zakupy bez konta. Nowe kryterium WCAG 2.2. |
| 3.3.9 | AAA | PASS | PASS | Dostępna autentykacja (wzmocniona). Storefront nie wymaga logowania — autentykacja delegowana do platformy (Shoper/WooCommerce). Brak testów kognitywnych (CAPTCHA, puzzle) na storefroncie. |
Zasada 4
Solidność (Robust)
Treść musi być wystarczająco solidna, by mogły ją interpretować różne technologie wspomagające — screen readery, przeglądarki, asystenci głosowi.
| Kryterium | Poziom | Desktop | Mobile | Opis kryterium i ocena |
|---|---|---|---|---|
| 4.1.2 | A | PASS | PASS | Nazwa, rola, wartość. Wszystkie interaktywne elementy mają prawidłowe role, aria-label lub tekst. Przyciski: „Konto", „Koszyk", „Szukaj", „Otwórz czat", „Poprzedni slajd", „Następny slajd". Dialogi z role="dialog" + aria-labelledby. |
| 4.1.3 | AA | PASS | PASS | Komunikaty statusu. 4 regiony aria-live na stronie — komunikaty o dodaniu do koszyka, wynikach wyszukiwania i inne dynamiczne aktualizacje są ogłaszane przez screen reader bez przenoszenia fokusa. |
Podsumowanie
Headless storefront Witly spełnia WCAG 2.2 na poziomie AA — wszystkie 55 kryteriów A+AA zaliczone (31 A + 24 AA). Na poziomie AAA: 28/31 spełnionych. Niespełnione 3 kryteria (3.1.3 Nietypowe słowa, 3.1.5 Poziom czytania, 3.1.6 Wymowa) wymagają mechanizmów lingwistycznych wykraczających poza standardowy sklep e-commerce.
Ten audyt będzie aktualizowany wraz z rozwojem storefrontu.
Źródła
- WCAG 2.2 — Web Content Accessibility Guidelines (W3C Recommendation)
w3.org/TR/WCAG22/ - Understanding WCAG 2.2 — szczegółowe wyjaśnienia każdego kryterium
w3.org/WAI/WCAG22/Understanding/ - WCAG 2.2 Quick Reference — filtrowalna lista kryteriów
w3.org/WAI/WCAG22/quickref/