Il Liceo Classico Statale "Giovanni da Vigo" di Rapallo e il Liceo Scientifico Statale "Nicoloso da Recco" di Recco realizzano il proprio sito nel rispetto delle direttive WAI (Web Accessibility Initiative) del W3C (Consorzio Internazionale che definisce gli standard per il web), come indicato dalle linee guida sull'e-government dettate dal Governo italiano, previste dall'allegato A) del Decreto 8 luglio 2005.
Per ottenere tale risultato il sito fa riferimento ai principali standard nazionali e internazionali in materia di accessibilità. In particolare, nello sviluppo del sito, sono stati rispettati quasi completamente i requisiti di accessibilità richiesti dalla legge 4/2004 e descritti nel Decreto Ministeriale 8 luglio 2005 "Requisiti tecnici e diversi livelli per l'accessibilità agli strumenti informatici". La parziale rispondenza alle linee guida WCAG è verificata per mezzo del validatore Vamola.
Accesskeys
Il lavoro svolto sino ad oggi per il sito, tuttora in fase di continuo affinamento, comprende numerose attività, in particolare quasi tutte le pagine sono navigabili anche con il solo uso della tastiera e l'impiego di una normale abilità, attraverso le chiavi di accesso (access keys). Infatti navigare nel sito è possibile anche con le Accesskey, che consentono di muoversi tra le 7 sezioni del sito, attraverso l'uso combinato di alcuni tasti. Usando Chrome, Opera. Edge, IE o Safari come browser -, la combinazione dei tasti è: Alt + [lettera o numero]. Ad esempio per accedere a questa pagina, si possono digitare due combinazioni:
Alt+k -> pagina Accessibilità
Accesskey e le Sezioni del sito
Le Accesskey sono un aiuto alla navigazione, i browser non convenzionali (browser per non vedenti, browser testuali) avvertono della presenza delle Accesskey e muoversi senza mouse è più agevole.
Per le sezioni del sito ci sono 7 combinazioni, corrispondenti alle 7 voci del menu principale . Per i Browser Chrome di Google, Opera, Edge, IE o Safari di Apple (per Firefox) la sequenza dei tasti è la seguente:
Alt+1 -> sezione Comunicazioni
Alt+2 -> sezione Servizi e risorse
Alt+3 -> sezione Offerta formativa
Alt+4 -> sezione Spazio progetti
Alt+5 -> sezione Documenti &normativa
Alt+6 -> sezione Trasparenza, Privacy e Pubblicità legale
Alt+7 -> sezione Home
Alt+k -> pagina Accessibilità (Accesskey)
Accesskey e le singole voci di menu all'interno delle sezioni
Contrariamente a molti siti, nel nostro sito la navigazione mediante le accesskey riguarda quasi la totalità delle pagine e non solo le pagine principali. Infatti entrando in qualunque sezione vengono sempre visualizzati sulla destra i menu relativi a quella sezione.
Si può accedere ad ogni singola voce del menu di destra tramite le accesskey semplicemente ricordando che la prima voce (più in alto) è relativa al carattere "a", la seconda al carattere "b", la terza al carattere "c", ... , sino al raggiungimento dell'ultima voce. La procedura si riaggiorna per ogni sezione.
Ad esempio digitando Alt+1 e successivamente Alt+c si accede alla sezione "Home" e alla pagina "Circolari publiche".
Accesskey per i browser più comuni:
Di seguito ? indica il tasto da combinare
Per utenti Firefox e K-meleon, Alt+ Shift + ?
Per utenti Opera :Alt +?
Per utenti IE e EDGE: Alt + ?
Per utenti Google Chrome : Alt + ?
Per utenti Safari: Alt +?
Per utenti Apple, il tasto da combinare è CMD + tasto "mela"+?
Per utenti Mac, il tasto da combinare è Ctrl + tasto "mela"+?
Per utenti Mac su Google Chrome Sequenza di tasti in : "Crl + Option + ?"
Attenzione: Per quanto riguarda i numeri (sino al 7 e la lettera k) tutti i browser citati funzionano bene, però in alcuni browser (ad esempio Chrome ) certe combinazione "ALT+Lettera" sono scorciatoie da tastiera e pertanto non permettono di accedere a tutte le pagine come indicato (ad esempio per Alt+d, Alt+f, ...). In tal senso, attualmente, fra i browser citati Firefox sembra funzionare meglio, seguito da Edge.
Zoom del testo
Ogni browser ha la possibilità di variare le dimensioni dei caratteri del testo. Di solito è possibile modificare la dimensione dei caratteri di qualsiasi pagina web utilizzando lo zoom del testo che può essere selezionato seguendo la procedura riportata di seguito, utilizzando come riferimento il browser Firefox:
- Premere il tasto Alt per visualizzare temporaneamente i tradizionali menu di Firefox. Nella parte superiore della finestra di Firefox, fare clic sul menu e spostarsi sulla voce .
- Selezionare . Questo farà sì che i controlli dello zoom verranno applicati esclusivamente al testo e non alle immagini.
Le seguenti combinazioni da tastiera permettono di modificare la dimensione del testo quando viene selezionato lo zoom del testo:
- Premere Ctrl + + per aumentare la dimensione del testo.
- Premere Ctrl + - per diminuire la dimensione del testo.
- Premere Ctrl + 0 (zero) per reimpostare il testo alla dimensione originaria.
I
Pagine particolari
Le seguenti pagine raggiungono specifiche inferiori di accessibilità:
- Le pagine contenenti la parte relativa all' "amministrazione trasparente" non sono accessibli tramite accesskey a causa dell'elevata complessità dei sotto menu presenti.
- La pagina "Dove siamo", all'indirizzo https://www.davigonicoloso.edu.it/index.php/servizi-e-risorse/info/dove-siamo, presenta delle cartine statiche (validata WCAG 2.0 AAA) per fornire alcune indicazioni su come raggiungere l'Istituto (sede e succursale), ma propone un link [Mappa dinamica con GOOGLE] che offre una mappa più facilmente consultabile (non pienamente validata).
- Pagine generate dinamicamente e contenuti esterni collegati
Questo sito è realizzato per mezzo di un CMS (Content Management System) che genera dinamicamente le pagine a partire dai contenuti. E' possibile che alcuni articoli, non scritti dal webmaster, contengano errori di formattazione che li rendano non completamente rispondente ai requisiti di accessibilità. Eventuali contenuti esterni non pienamente rispondenti alle specifiche, ma indispensabili per il sito verranno segnalati in questa pagina e, dove possibile, affiancati da presentazioni alternative delle informazioni.
Palette dei colori
Le combinazioni di colore usate soddisfano le indicazioni WCAG 2.0 livello AAA e sono verificate mediante il componente di Firefox Colour Contrast Analyzer 1.5.
L'immagine seguente mostra la palette dei colori del sito che definisce i colori principali del sito: colore del testo, del background, dei link attivi, hover e visitati, il colore dei bottoni, il footer e altri aspetti del sito. Si può ovviamente modificare, ma questo comporta modificare tutte le scelte e procedere successivamente alla necessaria validazione dei contrasti fra il testo e lo sfondo. I due colori estremi (giallo e rosso) ovviamente sono usati con molta parsimonia, entrambi devono trasmettere all'utente un messaggio di attenzione, ma mai come unico mezzo per veicolare tale informazione.
dove "cr" è il rapporto di contrasto del testo rispetto allo sfondo, possono essere usati colori diversi dal nero e dal grigio purché sia garantito un rapporto di contrasto minimo tra testo e sfondo di 4,5:1 (AA), come stabilito dalle specifiche di accessibilità.
Attributi dei link
L'aspetto dei link (colore, sottolineatura, grassetto) è molto importante perchè l'obiettivo è quello di evitare situazioni in cui le persone che non sono in grado di percepire le differenze di colore non possano identificare tali collegamenti (quando invece le persone con visione dei colori possono farlo facilmente).
Per questo motivo abbiamo scelto di sottolineare tutti i link presenti sul nostro sito, come spiegato nella pagina sull'Accessibilità.
Rimuovere la sottolineatura e lasciare solo la differenza di colore per i link sarebbe un errore perché non ci sarebbero altre indicazioni visive (oltre al colore) che si tratti di un collegamento.
Nel sito abbiamo implementato effetti visivi al passaggio del mouse (hover) per i collegamenti, come l'aggiunta dell'inversione dei colori fra testo del link e sfondo. Questo effetto aiuta gli utenti a sapere che è possibile fare click sull'elemento e che lo stato attivo del mouse si trova su un collegamento specifico.
Però per non penalizzare troppo l'aspetto grafico, alcuni collegamenti visivamente evidenti dal design e dal contesto della pagina, come i collegamenti di navigazione del menu principale, non contengono sottolineature.
La stessa scelta riguarda l’hamburger menu che ha preso piede ormai da qualche anno, diventando la soluzione preferita per gestire i menu di navigazione su mobile. La struttura delle voci dell'Hamburger menu è senza sottolineature perchè, anche in questo caso, non sarebbe possibile un'altra interpretazione.
In realtà la normativa WCAG 2.0 (1) ha 2 requisiti aggiuntivi per i collegamenti di testo del corpo che non sono sottolineati per impostazione predefinita:
- Il testo del collegamento deve avere un rapporto di contrasto 3: 1 rispetto al testo non di collegamento circostante.
- Il collegamento deve presentare un "designatore non colorato" (in genere l'introduzione della sottolineatura) sia sul passaggio del mouse che sulla tastiera.
Nel nostro sito il rapporto di contrasto per ogni link è almeno di 10:1 e come appena illustrato è anche sottolineato.
(1) Le Web Cnt Accessibility Guidelines (WCAG) sono parte di una serie di linee guida per l'accessibilità dei siti Web, pubblicate dal Web Accessibility Initiative (WAI), che a sua volta fa parte del World Wide Web Consortium (W3C). Gli ontesviluppatori di contenuti, di strumenti di sviluppo e di strumenti di valutazione dell'accessibilità possono seguire queste linee guida, per creare e valutare contenuti Web accessibili, sia per persone disabili, sia per dispositivi hardware o software limitati, come i telefoni cellulari. La versione attuale è 2.0.
Ignorare i colori della pagina
Alcuni siti web utilizzano caratteri e colori di sfondo che rendono difficile la lettura, mentre altri siti utilizzano i colori predefiniti del browser. Si può utilizzare un tema a contrasto elevato sfruttando le potenzialtà offerte dai vari browser.
Ad esempio, il browser Chrome lavora con le estensioni, che sono dei programmi installabili direttamente dal browser ed utilizzabili solo nel browser, sotto la voce impostazioni del menù principale (solitamente in alto a destra) è possibile accedere alla sezione estensioni e ricercare quelle che ci interessano. L'estensione High Contrast che permette di cambiare il contrasto di ogni pagina web che si sta visitando, permettendo quindi di invertire i colori a proprio piacimento.
Sul browser Firefox, per impostare i colori predefiniti, occorre agire con un click sul pulsante hamburger e selezionare Opzioni. Dal pannello Generale, spostarsi alla sezione Lingua e aspetto.
Occorre poi fare click sul pulsante Colori… nella sezione Caratteri e colori e scegliere i prorpi colori, tra le altre cose è possibile impostare i colori predefiniti per testo e sfondi, per i link visitati e non visitati e se i collegamenti debbano essere sottolineati.
Segnalazioni
E' gradita la segnalazione di qualsiasi problema di accessibilità per poter correggere tempestivamente gli errori.