/* ========================================================================== accessibilita.css — correzioni WCAG 2.1 AA Ordine dei Biologi della Sicilia Va caricato DOPO scuole.css: i selettori qui dentro correggono regole del tema senza modificarlo, cosi' un futuro aggiornamento di scuole.css non cancella le correzioni. Ogni blocco cita il criterio WCAG che risolve e la misura di partenza (report MAUVE++ del 11/09/2026 su https://ordinebiologisicilia.it/). ========================================================================== */ /* -------------------------------------------------------------------------- 1) FOCUS VISIBILE — WCAG 2.4.7 (livello AA) Misura di partenza: 386 asserzioni fallite (tecniche F78 e G195). Causa: 29 occorrenze di "outline: 0" in scuole.css che rimuovono l'indicatore di focus senza fornirne uno alternativo. Effetto: chi naviga da tastiera non vede dove si trova. Qui l'indicatore viene ripristinato per TUTTI gli elementi attivabili. Si usa :focus-visible (mostra il focus a tastiera ma non al clic del mouse) con fallback su :focus per i browser piu' datati. -------------------------------------------------------------------------- */ a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus, [role="button"]:focus, .nav-link:focus, .dropdown-toggle:focus, .toggle-dropdown:focus, .btn:focus, .close:focus, .hamburger:focus, .search-btn:focus { outline: 3px solid #17324d !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px #17324d !important; } /* Su fondi scuri (pre-header petrolio, footer) l'indicatore scuro non si vedrebbe: qui si inverte, restando sopra il rapporto 3:1 richiesto. */ #pre-header a:focus, #pre-header button:focus, .footer-wrapper a:focus, .footer-wrapper button:focus, .bg-petrol a:focus, .bg-petrol button:focus { outline: 3px solid #ffffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #17324d, 0 0 0 8px #ffffff !important; } /* Browser che supportano :focus-visible: si evita l'anello al clic del mouse, mantenendolo per la tastiera. */ @supports selector(:focus-visible) { a:focus:not(:focus-visible), button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), .btn:focus:not(:focus-visible), .close:focus:not(:focus-visible), .hamburger:focus:not(:focus-visible), .search-btn:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } 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, .btn:focus-visible, .close:focus-visible, .hamburger:focus-visible, .search-btn:focus-visible { outline: 3px solid #17324d !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px #17324d !important; } } /* Gli skiplink devono diventare visibili quando ricevono il focus: sono il primo elemento raggiunto da tastiera. WCAG 2.4.1 */ .skiplink .sr-only-focusable:focus, .skiplink .sr-only-focusable:focus-visible { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; display: inline-block; padding: 0.75rem 1rem; margin: 0.25rem; background: #17324d; color: #ffffff; text-decoration: underline; z-index: 1100; } /* -------------------------------------------------------------------------- 2) LINK RICONOSCIBILI SENZA IL COLORE — WCAG 1.4.1 (livello A) Misura di partenza: 34 asserzioni fallite (tecnica F73). Causa: nei blocchi di testo i link si distinguono dal testo circostante solo per la tinta. Chi non percepisce quella differenza cromatica non li riconosce come link. Rimedio: sottolineatura nei link "in linea" dentro il contenuto. NON si sottolineano i menu, i bottoni e le liste di navigazione, dove il link e' gia' identificabile dalla posizione e dalla forma. -------------------------------------------------------------------------- */ #main-container p a, #main-container li:not([class]) a, .card-body p a, .footer-text a, .sub-footer a, /* Titoli delle schede (notizie, corsi, eventi): il titolo E' il link, e si distingue dal testo vicino solo per la tinta. 20 delle 34 occorrenze. */ #main-container .card-content h4 a, #main-container .card-body h4 a, #main-container h4.h5 a, /* Liste di collegamenti del footer: 11 occorrenze. Sono elenchi di link in un blocco di testo, non una barra di navigazione con affordance propria, quindi la sottolineatura serve. */ .footer-wrapper .footer-list li a, .footer-wrapper .footer-list > li > a, /* Link isolati dentro paragrafi delle finestre modali. */ .modal-body p a { text-decoration: underline; } /* Al passaggio e al focus la sottolineatura resta: non deve sparire. */ #main-container p a:hover, #main-container p a:focus, .sub-footer a:hover, .sub-footer a:focus { text-decoration: underline; } /* Eccezioni: testata, loghi e navigazione non vanno sottolineati. Il logo e' un che avvolge .logo-header con dentro un titolo: senza questa esclusione il nome dell'Ente risulterebbe sottolineato. */ .logo-header a, a .logo-header, .logo-header, .logo-footer a, a .logo-footer, #main-header .logo-header a, #pre-header a, .nav-list a, .dl-menu a, .link-list a, .menu-dropdown a { text-decoration: none; } /* Nota: .footer-list NON compare fra le eccezioni. Le sue voci sono collegamenti dentro un blocco di testo e devono restare sottolineate (WCAG 1.4.1). Le esclusioni qui sopra riguardano solo la navigazione vera e propria e i loghi. */ /* -------------------------------------------------------------------------- 2-bis) LAYOUT DEI PULSANTI DEL PRE-HEADER Nota di intervento (non un criterio WCAG). Nel markup originale ogni