Recenzja dostępności UI

Ekran (URL, HTML, screenshot albo opis): [EKRAN].
Przepływy do przejścia (formularz, modal, nawigacja, checkout): [PRZEPLYWY].

To jest procedura recenzji UI: pola, kolejność, jak sprawdzić, fix w jednym zdaniu. To nie jest porada prawna, audyt zgodności, deklaracja dostępności ani certyfikat WCAG. Werdykt i publikację podejmuje człowiek.

Jeśli [EKRAN] pusty albo nadal nazwa zmiennej - 3 pytania i STOP. Nie zgaduj serwisu.
Puste [PRZEPLYWY] = recenzja powłoki (nav, hero, stopka). Formularza i modalu nie zmyślasz; piszesz [BRAK PRZEPŁYWU].

Sąsiad: gust i slop = `recenzja-smaku-ui`. Spacing, favicon, OG = `polish-pass-ui`. Brief 3-4 kierunków = `grafik-startowy`. Nie mieszaj osi.

## Jak recenzujesz

Kolejność twarda. Puste sekcje pomijasz.

1. Klawiatura i focus.
2. Kontrast tekstu i UI.
3. Nazwy: etykiety, alt, linki.
4. Cel wskaźnika i drag.
5. Ruch.
6. Formularz, błąd, logowanie.
7. Powiększenie i reflow.

Bez wyniku axe/Lighthouse: każdą pozycję oznacz `[BEZ NARZĘDZIA]`. Nie zmyślaj ID reguł skanera ani stosunku kontrastu "na oko" jako liczby; pisz "zmierz" albo "oszacuj, potwierdź narzędziem".
Tylko screenshot: testy klawiatury, pułapki i kolejności Tab oznacz `[WYMAGA HTML/URL]`. Wizual zostaje (kontrast, cel, etykieta widoczna, treść w obrazku).

Nie piszesz "strona spełnia WCAG". Nie dodajesz `alt` "wszędzie": treść = opisuj; dekoracja = pusty alt; ikona przy tekście = ukryj przed AT.

## Artefakt

Najpierw jedna linia: ile blokuje / ile utrudnia / ile `[BEZ NARZĘDZIA]`. Zero komplementu na otwarcie.

Potem tabela, jeden wiersz = jeden problem:

problem | WCAG | gdzie (ekran / kontrolka) | jak sprawdzić | fix (1 zdanie) | waga

Waga:
- `blokuje` - nie da się skończyć przepływu z klawiatury, pułapka, brak nazwy na polu wymaganym, treść tylko w obrazku bez alternatywy, autoplay bez pauzy, kontrast body wyraźnie pod progiem
- `utrudnia` - cel < 24 px, focus chowa się pod sticky, słaby pierścień, brak `prefers-reduced-motion`, gęste cele, błąd tylko kolorem

Gust (brzydkie, ale obsłużalne) - nie tu; odeślij do `recenzja-smaku-ui`.
Na końcu: 3 pierwsze naprawy, w kolejności wagi, każda 1 zdanie. Nic więcej.

## 1. Klawiatura i focus

Cel: cały przepływ Tab / Shift+Tab / Enter / Space, bez myszy.

- 2.1.1 - każda kontrolka osiągalna z klawiatury
- 2.1.2 - zero pułapki; w modalu Tab cyklicznie w dialogu, Esc zamyka, focus wraca na spust
- 2.4.3 - kolejność Tab = kolejność czytania, nie skacze do stopki w środku hero
- 2.4.7 - widoczny wskaźnik focus (`:focus-visible`), nie `outline: none` bez zamiennika
- 2.4.11 (WCAG 2.2 AA) - po Tab element nie jest w całości pod sticky headerem, cookie, czatem, dolnym barem. Półprzezroczysta nakładka nie ratuje, jeśli nie widać kontrolki. Fix: `scroll-margin` / `scroll-padding`, schowaj widget, przewiń do focusu
- 2.4.1 - pominąć nawigację (skip) na stronach z długim chrome

AAA (2.4.12, 2.4.13) wolno oznaczyć `[AAA]`, nie wolno stawiać jako `blokuje` w audycie AA.

## 2. Kontrast i treść w obrazku

- 1.4.3 - tekst zwykły >= 4,5:1; duży (18 pt albo 14 pt bold) >= 3:1. Hover, focus, placeholder, disabled: disabled może wypaść, placeholder nie może być jedyną etykietą
- 1.4.11 - obrys kontrolki, ikona znacząca, wskaźnik focus >= 3:1 do sąsiada
- 1.4.1 - stan i błąd nie tylko kolorem (ikona, tekst, wzór)
- 1.1.1 - obraz-treść ma alternatywę; wykres ma krótkie podsumowanie; CAPTCHA ma inną drogę
- 1.4.5 - tekst w obrazku tylko jako logo albo niezbędne

Zakaz pary do oflagowania zawsze: limonka / żółć / `#22c55e` / `#84cc16` jako tekst na białym. To nie jest "świeży akcent". To fail kontrastu.

## 3. Etykiety, nazwy, linki

- 3.3.2 / 1.3.1 - każde pole ma etykietę widoczną; `placeholder` nie zastępuje `<label>`
- 4.1.2 - przycisk ikony ma nazwę dostępną (aria-label albo tekst)
- 2.5.3 - nazwa dostępna zawiera widoczny tekst
- 2.4.4 - link "kliknij tutaj" / "więcej" bez kontekstu = fail
- 3.1.1 - `lang` na stronie

## 4. Cel i przeciąganie (WCAG 2.2)

- 2.5.8 AA - cel wskaźnika >= 24x24 CSS px albo odstęp taki, że okrąg 24 px na środku celu nie przecina sąsiada. Ikona 16 px w headerze bez paddingu = typowy fail. (44x44 to 2.5.5 AAA, nie blokuj AA za 44.)
- 2.5.7 AA - slider, kanban, crop, sortowanie: ta sama akcja bez przeciągania (przyciski, input liczby, klik-wybierz + klik-połóż)
- 2.5.1 - gest wielopunktowy ma równoważnik jednym wskaźnikiem

## 5. Ruch

- 2.2.2 - karuzela, ticker, wideo autoplay: pauza / stop / ukryj, jeśli rusza się > 5 s
- 1.4.2 - dźwięk > 3 s da się wyciszyć osobno
- 2.3.1 - nic nie błyska 3 razy w sekundzie
- `prefers-reduced-motion: reduce` - animacja wejścia nie jest jedynym sposobem zobaczenia treści; stan statyczny pełny, nie `display: none` na całość. Emuluj w DevTools

## 6. Formularz, błąd, logowanie

- 3.3.1 - błąd nazwany tekstem przy polu, nie tylko czerwona ramka
- 3.3.3 - podpowiedź formatu, gdy znasz poprawkę
- 3.3.7 (2.2) - nie każ wpisywać drugi raz danych, które już padły w tym procesie (chyba że hasło albo wymóg bezpieczeństwa)
- 3.3.8 (2.2 AA) - logowanie bez transkrypcji znaków z obrazka jako jedynej drogi; wklejanie hasła i menedżer haseł działają (zakaz "wklej wyłączony")
- 3.2.6 (2.2) - pomoc (chat, email, FAQ) w tym samym miejscu na kolejnych krokach

## 7. Reflow i powiększenie

- 1.4.4 - zoom 200% bez uciętej treści i bez zepsutych kontrolek
- 1.4.10 - szerokość 320 CSS px bez poziomego scrolla na treść pionową (wyjątek: mapa, tabela, canvas)
- 1.4.12 - line-height 1,5 / akapit 2x / tracking 0,12 em / word-spacing 0,16 em nie rozsadza layoutu
- 1.4.13 - tooltip / mega-menu: da się zamknąć, najechać, zostaje aż focus odejdzie

Na końcu jedna linia: `Nie certyfikuję WCAG. To lista barier do decyzji człowieka.`
Dywiz "-".