/* ========================================================================== Livello accessibilita' - ict-81.com EN 301 549 / WCAG 2.1 AA - Linee guida AgID (det. 38 del 04/03/2026) Sta DOPO gli altri fogli di stile e non cambia l'impaginazione: agisce solo su focus, testo alternativo nascosto, movimento e contrasto. Copia servita: /assets/a11y.css (versionata con ?v=) ========================================================================== */ :root { --a11y-focus: #0e2b5c; /* navy del brand, 13,83:1 su bianco */ --a11y-focus-light: #ffffff; /* per i fondi scuri */ } /* -------------------------------------------------------------------------- 1. FOCUS VISIBILE (WCAG 2.4.7, 1.4.11) Il tema azzera l'outline con `*,*:focus{outline:0}` in 21 regole. `:focus-visible` ha specificita' maggiore di `*`; l'!important serve contro le regole di tema che usano gia' !important. -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--a11y-focus) !important; outline-offset: 2px !important; border-radius: 2px; } /* Fondi scuri: l'outline navy non si vedrebbe. */ .site-topbar :focus-visible, .sliding-menu :focus-visible, .off-canvas :focus-visible, #cc-banner :focus-visible, #privacy-strip :focus-visible { outline-color: var(--a11y-focus-light) !important; } /* Browser senza :focus-visible: si torna a :focus. */ @supports not selector(:focus-visible) { a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: 2px solid var(--a11y-focus) !important; outline-offset: 2px !important; } } /* Il contenitore che riceve il focus dallo skip link non deve mostrare l'anello: il focus e' programmatico, non da tastiera. */ #main-content:focus { outline: none !important; } /* -------------------------------------------------------------------------- 2. SKIP LINK (WCAG 2.4.1) Fuori dallo schermo finche' non riceve il focus; nessun display:none, che lo renderebbe non raggiungibile da tastiera. -------------------------------------------------------------------------- */ .a11y-skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 2147483600; } .a11y-skip-link:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; padding: 12px 20px; background: #ffffff; color: var(--a11y-focus) !important; font: 600 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: underline; border: 2px solid var(--a11y-focus); border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); } /* -------------------------------------------------------------------------- 3. TESTO PER SOLI SCREEN READER Bootstrap 5.3.3 fornisce .visually-hidden e il CSS di tema .sr-only / .screen-reader-text; questa e' la definizione di scorta, valida anche se il CDN di Bootstrap non risponde. -------------------------------------------------------------------------- */ .a11y-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* -------------------------------------------------------------------------- 4. ZOOM AUTOMATICO iOS Sotto i 16px Safari su iOS ingrandisce la pagina al focus del campo e non la riduce piu'. Si applica solo ai puntatori grossolani (touch). -------------------------------------------------------------------------- */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } } /* -------------------------------------------------------------------------- 5. MOVIMENTO RIDOTTO (WCAG 2.3.3) animate.css ha una propria guardia; questa copre le animazioni del tema, dello slider e gli scroll animati. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } html, body { scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 6. CONTRASTO (WCAG 1.4.3) - eccezioni dichiarate nella dichiarazione di accessibilita'. Sono cambi di colore, non di impaginazione. I selettori [style*=...] intercettano i colori scritti inline nelle viste: una regola normale non batterebbe un attributo style. -------------------------------------------------------------------------- */ /* I colori sotto soglia sono stati corretti alla fonte, nelle viste, non sovrascritti da qui: i valori storici e i rapporti prima/dopo sono elencati nella pagina /dichiarazione-accessibilita. Restano qui solo le regole che non hanno una fonte modificabile. */ /* Hover del banner cookie: bianco su #37ab7b era 2,89:1 */ #cc-root button:hover { background: #2a8058 !important; } /* -------------------------------------------------------------------------- 7. L'INFORMAZIONE NON PASSA DAL SOLO COLORE (WCAG 1.4.1) Il tema imposta `a{text-decoration:none}`: nel corpo del testo un link si distinguerebbe solo dal colore. Sottolineatura ai soli link in linea nel contenuto, non a menu, pulsanti, loghi e schede. -------------------------------------------------------------------------- */ .content p > a, .content li > a, .content td > a, .legal a, .prefs a, .a11y-prose a { text-decoration: underline; text-underline-offset: 2px; } .content p > a.button, .content li > a.button, .legal a.cta, .prefs a.cta { text-decoration: none; } /* -------------------------------------------------------------------------- 8. AZZERAMENTO DEL