/* a11y-base.css — prístupnostná základňa | v1.0 2026-07-31 Importuj PRVÝ, pred style.css. Rieši WCAG 2.2 AA veci, ktoré sa nemajú riešiť ručne. Premenné prepíš v style.css, netreba sem siahať. */ :root{ --a11y-focus:#4353FF; --a11y-focus-contrast:#fff; --a11y-header-h:72px; /* výška sticky headera — prepíš podľa projektu */ --a11y-target:55px; /* 44px reálnych pri initial-scale=0.8 → 44/0.8 */ --a11y-target-min:30px; /* WCAG 2.5.8 minimum 24px / 0.8 */ } /* --- FOCUS (WCAG 2.4.7, 2.4.13) --------------------------------------- */ /* outline:none je zakázaný. Ak ho niekde nájdeš, je to nález. */ *:focus-visible{ outline:3px solid var(--a11y-focus); outline-offset:2px; border-radius:2px; } *:focus:not(:focus-visible){outline:none} /* na tmavom pozadí */ .on-dark *:focus-visible{outline-color:var(--a11y-focus-contrast)} /* --- FOCUS NOT OBSCURED (WCAG 2.2 §2.4.11) ---------------------------- */ /* sticky header ani cookie lišta nesmú prekryť focusnutý prvok */ a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]){ scroll-margin-top:calc(var(--a11y-header-h) + 16px); scroll-margin-bottom:96px; } /* --- SKIP LINK -------------------------------------------------------- */ .skip-link{ position:absolute;left:8px;top:-64px;z-index:9999; padding:12px 20px;background:var(--a11y-focus);color:#fff; border-radius:8px;font-weight:600;text-decoration:none; transition:top .15s ease; } .skip-link:focus{top:8px} /* --- SCREEN READER ONLY ----------------------------------------------- */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .sr-only-focusable:focus,.sr-only-focusable:active{ position:static;width:auto;height:auto;margin:0;overflow:visible; clip:auto;clip-path:none;white-space:normal; } /* --- TARGET SIZE (WCAG 2.2 §2.5.8) ------------------------------------ */ /* pri initial-scale=0.8 musí byť CSS rozmer väčší, aby reálny cieľ sedel */ button, [role="button"], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], a.btn,.icon-btn,.nav-link{ min-width:var(--a11y-target-min); min-height:var(--a11y-target-min); } .icon-btn,.btn,button.primary,button.secondary{ min-width:var(--a11y-target); min-height:var(--a11y-target); display:inline-flex;align-items:center;justify-content:center; } /* inline odkazy v texte sú z 2.5.8 vyňaté — neaplikuj na ne */ p a,li a,td a{min-width:0;min-height:0} /* --- INPUTY ----------------------------------------------------------- */ input,select,textarea{ font-size:1.6rem; /* iOS autozoom guard, viď jadro §5.1 */ min-height:var(--a11y-target); } /* placeholder musí byť čitateľný — najčastejší tichý kontrast fail */ ::placeholder{color:#6B7280;opacity:1} :disabled,[aria-disabled="true"]{opacity:1;color:#6B7280} /* chybový stav: nikdy len farba */ [aria-invalid="true"]{border-color:#B42318;border-width:2px} .field-error{color:#B42318;font-size:1.4rem;margin-top:4px;display:flex;gap:6px;align-items:center} /* --- REDUCED MOTION (WCAG 2.3.3) -------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* --- FORCED COLORS / HIGH CONTRAST MODE ------------------------------- */ @media (forced-colors:active){ *:focus-visible{outline:3px solid Highlight} .btn,button{border:1px solid ButtonText} svg{forced-color-adjust:auto} } /* --- DEKORATÍVNE SVG -------------------------------------------------- */ /* ikony nikdy nesmú byť v accessibility tree, ak nesú význam cez aria-label rodiča */ svg[aria-hidden="true"]{pointer-events:none} /* --- DEV GUARD: zvýrazni chyby počas vývoja --------------------------- */ /* aktivuj triedou na dev serveri, NIKDY v produkcii */ .a11y-dev img:not([alt]){outline:4px dashed #B42318} .a11y-dev a:empty,.a11y-dev button:empty{outline:4px dashed #B42318} .a11y-dev input:not([id]):not([aria-label]){outline:4px dashed #B42318}