/* Warstwa dostępności KASZTELANII. * * DLACZEGO OSOBNY PLIK, A NIE `dist/assets/main.css`. * Kompilat w `dist/` jest w repozytorium, ale `node_modules` nie istnieje, łańcuch * narzędzi jest stary (gulp 4, składnia webpacka 4), a `npm run build` zaczyna od * `rimraf ./dist` — czyli kasuje zbudowane zasoby, zanim spróbuje je odtworzyć. * Uruchomienie budowania byłoby więc zakładem o odtworzenie całego frontu. Ten arkusz * dokładamy obok i kolejkujemy wprost, z wersją z `filemtime`, tak jak `main.css`. * * PALETA WYŁĄCZNIE Z TEJ WITRYNY — reguła twarda, nie uwaga. Każda barwa użyta * w warstwie dostępności musi występować w `dist/assets/main.css` tej instalacji; * użyte niżej `#164363` występuje tam 20 razy. Barwa wzięta z innego źródła * przemalowuje część witryny obcą marce barwą — usterka, którą przechodzi każdy * test automatyczny, a zauważa dopiero właściciel marki. Pilnuje tego * `narzedzia/a11y/kontrola-palety.js`. */ /* ───────────────────────── Z1. Widoczne wskazanie fokusu ───────────────────────── * * Stan zastany: 30 z 30 zbadanych przystanków klawiatury bez żadnego wskazania. * Uwaga na wzorzec, który tu występuje: `outline-style: none` przy `outline-width: 3px`. * Sonda sprawdzająca samą szerokość orzekłaby „obrys jest". * * DOBÓR BARWY JEST POLICZONY, NIE DOBRANY NA OKO. * #f49622 (pomarańcz marki, 34 wystąpienia) wobec bieli: kontrast 2,27:1 — ZA MAŁO, * WCAG 1.4.11 wymaga 3:1 dla elementów nietekstowych; * #164363 (granat marki, 20 wystąpień) wobec bieli: kontrast 10,4:1 — z zapasem. * * Obrys jest dwutonowy celowo. Sam granat ginie na ciemnym tle stopki, sama biel na * jasnym — para „biały pierścień wewnętrzny + granatowy obrys zewnętrzny" jest widoczna * na obu. To nie ozdoba, tylko warunek działania na całej witrynie. * * `:focus-visible`, nie `:focus` — inaczej obrys pojawia się także po kliknięciu myszą, * co zmienia wygląd dla użytkownika, który o niego nie prosił. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [contenteditable]:focus-visible { outline: 3px solid #164363; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; border-radius: 2px; } /* ──────────────────── Z2. Odnośnik pomijający nawigację ──────────────────── * * Pierwszy element w ``, więc pierwszy przystanek klawisza Tab. * * UKRYCIE PRZEZ `transform`, A NIE PRZEZ `display: none` ANI `clip: rect(0,0,0,0)`. * Element z `display: none` NIE JEST FOKUSOWALNY — odnośnik pomijający zrobiony w ten * sposób nie działa wcale, a wygląda w kodzie na obecny. Tutaj element ma pełne wymiary * i normalnie przyjmuje fokus; jest tylko wysunięty poza kadr, a `position: absolute` * sprawia, że nie zajmuje miejsca w układzie i niczego nie przesuwa. */ .ka-pomin-nawigacje { position: absolute; top: 0; left: 0; z-index: 100000; display: block; padding: 12px 20px; background: #ffffff; color: #164363; font-weight: 700; text-decoration: underline; border: 2px solid #164363; border-radius: 0 0 4px 0; transform: translateY(-140%); } .ka-pomin-nawigacje:focus { transform: translateY(0); } /* Cel odnośnika przyjmuje fokus programowo (`tabindex="-1"`), więc bez tego * dostałby obrys po każdym skoku — a użytkownik nie fokusował całej treści strony, * tylko do niej przeszedł. */ .mainContent:focus { outline: none; } /* ─────────── Etykieta widoczna tylko dla technologii wspomagających ─────────── * * Po co, skoro pola mają `placeholder`. Bo placeholder NIE JEST etykietą: znika * w chwili wpisania pierwszego znaku, więc użytkownik, który wróci do pola albo * się pomyli, nie ma już jak sprawdzić, co tam wpisywał. WCAG 3.3.2 wymaga * etykiety albo instrukcji, i wymaga jej TRWALE. * * Ukrycie przez `clip-path` z zachowaniem wymiaru 1×1, a nie przez `display: none` * ani `visibility: hidden` — te dwa usuwają element także z drzewa dostępności, * czyli kasują dokładnie to, co próbujemy dodać. */ /* `!important` na wymiarach nie jest tu niechlujstwem, tylko warunkiem dzialania: * to klasa narzedziowa, ktora musi wygrac z DOWOLNA regula motywu, a zmierzone * `width: 1170px` pokazalo, ze bez tego przegrywa (arkusz motywu ustawia szerokosc * etykiet w formularzu). `clip-path` i tak chowal tresc, ale klasa ma robic to, * co deklaruje, a nie dzialac przypadkiem. */ .ka-tylko-dla-czytnika { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ─────────── D6. Uszanowanie systemowego ustawienia „ogranicz ruch" ─────────── * * WCAG 2.3.3 (AAA) i — ważniejsze w praktyce — 2.2.2: ruch, którego nie da się * zatrzymać, wyklucza z korzystania z witryny osoby z zaburzeniami * przedsionkowymi, migreną i częścią zaburzeń uwagi. System operacyjny ma na to * gotowy przełącznik („Ogranicz ruch" / „Pokazuj animacje w systemie Windows"); * witryna ma go tylko usłyszeć. Nie pytamy więc użytkownika o nic — odpowiedź * już dał w swoim systemie. * * ── DLACZEGO TO DOPISANE DO TEGO PLIKU, A NIE W NOWYM ARKUSZU ────────────── * Bramką odbioru jest „wyjście gościa bez zmian", mierzone odciskiem geometrii, * który liczy WSZYSTKIE elementy dokumentu — także `` w ``. Nowy * arkusz to nowy element, czyli różnica w odcisku na każdym z 23 adresów. * Reguły w pliku już kolejkowanym nie dokładają ani jednego węzła. * * ── DLACZEGO 0.01ms, A NIE 0s ───────────────────────────────────────────── * Zdarzenia `transitionend` i `animationend` NIE PADAJĄ dla czasu zerowego * w części sytuacji, a skrypty, które na nie czekają, zostają wtedy w połowie * stanu: menu, które się otworzyło, ale nie dostało klasy „otwarte". 0,01 ms * jest niedostrzegalne dla oka i zachowuje kontrakt zdarzeń. * * ── DLACZEGO `*` I `!important` ─────────────────────────────────────────── * Selektor `*` ma specyficzność zero, więc bez `!important` przegrywa z każdą * regułą motywu — a tu chodzi o wygranie z regułami motywu. To jedno z niewielu * miejsc, gdzie `!important` jest warunkiem działania, a nie skrótem. * * ── CZEGO TA REGUŁA NIE OBEJMUJE (i dlaczego nie udajemy, że obejmuje) ───── * Ruchu sterowanego JavaScriptem. W pakiecie motywu jest Swiper z opcjonalnym * `autoplay` (`Components/SliderImages/script.js`), a CSS nie zatrzyma pętli * `setInterval`. Źródła komponentu nie da się tu poprawić: wykonywany jest * kompilat `dist/assets/main.js`, a `npm run build` zaczyna od `rimraf ./dist` * przy nieistniejącym `node_modules`. Stan zmierzony: na 23 mierzonych adresach * nie renderuje się ani jeden `flynt-slider-images` z włączonym `autoplay`, * więc dziś nie ma czego zatrzymywać. Zapisane jako znany limit, nie jako * naprawione. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } }