WCAG

📋 Wytyczne WCAG 2.2 AA dla sklepu internetowego Dom Inżyniera

Dokument stanowi załącznik do zlecenia wykonania sklepu internetowego.
 Wszystkie elementy strony muszą być zgodne z zasadami WCAG 2.2 – poziom AA, zgodnie z Rozporządzeniem Ministra Cyfryzacji oraz obowiązującymi standardami dostępności sieci.

Celem jest zapewnienie, by sklep był dostępny dla wszystkich użytkowników, w tym osób z niepełnosprawnościami wzrokowymi, ruchowymi lub poznawczymi.

1️⃣. Podstawowe założenia

  • Sklep musi spełniać standard WCAG 2.2 poziom AA.
  • Projekt i wdrożenie muszą być responsywne, semantyczne, czytelne i w pełni obsługiwalne z klawiatury.
  • Każdy element interfejsu (formularze, koszyk, menu, filtry, galerie produktów) musi działać zarówno myszką, jak i klawiaturą.
  • Należy zadbać o widoczny focus (obrys) elementów aktywnych.

2️⃣. Kolorystyka i kontrast

Kolory marki Dom Inżyniera:

  • Ciemna zieleń: #3B4A3F – kolor główny (CTA, nagłówki)
  • Niebieski techniczny: #264577 – akcent, linki
  • Beż: #F0E0D6 – tło
  • Drewno: #D2B48C – akcent dekoracyjny
  • Biały: #FFFFFF – tło / tekst
  • Czarny: #000000 – typografia

Wymagania kontrastu:

  • Tekst i tło: min. 4.5:1
  • Duży tekst (≥18 pt lub bold ≥14 pt): min. 3:1
  • Elementy UI (ikony, przyciski, granice): min. 3:1
  • Stany „hover”, „focus”, „active” muszą zachować kontrast min. 3:1 względem sąsiadujących elementów.

Wszystkie kombinacje należy zweryfikować w WebAIM Contrast Checker lub axe DevTools.

3️⃣. Struktura i semantyka

  • Struktura dokumentu: nagłówki H1–H2–H3, listy <ul>, semantyczne sekcje <main>, <nav>, <footer>.
  • Nie wolno stosować tabel do układu strony.
  • Tytuły stron (tag <title>) i nagłówki muszą odzwierciedlać treść.
  • Każdy przycisk, ikona lub grafika aktywna musi mieć tekst alternatywny (alt lub aria-label).

4️⃣. Dostępność dla klawiatury

  • Cała strona, w tym menu, koszyk, formularze, popupy, musi być obsługiwana klawiaturą.
  • Kolejność nawigacji (Tab) musi być logiczna i spójna.
  • Musi istnieć link „Przejdź do treści głównej” (skip link) widoczny po focusie.
  • Modalne okna (koszyk, newsletter, popupy) muszą mieć focus trap i możliwość zamknięcia klawiszem Esc.
  • Focus nie może być zasłonięty elementami sticky (nagłówkiem, menu).
  • Wskaźnik focusa musi być wyraźnie widoczny – obrys o kontraście min. 3:1.

5️⃣. Grafika, multimedia i alt-teksty

  • Każde zdjęcie produktu musi mieć opisowy alt (nazwa produktu).
  • Ikony czysto dekoracyjne powinny mieć aria-hidden=”true”.
  • Jeśli będą filmy, muszą mieć napisy i transkrypcję.
  • Nie stosować elementów migoczących (>3 Hz).

6️⃣. Formularze (rejestracja, płatność, kontakt)

  • Każde pole musi mieć etykietę (label lub aria-label).
  • Błędy muszą być opisane słownie, nie tylko kolorem (np. „Pole e-mail jest wymagane”).
  • Stosować aria-describedby dla komunikatów błędów.
  • Włączyć autocomplete dla pól (imię, e-mail, adres, NIP).
  • Nie wymagać powtórnego wpisywania tych samych danych (WCAG 3.3.7 „Redundant entry”).
  • Logowanie musi umożliwiać pokazanie hasła i działać z menedżerem haseł (WCAG 3.3.8).

7️⃣. Nawigacja i menu

  • Menu główne i rozwijane muszą być dostępne z klawiatury (strzałki, Enter, Esc).
  • Struktura menu zgodna z WAI-ARIA Authoring Practices (menubar/disclosure).
  • Breadcrumbs (ścieżka powrotu) i spójna nawigacja na każdej stronie.
  • Linki muszą być podkreślone – kolor nie wystarcza do odróżnienia (WCAG 1.4.1).

8️⃣. Komponenty interfejsu

Galerie produktów:

  • Obrazy miniatur jako przyciski z aria-pressed (dla wybranego zdjęcia).
  • Przycisk „Powiększ” z etykietą „Otwórz galerię zdjęć”.

Koszyk / checkout:

  • Okno modalne jako role=”dialog”, z aria-labelledby.
  • Obsługa Enter, Tab, Esc.

Filtry i sortowanie:

  • Checkboxy, przełączniki i suwaki muszą mieć czytelne etykiety i być dostępne z klawiatury.

Pomoc / kontakt:

  • Link do pomocy/FAQ musi znajdować się w tym samym miejscu na każdej podstronie (WCAG 3.2.6 „Consistent Help”).

9️⃣. Rozmiary elementów i dotyk

  • Minimalny obszar klikalny: 24 × 24 px (WCAG 2.5.8 „Target Size (min)”).
  • Gesty przeciągania (np. slider) muszą mieć alternatywę w formie przycisków (WCAG 2.5.7 „Dragging Movements”).

🔟. Testy i odbiór

Testy obowiązkowe przed odbiorem:

  • Przejście pełnej ścieżki zakupowej (produkt → koszyk → płatność) tylko klawiaturą.
  • Sprawdzenie poprawności struktury nagłówków (H1–H3).
  • Walidacja kontrastu wszystkich stanów (normalny, hover, focus, disabled).
  • Test screen readerem (NVDA lub VoiceOver) – czy wszystkie etykiety są czytelne.
  • Test Lighthouse Accessibility ≥ 90 pkt.

Brak akceptacji: jeżeli którykolwiek z elementów nie spełnia powyższych kryteriów WCAG 2.2 AA.

📎. Materiały dodatkowe

Dla wykonawcy:

✅ Podsumowanie

Celem jest stworzenie sklepu internetowego Dom Inżyniera, który:
  • spełnia standard WCAG 2.2 AA,
  • jest w pełni dostępny klawiaturą,
  • ma właściwy kontrast i czytelność,
  • jest semantyczny i kompatybilny z technologiami asystującymi,
  • zachowuje funkcjonalność i estetykę marki.