Storefront accessibility lab / demonstracja
Fikcyjna karta produktu pokazuje sześć typowych problemów dostępności e-commerce oraz działające rozwiązania. To demonstracja procesu VOIDLAB, nie realizacja dla klienta ani certyfikat zgodności.
Działający komponent
Użyj Tab i Shift+Tab. Wybierz rozmiar strzałkami, dodaj produkt do koszyka i otwórz informacje o dostawie. Focus pozostaje widoczny, a zmiany są ogłaszane technologiom asystującym.
Problem → poprawka → retest
Każda pozycja pokazuje wpływ na użytkownika, bezpieczny kierunek wdrożenia i prosty test akceptacyjny. Fragmenty „przed” są prezentowane jako tekst — nie psują dostępności dema.
Sam rząd przycisków „40, 41, 42” nie przekazuje czytnikowi ekranu, czego dotyczą wartości.
<div><button>40</button>…</div><fieldset><legend>Rozmiar EU</legend>…</fieldset>Retest: czytnik ogłasza nazwę grupy, wybraną wartość i liczbę opcji.
Po próbie zakupu bez rozmiaru użytkownik otrzymuje jednoznaczny komunikat, a focus przechodzi do pierwszej opcji.
alert('Error');error.textContent = message;
firstSize.focus();Retest: uruchom „Dodaj do koszyka” bez wyboru rozmiaru i sprawdź pozycję focusu.
Komunikat role="status" informuje o produkcie, rozmiarze i liczbie pozycji bez przerywania pracy użytkownika.
cartCount.textContent = count;<p role="status" aria-live="polite">…</p>Retest: po dodaniu produktu czytnik ogłasza zmianę, ale focus pozostaje na przycisku.
Natywny element dialog ogranicza nawigację do otwartego okna. Po zamknięciu focus wraca do przycisku informacji.
<div class="modal">…</div><dialog aria-labelledby="shipping-title">…</dialog>Retest: otwórz okno, użyj Tab oraz Escape i sprawdź powrót focusu.
Pole kodu promocyjnego ma trwałą etykietę, powiązany opis błędu i aktualizowany stan aria-invalid.
Retest: wpisz błędny kod, a następnie ACCESS10; sprawdź treść i stan pola.
Zdjęcie produktu otrzymuje zwięzły tekst alternatywny, dzięki czemu jego znaczenie nie zależy wyłącznie od wzroku.
<img src="product.webp"><img src="product.webp" alt="Beżowy but Aster One…">Retest: czytnik ekranu ogłasza nazwę produktu oraz istotne cechy zdjęcia.
Przykład handoveru
Raport kończy się stanem poprawki i wynikiem ponownego testu. Nie pozostawia klienta z ogólną listą zaleceń.
| Komponent | Wpływ | Zmiana | Retest | Status |
|---|---|---|---|---|
| Wariant rozmiaru | Brak kontekstu opcji | fieldset i legend | Klawiatura + czytnik | Wdrożone |
| Walidacja zakupu | Brak identyfikacji błędu | Komunikat i przeniesienie focusu | Zakup bez rozmiaru | Wdrożone |
| Status koszyka | Zmiana niewidoczna dla AT | role="status" | Ogłoszenie po dodaniu | Wdrożone |
| Informacja o dostawie | Focus opuszcza modal | Natywny dialog | Tab, Escape, powrót | Wdrożone |
| Kod promocyjny | Błąd bez relacji z polem | aria-describedby i aria-invalid | Błędny/poprawny kod | Wdrożone |
| Zdjęcie produktu | Brak alternatywy tekstowej | Zwięzły atrybut alt | Czytnik ekranu | Wdrożone |
VOIDLAB AccessOps
Mini-audyt identyfikuje priorytety w kluczowej ścieżce. Dopiero na tej podstawie powstaje zakres technicznych poprawek.