. Non serve aggiungere nessun id: c'e tutto. Questo foglio stila .vc-salta e neutralizza il contorno sul contenitore di arrivo (sezione 2.3). 2. IL PEGGIOR "outline: none" DEL TEMA NON E QUELLO CITATO. Il brief indica style.css righe 909-918 (i comandi del visualizzatore immagini) e ha ragione, ma quello e gia risolto da vc-scheda.css ed e circoscritto a una pagina. Quello che conta davvero e vc-foundation-core.css riga 466: input[type=...]:focus { outline: none } toglie il contorno a OGNI campo di testo del sito — ricerca, commenti, Contact Form 7 — su ogni pagina. E la sezione 2.2 di questo foglio. 3. #868787 NON E UN PROBLEMA DEL MIO PERIMETRO. Su bianco da 3.60:1, non 3.0 come dice il brief, e resta sotto la soglia di 4.5 per il testo normale; ma le sue due sole occorrenze sono "header ul li" (navigazione, F5) e "#homepage h1" (homepage, e vc-home.css documenta che quella regola non ha piu bersagli). Non lo tocco, perche toccarlo vorrebbe dire entrare in F5. Il grigio che fa danno davvero, e che sta nel mio perimetro, e #999999: 2.85:1, sui numeri di pagina e sulla riga di firma degli articoli. 4. #003882 NON E SOTTO SOGLIA. Su bianco da 11.12:1. Il brief lo elenca fra i punti di partenza da verificare: verificato, va bene com'e. 5. LA PAGINAZIONE E GIA A 44x44 (vc-mobile.css sezione 1.3) e non va rifatta. Restava pero un difetto che quella sezione ha reso visibile: quando non c'e pagina precedente o successiva, joints.php stampa comunque un

VUOTO, e con il min-height di F4 quel vuoto occupa 44px. Sezione 3.1. -------------------------------------------------------------------------- */ /* =============================================================== 0. Variabili locali Stanno qui e non in vc-tokens.css perche questa fase tocca un file solo, come hanno gia fatto vc-mobile.css, vc-nav.css, vc-home.css e vc-scheda.css. Ogni valore poggia su un token dove il token esiste. I RAPPORTI IN COMMENTO SONO MISURATI, non stimati: formula della luminanza relativa del WCAG, con la soglia indicata accanto. =============================================================== */ :root { /* Colore del contorno di messa a fuoco. E lo stesso accento chiaro gia scelto in F5 (vc-nav.css, vc-scheda.css): un solo segnale su tutto il sito, non tre. 5.60:1 su bianco, contro il 3:1 che il criterio 1.4.11 chiede a un indicatore non testuale. Sul fondo scuro del footer lo stesso blu darebbe 2.73:1, cioe sparirebbe. Vale li lo stesso ribaltamento gia deciso in vc-nav.css: ambra sullo scuro, 6.49:1 su #1C2634. */ --vc-a11y-fuoco: var(--vc-colore-blu-acceso, #007095); --vc-a11y-fuoco-scuro: var(--vc-colore-ambra, #f39207); /* 2px come in vc-nav.css. Lo stacco positivo tiene il contorno fuori dal riquadro, cosi non copre ne il testo ne il bordo del campo. */ --vc-a11y-fuoco-spessore: 2px; --vc-a11y-fuoco-stacco: 2px; /* Collegamento di salto: 15.20:1, molto sopra il 4.5 richiesto. */ --vc-a11y-salta-fondo: var(--vc-colore-blu-scuro, #11273d); --vc-a11y-salta-testo: var(--vc-colore-sfondo, #ffffff); /* Impilamento. vc-nav.css usa 900 per le barre agganciate, 1040 per il velo e 1050 per il pannello. Il collegamento di salto deve stare sopra le barre, che sono l'unica cosa che puo trovarsi sotto di lui: quando il pannello e aperto il fuoco e dentro il pannello e questo link non viene mai raggiunto. Percio 1030, sopra le barre e sotto il velo, e non un numero piu alto che sarebbe una sovrastima. */ --vc-a11y-z-salta: 1030; /* Testo secondario: sostituisce #999999 (2.85:1, sotto il 4.5 del criterio 1.4.3). 5.47:1 su bianco, 4.76:1 sul fondo dei campi del modulo commenti, 4.88:1 sui pannelli grigi. */ --vc-a11y-testo-tenue: var(--vc-colore-ardesia, #5e6b76); /* Numeri di pagina e altre etichette di comando: 9.00:1 su bianco, 7.21:1 sul grigio di passaggio del mouse della paginazione. */ --vc-a11y-testo-azione: var(--vc-colore-blu, #374a66); /* Bordo dei campi a riposo: sostituisce #cccccc, che su bianco da 1.61:1 contro il 3:1 del criterio 1.4.11. 5.47:1 su bianco, 5.24:1 sul fondo #fafafa delle tendine. E lo stesso bordo che vc-scheda.css ha gia dato alla tendina delle lingue: nessun colore nuovo. */ --vc-a11y-bordo-campo: var(--vc-colore-ardesia, #5e6b76); /* Fondo dei pulsanti d'azione. Foundation usa #008CBA con testo bianco: 3.85:1, sotto il 4.5 che il criterio 1.4.3 chiede al testo normale (i pulsanti del tema sono a 16px e a 11px, mai testo grande). #007095 e gia il colore che Foundation stessa usa al passaggio del mouse, quindi non e un colore nuovo: 5.60:1 col bianco sopra. Lo stato attivo scende a #005a78, 7.68:1, che e un semplice scurimento dello stesso blu. */ --vc-a11y-azione-fondo: var(--vc-colore-blu-acceso, #007095); --vc-a11y-azione-fondo-forte: #005a78; /* Errore ed esito. Sono gli unici due colori davvero nuovi del foglio, e lo sono per necessita: nella tavolozza del progetto non c'e ne un rosso ne un verde utilizzabili. #f04124 di Foundation da 3.83:1 e #f01d4f del marchio non e mai stato un colore di interfaccia. 6.54:1 e 6.56:1 su bianco: entrambi sopra il 4.5 anche come testo. */ --vc-a11y-errore: #b3261e; --vc-a11y-esito: #1e6b2f; } /* =============================================================== 1. Collegamento di salto — criterio 2.4.1 (Bypass Blocks, livello A) Il markup e gia in header.php, primo elemento dentro : Salta al contenuto. La tecnica a riposo e la stessa di .screen-reader-text in vc-grid.css — riquadro di un pixel, ritagliato, fuori dal flusso — e per la stessa ragione: display:none e visibility:hidden toglierebbero il link anche alla tastiera, cioe proprio a chi serve. Qui la classe NON viene riusata perche .screen-reader-text deve restare nascosta sempre, mentre questa deve riapparire: sono due comportamenti diversi e vanno tenuti separati. Al fuoco si ripristinano tutte le misure ritagliate — width, height, margin, clip, clip-path, overflow — e si passa a position: fixed, cosi il link e visibile anche se la pagina e gia scorsa. Il link sta FUORI da .off-canvas-wrap, che vc-nav.css ritaglia con overflow-x: clip: nessun antenato lo puo tagliare. Uso :focus e non :focus-visible: un link di un pixel non si puo raggiungere col mouse, quindi la distinzione non serve, e :focus funziona ovunque. =============================================================== */ .vc-salta { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; z-index: var(--vc-a11y-z-salta, 1030); } /* Il selettore e a.vc-salta e non .vc-salta di proposito: (0,2,1) invece di (0,1,1). Serve a non perdere il confronto con la regola di ripiego della sezione 2.1, che vale a:focus:not(:focus-visible), cioe (0,2,1). Sono stati che non si verificano insieme, ma un pareggio scritto a mano vale piu di un ragionamento da rileggere fra un anno. */ a.vc-salta:focus { position: fixed; top: var(--vc-spazio-2, 0.9375rem); left: var(--vc-spazio-2, 0.9375rem); display: inline-flex; align-items: center; width: auto; height: auto; min-height: var(--vc-tocco-minimo, 44px); margin: 0; padding: var(--vc-spazio-1, 0.46875rem) var(--vc-spazio-3, 1.40625rem); overflow: visible; clip: auto; clip-path: none; background-color: var(--vc-a11y-salta-fondo, #11273d); color: var(--vc-a11y-salta-testo, #ffffff); font-family: var(--vc-font-testo, 'Titillium Web', sans-serif); font-size: 1rem; font-weight: var(--vc-peso-medio, 600); line-height: var(--vc-interlinea-stretta, 1.25); text-decoration: underline; border-radius: var(--vc-raggio-1, 3px); box-shadow: var(--vc-ombra-2, 0 4px 12px rgba(0, 0, 0, 0.15)); /* Il contorno cade sul fondo della pagina, che li e bianco o e la barra agganciata, anch'essa chiara: 5.60:1. */ outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: var(--vc-a11y-fuoco-stacco, 2px); } /* =============================================================== 2. Messa a fuoco visibile — criteri 2.4.7 e 1.4.11 =============================================================== */ /* --------------------------------------------------------------- 2.1 Regola di base Deve dare un contorno a tutto cio che e focalizzabile e, insieme, PERDERE il confronto con le regole gia scritte in F5, che sono piu curate e piu specifiche. Per questo i selettori sono volutamente poveri: (0,1,1) per gli elementi nudi, (0,2,1) per input, che e la specificita minima necessaria a battere vc-foundation-core.css (sezione 2.2). Come si comporta rispetto a F5, misurato selettore per selettore: .vc-pannello-menu a:focus-visible (0,2,1) vince su a (0,1,1) .vc-barra-desktop .top-bar-section a:... (0,3,1) vince .vc-luogo-scheda:focus-within (0,2,0) vince su a (0,1,1) .vc-gallery-item:focus-visible (0,2,0) vince su button (0,1,1) .entry-content p a:focus-visible (0,2,2) vince .entry-content + section select:focus-... (0,3,1) vince su select (0,1,1) #homepage #visitare h2...> a:focus (2,2,2) vince su tutto Nessuna regola di F5 viene sovrascritta. input:not([type="hidden"]) invece dell'elenco dei quattordici tipi: vale (0,1,1) come input[type="text"], quindi lo stesso peso con una riga sola, e copre anche i tipi che Foundation non elenca. IL RIPIEGO. La coppia canonica: si imposta su :focus, poi si toglie su :focus:not(:focus-visible). Un browser che non conosce :focus-visible considera invalido l'intero selettore della seconda regola e la scarta, quindi conserva il contorno anche al clic del mouse. E il comportamento voluto: contorno di troppo, mai contorno mancante. Costo: sui browser anteriori al 2021 il contorno compare anche cliccando. --------------------------------------------------------------- */ a:focus, button:focus, input:not([type="hidden"]):focus, select:focus, textarea:focus, summary:focus { outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: var(--vc-a11y-fuoco-stacco, 2px); } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:not([type="hidden"]):focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; } a:focus-visible, button:focus-visible, input:not([type="hidden"]):focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: var(--vc-a11y-fuoco-stacco, 2px); } /* --------------------------------------------------------------- 2.2 Dove il tema toglie il contorno senza rimpiazzarlo Cercato in tutti i fogli. Le dichiarazioni outline:none / outline:0 sono quattro, non due: vc-foundation-core.css:466 input[...]:focus — TUTTI i campi del sito vc-foundation-core.css:330 .dropdown.button — sempre, non solo al fuoco style.css:442 .respond-form ...:invalid style.css:917 .vc-lightbox-close/-nav La prima e di gran lunga la piu grave e non e quella indicata dal brief: riguarda ogni campo di ricerca, ogni campo del modulo commenti e ogni campo di Contact Form 7, su ogni pagina. La sezione 2.1 la batte gia, perche input:not([type="hidden"]):focus-visible vale (0,2,1) esattamente come input[type="text"]:focus e arriva dopo. Qui restano le altre. La quarta, il visualizzatore immagini, e gia risolta da vc-scheda.css, che viene caricato esattamente e soltanto dove quel markup esiste (is_singular('luoghi_da_visitare'), joints.php riga 191). Non la ripeto: sarebbe una regola morta e, arrivando dopo, andrebbe a sovrascrivere una regola di F5 senza motivo. --------------------------------------------------------------- */ /* .dropdown.button vale (0,2,0) e button.dropdown (0,1,1): entrambi battono la regola di base. Il contorno va quindi restituito qui. E una cautela: nei template non compare nessun pulsante con quelle classi, ma la regola di Foundation non e legata al fuoco, e sempre attiva, e basterebbe un widget o uno shortcode per riportarla in pagina. */ .dropdown.button:focus, button.dropdown:focus { outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: var(--vc-a11y-fuoco-stacco, 2px); } .dropdown.button:focus:not(:focus-visible), button.dropdown:focus:not(:focus-visible) { outline: none; } .dropdown.button:focus-visible, button.dropdown:focus-visible { outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: var(--vc-a11y-fuoco-stacco, 2px); } /* Modulo commenti: style.css riga 442 azzera il contorno sui campi che il browser considera non validi, e un campo puo essere non valido E messo a fuoco nello stesso momento, cioe proprio quando il contorno serve di piu. Specificita replicata esattamente: .respond-form form input[type=text]:invalid (0,3,2) .respond-form form input:not([type=hidden]):focus (0,3,2) Pareggio, e questo foglio arriva dopo. */ .respond-form form input:not([type="hidden"]):focus, .respond-form form textarea:focus { outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: var(--vc-a11y-fuoco-stacco, 2px); } .respond-form form input:not([type="hidden"]):focus:not(:focus-visible), .respond-form form textarea:focus:not(:focus-visible) { outline: none; } .respond-form form input:not([type="hidden"]):focus-visible, .respond-form form textarea:focus-visible { outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: var(--vc-a11y-fuoco-stacco, 2px); } /* --------------------------------------------------------------- 2.3 Il contenitore di arrivo del salto Questo e l'unico outline: none del foglio, ed e voluto. #content ha tabindex="-1" in tutti i template: e un valore NEGATIVO, quindi il contenitore non entra mai nella sequenza di tabulazione e nessuno puo arrivarci premendo Tab. Ci si arriva solo per via programmatica, seguendo il collegamento di salto. Togliere il contorno qui non sottrae quindi nessun segnale a nessuno. Perche toglierlo: #content avvolge l'intera pagina, dal titolo al footer. Il contorno predefinito del browser disegnerebbe una cornice attorno a tutto il contenuto, che si legge come un guasto e non come una conferma. La conferma che il salto e avvenuto e che la pagina si e mossa e che il Tab successivo parte dal primo link del contenuto. L'alternativa scartata era dare a #content un contorno discreto e volontario, per confermare l'arrivo. Scartata perche una cornice larga quanto la finestra non e discreta a nessuno spessore. --------------------------------------------------------------- */ #content[tabindex="-1"]:focus { outline: none; } /* =============================================================== 3. Contrasto Tutti i rapporti citati sono calcolati con la formula della luminanza relativa del WCAG. Soglie: 4.5:1 per il testo normale (1.4.3), 3:1 per il testo grande e per bordi e indicatori di stato (1.4.11). =============================================================== */ /* --------------------------------------------------------------- 3.1 Paginazione Due difetti, uno di contrasto e uno che F4 ha reso visibile. COLORE. vc-foundation-core.css riga 638 da ai numeri di pagina #999999 su bianco: 2.85:1, cioe poco piu di un terzo di quello che serve. Diventano #374a66, 9.00:1, che e il blu del marchio: si leggono come comandi e non come testo spento. Cambiamento visibile: i numeri passano da grigio chiaro a blu. La pillola della pagina corrente era bianco su #008CBA, 3.85:1, sotto soglia anche se e in grassetto (il grassetto conta come testo grande solo sopra i 18.66px, e qui il carattere e 14px). Diventa #007095: 5.60:1 col bianco sopra, e 5.60:1 anche verso il bianco della pagina, quindi la pillola resta distinguibile come elemento grafico. Non tocco il grigio #e6e6e6 del passaggio del mouse: e decorativo, il testo sopra ci sta a 7.21:1, e non e l'unico segnale di stato. LI VUOTI. joints.php righe 355-357 e 366-368 stampano

anche quando previous_posts_link o next_posts_link non producono niente, cioe sulla prima e sull'ultima pagina. Prima erano alti 24px e non si notavano; con il min-height di 44px di vc-mobile.css sono due buchi da 44px nella barra, e due voci di elenco senza contenuto per chi usa un lettore di schermo. :empty li toglie. La specificita (0,2,2) batte sia ul.pagination li di Foundation sia quella di vc-mobile, entrambe (0,1,2). --------------------------------------------------------------- */ ul.pagination li a, ul.pagination li button { color: var(--vc-a11y-testo-azione, #374a66); } ul.pagination li.current a, ul.pagination li.current button { background: var(--vc-a11y-azione-fondo, #007095); } ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus { background: var(--vc-a11y-azione-fondo, #007095); } ul.pagination li:empty { display: none; } /* --------------------------------------------------------------- 3.2 Righe di firma e date .byline e la riga "Posted on ... by ... - categoria" stampata da partials/content-byline.php sotto ogni titolo di archivio e di risultato di ricerca: #999999 su bianco, 2.85:1. I link che contiene sono leggibili (#003882, 11.12:1); e il testo attorno a non esserlo. La data dei commenti ha lo stesso grigio, ma su tre fondi diversi: bianco per il primo livello, #e7e7e7 per le risposte, #dadada dal terzo livello in giu. E un link, quindi prende il blu del marchio e non il grigio ardesia, che su #dadada scenderebbe a 3.91:1. #374a66 tiene 9.00:1, 7.3:1 e 6.6:1 sui tre fondi. --------------------------------------------------------------- */ .byline { color: var(--vc-a11y-testo-tenue, #5e6b76); } .commentlist .vcard time a { color: var(--vc-a11y-testo-azione, #374a66); } /* Definizioni dentro il contenuto: style.css riga 274 le mette a #787878 e a 0.9em, cioe 14.4px. 4.42:1, sotto il 4.5 per una manciata di centesimi ma sotto. Non e un dettaglio da arrotondare: e testo di contenuto. */ .entry-content dd { color: var(--vc-a11y-testo-tenue, #5e6b76); } /* --------------------------------------------------------------- 3.3 Pulsanti d'azione Bianco su #008CBA da 3.85:1. Riguarda il pulsante "Cerca" del modulo di ricerca, il "Read more..." degli archivi e della ricerca, il pulsante di invio dei commenti e il "Rispondi" dei commenti. PERCHE UN ELENCO E NON "button, .button". Nel tema ci sono