Utente:LoStrangolatore/Web Content Accessibility Guidelines
Le WCAG (Web Content Accessibility Guidelines) fanno parte delle iniziative intraprese dal WAI (Web Accessibility Initiative), che a sua volta fa parte del W3C (World Wide Web Consortium), con lo scopo di creare delle linee guida che gli sviluppatori (del Web]]) di contenuti, di strumenti di sviluppo e di strumenti di valutazione dell'accessibilità possono seguire, per poter creare e valutare che dei contenuti Web siano accessibili anche a persone disabili. Questo è un passo molto importante che deve affrontare il Web, ormai necessario, o quasi, nella vita di tutti i giorni. L'informazione non dovrebbe essere limitata solo ad un particolare tipo di persone (la maggior parte dei siti web attualmente in rete non segue queste norme di accessibilità); ma, essendo Internet la rete mondiale più grande, dovrebbe essere consultabile a qualsiasi utente sia con problemi motori o/e cognitivi (anche temporanei) sia a utenti che dispongono di limitati strumenti hardware e software. Questo per dire che i benefici dell'accessibilità del Web possono trarli tutti, anche i non disabili, perché può capitare a chiunque di avere qualche problema fisico temporaneo o una connessione a Internet lenta, ecc.
Come impostare un sito web
[modifica | modifica sorgente]Un sito web può essere costruito dall'inizio rispettando le norme del progetto WAI, ma anche reso accessibile dopo la sua creazione: in questo caso le modifiche da apportare saranno più o meno complesse, a seconda del sito web che si è costruito ed in che modo questo è stato fatto.
Un sito web accessibile è il risultato di un insieme di parti che interagiscono tra loro, come ad esempio:
- Contenuti: le informazioni all'interno delle pagine web devono essere scritte sotto forma di testo, immagini e audio;
- Assistenti tecnologici: come gli screen reader, software di lettura vocale, tastiere particolari, etc;
- Applicativi: come il browser web e un media player per riuscire a leggere al meglio le pagine web;
- Sviluppatori: chiunque abbia un ruolo nel progettare un sito web(designers,programmatori,etc..);
- Tool di convalidazione: che permettano la convalida del codice HTML, CSS, etc..;
- Esperienza utente: anche l'esperienza dell'utente è molto importante per trovare il modo di usare al meglio il web.
Versioni delle WCAG
[modifica | modifica sorgente]Delle WCAG sono presenti due versioni:
- WCAG 1.0 pubblicate nel 1999, contenevano solo 14 tecniche che gli sviluppatori potevano seguire ed inoltre erano spiegate in modo breve, lasciando maggior spazio agli aspetti tecnici riferiti solo a HTML e CSS;
- WCAG 2.0 pubblicate nel 2008, contengono numerose tecniche applicabili a tutte le tecnologie di programmazione ed inoltre sono spiegate in modo esaustivo, includendo esempi, benefici che i disabili possono trarre, procedure di test, ecc.
Tecniche generali
[modifica | modifica sorgente]Le tecniche generali sono tecniche che possono essere applicate a tutte le tecnologie Web. Sono abbastanza esplicite e semplici da capire, anche perché le più complesse sono correlate di esempi abbastanza chiari che ne esplicitano l'intento. Di seguito vengono riportate tutte le tecniche generali del WCAG 2.0 (le tecniche non sono uguali nei dettagli a quelle ufficiali, in inglese, del sito W3C. In questa voce se ne vuole dare una spiegazione semplice e comprensibile in italiano, dato che tradotte in questa lingua non esistono).
- G1 - Aggiungere un link all'argomento di una pagina
Il primo punto ci dice che per rendere migliore l'accessibilità alle informazioni del nostro sito è bene inserire un link nel top-pagina che ci porti all'argomento centrale trattato proprio in quella pagina; Ad esempio: Abbiamo visitato il sito web di un giornale e vogliamo leggere una particolare notizia; è bene inserire un link in quella pagina che ci faccia saltare il menu, banner e qualsiasi altra cosa non riguardi la notizia che cerchiamo, e ci porti direttamente all'inizio della notizia.
- G4 - Arresto, pausa o riavvio di una notizia
Se nel nostro sito sono presenti delle notizie a scorrimento o dei video, è utile includere dei comandi di arresto/pausa/riavvio della notizia che sta scorrendo, per poter permettere al lettore di leggerla con i propri tempi o di rileggerla qualora lo volesse;
- G5 - Nessun limite di tempo per concludere un'attività
Consiste nel dare all'utente la possibilità di effettuare un'operazione senza alcun limite di tempo, qualora sia possibile. Ad esempio in un gioco interattivo, gli utenti possono prendersi tutto il tempo che vogliono per fare la propria mossa.
- G8 - Dare ai video una seconda versione
Questo punto dice che è consigliabile dare ad un video (di un film per esempio) con audio, una seconda versione per le persone disabili della vista, in modo che possano anch'esse comprendere che situazione c'è in quella determinata parte del video. Ovviamente ne servono due versioni: una per persone normalmente abili e una per disabili, perché altrimenti l'accessibilità del video per questi ultimi andrebbe a “danneggiare” quella degli altri. Ad esempio: In un film troviamo una famiglia che deve scappare da un palazzo in fiamme, ma la loro fuga viene ostacolata da un muro. Per una persona disabile della vista è difficile percepire questa situazione, quindi, se fermandosi su quel fotogramma (nella seconda versione del video) entra in gioco una spiegazione della scena, sarà di gran lunga migliore la percezione di ciò che sta accadendo.
- G9 - Sottotitoli in real time
Per sottotitoli in real-time si intende un software che catturi la voce e riesca a convertirla in testo in tempo reale, cosicché, facendo l'esempio di un Telegiornale, le notizie possano scorrere come sottotitoli mentre il giornalista le pronuncia.
- G10 - Creare componenti che usino una tecnologia che supporta le funzioni dell'API
Alcune pagine web vengono create tramite dei programmi che supportano queste funzioni. Se l'autore utilizza queste componenti ed inserisce tutti i vari attributi, il risultato sarà una pagina web totalmente accessibile. Se invece l'autore utilizza altre componenti non previste dall'API deve, dopo il completamento, effettuare dei test per poter confermare la sua accessibilità.
- G11 - Creare contenuti che lampeggino per 5 secondi
Qualsiasi banner, testo o immagine che sia, che lampeggia, provoca disturbo nel lettore, in particolare in utenti con problemi visivi. È preferibile, dunque, limitarne il lampeggiare a 5 secondi, affinché riduca la distrazione del lettore.
- G13 - Descrivere prima ciò che accadrà in un passaggio successivo
Notiamo in questo punto come sia importante, soprattutto per persone disabili, specificare prima che si compia una determinata azione, cosa accadrà dopo, in modo tale che l'utente sappia a cosa va incontro cliccando su quel determinato pulsante. Uno dei diversi metodi che si possono adottare per risolvere questo tipo di problema è quello di scrivere in ordine di lettura, prima a cosa si va incontro e poi l'opzione da scegliere. Ad esempio: Dei bottoni con delle bandiere che servono per far cambiare lingua a un sito, vanno preceduti da un testo che dichiara che cliccando su quei pulsanti verrà modificata la lingua del sito stesso.
- G14 - Informazioni colorate disponibili anche sotto forma di testo
Spesso capita di imbattersi in scelte “colorate” tipo: “premi il pulsante verde per andare avanti oppure il rosso per tornare indietro”. Bene, questo tipo di scelte vanno definite anche in maniera testuale per poterle renderle comprensibili a chiunque.
- G15 - Soglia di flash
Esistono limiti di flash di un'immagine per persone fotosensibili, per permettere loro di visitare i siti web senza avere problemi. Semplici avvertenze spesso non bastano, infatti è possibile che quel sito venga visitato da un bambino fotosensibile o che non riesce a capire il significato di quella frase o che non nota la frase stessa. Quindi bisogna osservare con attenzione anche queste regole, e per sapere se il vostro sito è conforme o no, più avanti queste verranno specificate meglio (vedi 13: G176)
- G17 - Contrasto di 7
- 1 tra testo e sfondo
Per rendere facile la comprensione del testo di una pagina anche a persone con problemi di vista, è consigliabile creare delle pagine che abbiano un rapporto 7:1 tra luce e sfondo. In caso di sfondi tutti neri o tutti bianchi è semplice scegliere il giusto contrasto. Nel caso in cui ci troviamo ad avere uno sfondo particolare, che possa essere una foto di un tramonto o qualsiasi altra foto con più colori, è bene dare al testo uno sfondo anche sfocato, cosicché si possa stabilire tra testo e sfondo-testo un rapporto 7:1 mantenendo lo sfondo-pagina che vogliamo.
- G18 - Contrasto di 4,5
- 1 tra testo e sfondo
Questa tecnica è simile alla precedente, cambia solo il rapporto del contrasto del testo, inferiore a 18 (senza grassetto) o inferiore a 14(con grassetto) mentre per il contrasto 7:1 era di almeno 18(senza grassetto) o almeno 14(con grassetto).
- G19 - Componenti che non lampeggino più di 3 volte a secondo
Questo punto serve per evitare elevati lampeggiamenti di un componente, che potrebbero causare convulsioni a persone che ne soffrono. Questa tecnica limita, proprio per questo motivo, il lampeggio di un componente a non più di tre volte al secondo.
- G21 - Assicurare che gli utenti non rimangano intrappolati
Per evitare che gli utenti rimangano intrappolati all'interno di un applet, mentre stanno visualizzando qualcosa in particolare, è corretto inserire nella pagina che precede l'accesso all'applet un modo o un tasto che permetta successivamente di uscire da esso.
- G53 - Identificare link dal testo che lo racchiude
Per assicurare una buona navigazione, è necessario creare delle frasi che spieghino al meglio a cosa porta quel link, in modo che persone con uno screen reader non trovino problemi durante la navigazione.
- G54 - Linguaggio dei segni per informazioni audio
Talvolta è difficile comprendere un video/audio per una persona che non può udire e non riesce a leggere velocemente il testo che scorre nelle slide, per questo motivo è consigliabile utilizzare il linguaggio dei segni per poter comunicare l'informazione anche a queste persone.
- G55 - Definire le parole tramite link
Per far sì che chiunque legga un contenuto riesca a comprendere al meglio ciò che si vuole trasmettere, è bene includere nelle parole tecniche dell'argomento di cui si sta trattando, dei link che portino alle definizioni di tali parole. Ad esempio: Un contenuto di un sito di informatica che spiega quale sia la differenza tra ram ddr/ddr2/ddr3, deve includere un link nelle parole “ram” e “ddr” che porti ad una pagina che spieghi l'acronimo e dia una piccola definizione.
- G56 - Differenza tra audio in primo piano e audio di background di almeno 20db
Questo punto, serve per persone che hanno dei problemi uditivi e definisce di quanto deve differenziarsi la voce in primo piano, ad esempio di un narratore, dalla musica di sottofondo, per comprenderla bene.
- G57 - Dare un ordine significativo al contenuto
Anche se un contenuto viene visualizzato in modo corretto, può essere che il suo codice sia molto confusionario, e quando qualcuno utilizza degli strumenti AT può incontrare problemi nel capire il contenuto (perché alcuni strumenti AT leggono il codice e lo convertono in contenuto per farlo comprendere all'utente che lo sta visionando). Lo scopo di questa tecnica è quello di invitare gli sviluppatori a scrivere anche il codice in modo corretto e ordinato per evitare questi inconvenienti.
- G58 - Collocare un link che porti ad un file di testo di un file non-testuale
Se nella nostra pagina sono presenti dei file non testuali, come video,audio o immagini, possiamo rendere accessibile questa informazione creando un file di testo che contenga le informazioni presenti nel file non-testuale e porlo con un link accanto ad esso.
- G59 - Elementi interattivi ordinati nel modo in cui vengono visualizzati nei contenuti
Certi contenuti contengono del materiale interattivo che deve essere disposto nel codice in modo tale che rispecchi la parte visiva del contenuto. Se questo non accade, l'utente che utilizza come strumento di focus la tastiera, premendo il tasto Tab per spostarsi, seguirà l'ordine di come gli elementi sono posti nel codice e non l'ordine dei contenuti mostrati, e ciò non dovrebbe accadere.
- G60 - La riproduzione di un file audio si spegne dopo 3 secondi o meno
Per le persone che utilizzano uno screen reader, un audio che duri a lungo può creare fastidio, e trovare il pulsante della pausa può essere più o meno difficile (a volte impossibile). Per questo, limitare la riproduzione dell'audio per 3 secondi o meno è un buon modo per evitare di disturbare gli utenti.
- G61 - Ordine delle componenti
Un sito web per rendere facile ed intuitiva la sua navigazione, ha al suo interno diverse componenti, come ad esempio dei bottoni di una barra di navigazione. Se questi bottoni cambiano posto ogni volta che si cambia la pagina del sito, la navigazione sarà meno intuibile e creerà anche problemi. Ma se un gruppo di componenti o una componente si ripete in ogni pagina nella stessa posizione, oppure si ripete anche avendo in alcune pagine delle sotto-categorie che ne modificano l'aspetto, l'ordine di come sono disposte sarà sempre quello e lo sarà in tutte le pagine, quindi renderà la navigazione facile ed intuitiva.
- G62 - Fornire un glossario
Spesso, è utile fornire un glossario di alcuni termini che si ritrovano all'interno di un sito web. Un glossario è una lista alfabetica di parole e/o abbreviazioni a cui viene data una definizione. Se nel nostro sito web decidiamo di adottare dei termini particolari per qualsiasi ragione e utilizziamo delle abbreviazioni per risparmiare tempo mentre scriviamo, è necessario creare un glossario con i termini che vengono utilizzati nel sito web, in modo da dare la possibilità all'utente che ha appena letto quel termine di comprenderlo al meglio.
- G63 - Mappa del sito
Spesso i menù di navigazione possono essere anche complicati da capire e da usare. Introdurre nel sito web una mappa che mostri tutti i collegamenti a tutte le pagine e i relativi argomenti trattati è un modo per rendere ancora più semplice la navigazione dell'utente.
- G64 - Tabella dei contenuti
Questo punto è come il precedente, ma si riferisce in particolare agli argomenti che trattiamo. Mentre con la mappa del sito creavamo una specie di indice di tutte le pagine di questo e degli argomenti trattati, con la tabella dei contenuti abbiamo un indice che ci permette di spostarci all'interno di un argomento presente nel sito web. Se, ad esempio, stiamo visionando un documento relativo all'hardware di un computer, ma a noi interessa solo la parte relativa alla CPU, la tabella dei contenuti conterrà un link per ogni parte importante di quell'argomento, e quindi avrà un link che ci porterà direttamente alla parte che descrive la CPU.
- G65 - Numerazione pagine
Se stiamo visionando un argomento particolarmente lungo che contiene una serie di link che spezzettano l'argomento in diverse pagine, indicare in che pagina si trova l'utente e mettere a disposizione dei link per tornare indietro o andare avanti agevola la navigazione.
- G68 - Etichette a file audio o video
Per far sì che tutti possano capire di cosa tratta un video o un file audio, possiamo inserire un'etichetta (un titolo) che venga mostrata vicino al file che si sta riproducendo, e che spieghi brevemente di cosa si tratta.
- G69 - Alternative ai file video
Lo scopo di questa tecnica è quello di fornire un testo ben strutturato che esprima tutto ciò che viene visto in un file video, proprio come una vera e propria sceneggiatura.
- G70 - Funzione che indirizzi ad un dizionario online
A differenza dei glossari o di altri modi per definire le parole all'interno del proprio sito, è possibile creare dei collegamenti a veri e propri dizionari online per parole di difficile apprendimento, in modo tale che se una parola non viene capita bene, cliccandoci sopra si raggiungerà la pagina del dizionario che ne darà una definizione.
- G71 - Fornire il link aiuto su tutte le pagine
Questo punto ci suggerisce di creare un link in ogni pagina affinché, cliccandoci sopra, possa aprire una nuova finestra, permettendoci così di mantenere i dati che abbiamo in quella “principale”, in cui sono presenti informazioni per aiutare l'utente su come e cosa fare o a cosa serve un determinato pulsante.
- G73 - Link di descrizione in un'altra pagina
Questa tecnica consiglia di inserire accanto a un contenuto non testuale una descrizione lunga, non posta in modo adiacente al testo, ma inserita attraverso un link, accanto al contenuto non testuale, che porti in un'altra pagina dove appare la descrizione completa.
- G74 - Descrizione vicino al contenuto non testuale
È possibile, ad esempio, mettere vicino al contenuto non testuale “Questi sono cip e ciop. Informazioni su di loro sono dati del paragrafo seguente” e inserire dopo tutta la descrizione completa del contenuto.
- G75 - Fornire un meccanismo per regolare gli aggiornamenti
A seconda del tipo di sito, potrebbero esserci argomenti che per natura di cose è necessario aggiornare frequentemente per vedere se ci sono novità. Questi aggiornamenti rendono maggiormente accessibile il sito se possono essere modificati secondo i propri bisogni da parte dell'utente. Ad esempio, se nel nostro sito abbiamo un blocco dove scorrono notizie, è bene offrire all'utente la possibilità di decidere ogni quanto aggiornare automaticamente la pagina per vedere se ci sono nuove notizie.
- G76 - Permettere all'utente di aggiornare manualmente la pagina
Dato che molte persone potrebbero avere problemi a causa degli aggiornamenti automatici, ad esempio chi usa software di ingrandimento dello schermo, poiché nel momento in cui si aggiorna una pagina si perde la posizione in cui si era e si ritorna nel top-pagina, potrebbe avere problemi a orientarsi nuovamente all'interno della pagina. Proprio per questi motivi è bene dare la possibilità all'utente di effettuare l'aggiornamento manualmente.
- G78 - Fornire una traccia audio per contenuti non udibili
È molto importante per persone disabili della vista disporre di una traccia audio che spieghi bene cosa si sta mostrando in una presentazione che non contiene audio. Ad esempio in una riunione, il presidente indica una cosa dicendo “sarà questo (in questo istante indica qualcosa) il futuro della nostra azienda”. Se a questo discorso viene affiancato un file audio che descrive tutto per bene dicendo anche cos'è quella cosa misteriosa che indica il presidente, per un non vedente diventerà facile comprendere quello di cui si sta parlando.
- G79 - Fornire una versione parlata del testo
Molte persone possono avere problemi a leggere un testo per qualsiasi motivo, per problemi alla vista, perché il carattere è troppo piccolo, ecc. Un rimedio è quello di fornire un file audio del testo scritto, in modo tale che ciò che è scritto possa essere udito da chi ha problemi.
- G80 - Fornire un pulsante per cambiare contesto
Con questa tecnica si vuole fornire agli utenti uno strumento per poter cambiare semplicemente contesto.
- G81 - Linguaggio dei segni in finestra separata
Spesso nel guardare una notizia video, un non udente può avere problemi anche a seguire il testo che scorre nel video, a causa della sua velocità. Per questo è possibile creare un link di una pagina separata, che permetta all'utente che sta visionando il video di poterlo, se lo vuole, guardare attraverso il linguaggio dei segni in un'altra pagina. Questo anche per non incidere sul materiale mediatico rivolto ad altri utenti.
- G82 - Fornire una breve alternativa testuale a un contenuto
Questo punto ci consiglia di inserire un piccolo testo vicino ad un contenuto non testuale per fare comprendere a tutti cosa fa quella componente.
- G83 - Descrizioni testuali per campi obbligatori
Questa tecnica ci descrive come, per migliorare l'accessibilità, sia necessario indicare i campi obbligatori attraverso un testo. Questo è possibile farlo in due modi: o dal lato client, cioè indichiamo a priori quale campo è obbligatorio, o dal lato server, cioè, una volta compilati i campi e inviata la richiesta al server per elaborarli, questo ci restituisce accanto al campo obbligatorio omesso un messaggio dicendo che è necessario inserire in esso dei dati.
- G84 - Dati inseriti non validi
Quando un utente inserisce dei dati non validi, perché errati, in un campo è bene notificarglielo per fargli capire dove ha sbagliato. Questo è possibile tramite delle notifiche lato server (server-side) che mostrano un messaggio di errore, dove può esserci scritto "È stata immessa una password errata.", dopo che l'utente invia il modulo al server e quest'ultimo non ha un riscontro con i dati di convalida inseriti in un database (DB).
- G85 - Struttura dei dati inseriti non validi in un campo
Per evitare il problema che un utente inserisca in un campo dei dati non conformi a quelli che accetta, è bene dal lato client fare in modo che, mentre l'utente scrive e inserisce un valore errato, gli venga subito mostrato accanto al campo il vincolo violato, oppure, dal lato server, non appena la pagina viene inviata ad esso e nota che qualche campo non contiene informazioni rispettanti i vincoli posti, restituisca un messaggio d'errore che indichi qual è il campo e che tipo di dati inserire.
- G86 - Fornire un testo di sintesi
Per testi complicati, molto tecnici, è consigliato fornire per gli utenti disabili un testo di sintesi che definisca in modo facile ciò che tratta quel documento.
- G87 - Rendere disponibile il testo di un file audio/video in modo sincronizzato
Questo punto non parla di sottotitoli, ma di un testo che vuole comunicare ciò che la musica vuole descrivere, in un film ad esempio. Il tutto in modo sincronizzato (come gli attuali sottotitoli che conosciamo) e reso disponibile attraverso un link, posto in modo visibile di fianco al contenuto audio/video originale.
- G88 - Dare dei titoli descrittivi alle pagine web
Questa tecnica ci descrive come rendere più facile la navigazione di un utente. Se noi diamo ad ogni pagina web un titolo che sinteticamente la descriva al meglio, l'utente non sarà costretto a consultare tutta la pagina per capire di cosa tratta, ma basterà semplicemente leggere il titolo per sapere se è un argomento di proprio interesse o meno.
- G89 - Fornire il formato dei dati da inserire in un campo
Per aiutare l'utente ad evitare errori, è consigliabile scrivere accanto ad un campo, che vuole che i dati siano inseriti in un particolare ordine, la descrizione (anche con un esempio) di come vanno inseriti i dati. Ad esempio, se dobbiamo inserire una data di nascita in un campo di un sito italiano, sarà specificato di inserire la suddetta nell'ordine gg/mm/aa (giorno/mese/anno).
- G90 - Comandi per gestire eventi da tastiera
Per chi utilizza come strumento di navigazione una tastiera è bene includere dei comandi che possano essere dati in input da essa per svolgere una certa operazione.
- G91 - Testo del link che descrive l'obiettivo
Questo punto ha lo scopo di fare inserire delle brevi descrizioni come testo del link che possano far capire brevemente a che argomento portano, dando la possibilità all'utente di scegliere semplicemente il link di maggiore interesse.
- G92 - Descrizione lunga di un contenuto non testuale
A differenza della descrizione breve di un contenuto non testuale (che da solo un accenno di ciò che esso tratta), la descrizione lunga da, invece, la possibilità di leggere tutti i dati relativi al contenuto, in modo esteso e completo.
- G93 - Testo per disabili dell'udito sempre disponibile
Per rendere possibile la comprensione di un file audio ai non udenti o a chi ha problemi dell'udito è possibile rendere sempre disponibile e visibile il testo dei suoni e dei dialoghi più importanti.
- G94 - Spiegazione breve accanto a un contenuto non-testuale
Molte volte è utile utilizzare, accanto a contenuti non-testuali, delle brevi descrizioni che siano lo scopo di ciò che viene mostrato e non la descrizione dell'immagine. Per esempio possiamo prendere in considerazione il caso in cui in un sito sia presente un modulo di ricerca accompagnato una lente di ingrandimento, bisogna inserire come testo breve “Ricerca” e non “Lente di ingrandimento”.
- G95 - Testo breve per contenuti non-testuali
A volte, per poter spiegare bene dei contenuti non-testuali, ci si serve di testi lunghi. Per questo le brevi descrizioni, poste prima della lunga spiegazione, danno la possibilità all'utente di decidere se l'argomento è di proprio interesse, per poi proseguire con la descrizione completa, aumentando l'accessibilità dell'informazione stessa.
- G96 - Dare informazioni sugli elementi di una pagina web
Questo punto ci invita a scrivere testualmente il comportamento di una determinata componente della pagina web. Se, ad esempio, abbiamo una pagina con dei campi per la registrazione al sito, alla fine di questa ci sarà un pulsante che sarà etichettato come “Avanti”. Inserendo un testo come: “Cliccando sul pulsante avanti la registrazione sarà completata”, faciliteremo l'accessibilità al sito.
- G97 - Sigla di una forma estesa
Se abbiamo un argomento abbastanza esteso è bene, anche ai fini della ricerca degli argomenti all'interno di un sito, mostrare solo la prima riga/frase della forma estesa, dando così un piccolo accenno dell'argomento.
- G98 - Annullare o rivedere dati
Spesso capita di dover effettuare transazioni on-line che, una volta concluse, non permettono più di tornare indietro. Per dare l'assoluta certezza che l'operazione che si sta effettuando contenga dati corretti, si possono utilizzare diversi mezzi: -Nel caso di una pagina dove noi inseriamo dei dati, prima di inviarli definitivamente, deve essere data l'opportunità di rivederli; -Nel caso di più pagine nelle quali vengono inseriti dati, può essere difficile ricordare quelli inseriti precedentemente, quindi si può procedere dando la possibilità all'utente di spostarsi tra le pagine (Avanti o Indietro) per poter rivedere i dati inseriti, o meglio ancora dare come step finale una pagina riassuntiva dove vengono mostrati i dati inseriti nelle precedenti pagine, permettendo una loro modifica in caso di errore.
- G99 - Fornire la possibilità di recuperare file cancellati
Questa tecnica ci invita a dare la possibilità agli utenti di poter ripristinare dati che sono stati eliminati per sbaglio. Si può fornire questa possibilità in due modi: -Creando delle zone di “sosta” per questi file, dove, dopo essere stati eliminati, si fermano per un periodo di tempo in attesa di essere ripristinati o cancellati definitivamente (Ad esempio, alcuni siti che offrono il servizio di e-mail mettono a disposizione dei propri utenti un cestino per la posta eliminata. Se un utente per sbaglio elimina una mail, questa si sposta nel cestino, ma ci rimane per una settimana, dando la possibilità di essere ripristinata. Dopodiché viene eliminata del tutto); -Registrando tutte le operazioni di cancellazione, cosicché sia possibile ripristinarle in seguito.
- G100 - Dare una denominazione di un contenuto non-testuale
Anche se persone con disabilità visive o uditive non possono comprendere rispettivamente il soggetto di un'immagine o il suono di uno strumento musicale, possiamo fornire delle denominazioni per far capire loro di cosa si tratta. Ad esempio, se un non vedente visita un sito web che ha l'immagine del quadro della gioconda, possiamo fornire un testo alternativo con la scritta “Mona lisa di Leonardo Da Vinci”, oppure, se un non udente entra in un sito dove viene riprodotto il suono di una chitarra elettrica, possiamo fornire il testo “Suono di una chitarra elettrica” per dare l'idea di ciò che sta accadendo.
- G101 - Dare la definizione di una parola o frase con un significato particolare
Capita che vengano scritte parole o frasi che hanno un uso insolito, come ad esempio: -la parola ha diverse definizioni sui dizionari, è una definizione specifica o fa parte di un gergo; -la frase è una espressione tipica di una località. Devono essere date delucidazioni riguardo al suo reale significato. Ad esempio: -La parola “macchina” può essere intesa come automobile, mentre in informatica sta ad indicare un calcolatore (computer); -La frase “Vuota il sacco” significa a seconda del contesto “Dimmi cosa nascondi”; -Una frase giapponese dice “getta il cucchiaio”, che per loro significa “lascia perdere (non puoi fare più nulla)”.
- G102 - Dare la spiegazione delle abbreviazioni
L'obiettivo di questo punto è quello di dare la spiegazione di acronimi, di parole o frasi, che spesso provengono da altri linguaggi. Ad esempio: -L'abbreviazione “a.m.” proviene dal latino “ante meridiem” che in italiano significa “prima di mezzogiorno”; -L'abbreviazione “p.m.” proviene dal latino “post meridiem” che in italiano significa “dopo mezzogiorno”; -L'abbreviazione “e.g.” proviene dal latino “exempli gratia” che in italiano significa “per esempio”; -L'abbreviazione “cf” proviene dal latino “confer/conferatur” che in italiano significa “confrontare”; -L'abbreviazione “CEE” significa in italiano “Comunità Economica Europea”; -L'abbreviazione “WAI” in inglese “Web Accessibility Initiative” significa in italiano “Iniziative per l'accessibilità del web”.
- G103 - Testo accompagnato da immagini illustrative
Persone con problemi di lettura potrebbero trovare complicata la lettura di un testo. Per questo, inserire delle immagini, grafici, ecc. illustrativi può agevolare la lettura per chi ha problemi di questo genere.
- G105 - Salvare i dati dopo che una sessione scade
Quando siamo all'interno di un sito la nostra sessione di lavoro ha un tempo limitato. Se per qualsiasi motivo rimaniamo inattivi quel che basta per far scadere la sessione, ci troviamo “sbattuti fuori” dalla nostra sessione di lavoro. Per risolvere questo problema il server memorizza nella cache i dati su cui stavamo lavorando e, non appena ri-accediamo, vengono ripristinati. Ma attenzione, i dati non rimarrano per sempre nella cache, bensì solo il tempo sufficiente per assicurare la completazione di quella sessione utente.
- G107 - Usare comandi per cambiare una componente del sito
Può capitare che alcuni siti cambino contesto anche quando si passa con il puntatore sopra. Questo può essere un gran problema per persone con disagi cognitivi, che magari usando lo screen reader o l'ingrandimento vengono confusi da componenti simili. È bene creare componenti che vengano attivate solo sotto esplicito comando da parte dell'utente.
- G108 - Utilizzo dei markup
Per permettere un'ottima comprensione del contenuto agli utenti che utilizzano tecnologie assistenti, bisogna dichiarare le componenti di markup, attributi che vengono letti dagli strumenti di accessibilità.
- G110 - Utilizzare redirect client-side
L'obiettivo di questa tecnica è quella di creare dei redirect client-side. Questi consentono al programma utente di caricarne il suo contenuto tramite l'url, rendendo semplice in questo modo la loro consultazione.
- G112 - Definizioni nel testo
L'obiettivo è quello di definire il significato delle parole direttamente nel testo in cui esse sono contenute. La definizione può essere messa poco prima o poco dopo la parola stessa. Ad esempio: -Ho bruciato la RAM(memoria ad accesso casuale) del mio computer.
- G115 - Utilizzare i corretti elementi del linguaggio
Quando creiamo una pagina non dobbiamo guardare solo se quello che ci appare a schermo è quello che vogliamo; Dobbiamo definire, per ciò che vogliamo scrivere, la giusta componente della tecnologia che stiamo usando, che ci fa ottenere il giusto risultato. Questo perché scrivere in modo semanticamente scorretto equivale a non fare capire pienamente quello che vogliamo comunicare, perché quando degli strumenti AT andranno a leggere il codice per codificare il linguaggio in informazioni comprensibili per chi li utilizza, non riuscirà a definire bene, come invece dovrebbe essere, ciò che sta leggendo.
- G117 - Variazione di contenuti
Quando viene effettuata la modifica di un testo, è bene lasciare sempre la parte originale e segnare attraverso il cambio del font, la grandezza del carattere, la sottolineatura, ecc, le modifiche che gli sono state apportate.
- G120 - Pronuncia a seguire
Per le parole che hanno bisogno di una particolare pronuncia, essa può essere immessa subito dopo la parola stessa (basta inserirla solo la prima volta che si presenta nel testo). Nel caso in cui una parola uguale ma che però deve pronunciarsi in modo diverso si ripresenta, si deve ri-dichiarare la sua pronuncia. In questo punto però si affronta solo il caso di un'unica pronuncia (anche per più parole ma distinte) in tutto il testo.
- G121 - Link alle pronunce
È possibile inserire la pronuncia di una particolare parola, oltre che in seguito alla stessa, anche attraverso un link che porti ad un'altra pagina che ne contiene la pronuncia.
- G122 - Riferimenti colorati
Se dobbiamo leggere un testo con particolari colori gli utenti non disabili riescono a farlo rapidamente, ma chi ha delle disabilità utilizza diversi strumenti, come display Braille, screen reader e altro. Ma è molto importante; quando facciamo riferimenti a cose particolari, come ad esempio “i campi obbligatori sono segnati in rosso”, definire delle etichette per quei campi come “obbligatorio”, cosicché anche persone disabili possano comprendere queste particolarità.
- G123 - Link per ignorare contenuti
Per rendere facile la navigazione di un contenuto, è possibile inserire dei link che ci permettano di saltare parte di esso, andando così all'inizio di ciò che c'è subito dopo quel contenuto. Se ad esempio, stiamo guardando una guida dove vengono mostrati i vari procedimenti per fare quella operazione su diversi OS (Operating System), è bene inserire dei link per saltare la parte degli altri sistemi operativi e andare direttamente al nostro.
- G124 - Link nella parte superiore della pagina
Questo obiettivo simile al precedente, ci consiglia di inserire dei link nella parte alta della pagina che ci permettano di navigare per tutti i diversi indici. Ad esempio, un libro on-line avrà, come di consueto, un indice per tutti i capitoli e paragrafi, ma dovrà includere anche dei collegamenti ipertestuali per poterli raggiungere in modo facile e veloce.
- G125 - Collegamenti a pagine web correlate
Per mettere a disposizione agli utenti maggiori informazioni, si possono usare dei link (correlati all'argomento) che permettano un approfondimento o un'ulteriore spiegazione in un'altra pagina. Ad esempio, la pagina che riguarda il WCAG 2.0 contiene ulteriori link che spiegano il contenuto dei punti e che consentono di fare ulteriori approfondimenti, come le differenze tra WCAG 1.0 e WCAG 2.0.
- G126 - Link disponibili in tutte le pagine
Questa tecnica è utile per rendere ancora più semplice la navigazione. Ha l'obiettivo di mettere a disposizione in ogni pagina tutti i link che possono esserci in una pagina principale. Per rendere chiaro il concetto possiamo consultare l'esempio: un libro on-line contiene un indice che porta a tutti i suoi capitoli, ogni singolo capitolo all'inizio dovrà contenere, a sua volta, tutti i collegamenti agli altri capitoli, come accade nell'indice.
- G127 - Idendificare la relazione di pagine web
Con questo punto si vuole consentire agli utenti di comprendere il rapporto che c'è tra una pagina web e una collezione di pagine web. Considerando sempre l'esempio del libro on-line suddiviso in capitoli, ogni capitolo di questo libro, supponendo che siano in pagine web differenti, avrà come titolo della pagina web il numero, il titolo del capitolo e il titolo del libro di testo.
- G128 - Segnalare posizione corrente nei link
Questo obiettivo ci permette di sapere sempre dove siamo all'interno di una serie di link. Ciò è molto importante soprattutto quando ci troviamo in una serie di step che ci portano ad una conclusione, cosicché l'utente possa sempre sapere a che punto della sequenza si trova.
- G130 - Voci descrittive
Con questa tecnica si vogliono fornire delle intestazioni descrittive ad ogni contenuto web. Come per i titoli, queste devono rappresentare con poche parole, più approfondite dei titoli, ciò che tratta quello specifico contenuto.
- G131 - Etichette descrittive
Queste sono molto importanti quando si parla di componenti web. Se stiamo compilando un form, dobbiamo sapere quali dati si devono inserire. Proprio per questo è indispensabile fornire delle etichette, per questi campi, ben descrittive. Ad esempio, un modulo che richiede il nome dell'utente deve avere etichette “Nome” e “Cognome”, così da far capire a qualsiasi utente che tipo di informazioni vuole.
- G133 - Checkbox per sessione utente
Per poter permettere agli utenti disabili di non perdere il loro lavoro, questa tecnica ha lo scopo di mettere a disposizione di un sito web una checkbox al momento del login che permetta all'utente di scegliere la durata della propria sessione di autenticazione. Solitamente il tempo a disposizione è o di 15 minuti a sessione oppure, spuntando la checkbox dell'etichetta relativa, una sessione indeterminata.
- G134 - Convalida delle pagine web
La convalida delle pagine web non è altro che la verifica di non esistenza di ambiguità all'interno del codice di esse. Se per una tecnologia (web) è stato creato uno strumento di convalidazione, lo sviluppatore lo può usare per poterne verificare la validità del codice scritto. Questo è molto importante, perché permette allo sviluppatore di correggere degli errori, rendendo sempre più accessibile il proprio sito web.
- G135 - Impostare le caratteristiche di accessibilità API (Application Programming Interface)
Se un programmatore utilizza degli strumenti API per creare delle componenti o delle pagine web, questi vengono forniti con degli attributi che, riempiendoli, fanno si che i la componente creata sia accessibile.
- G136 - Link a pagina alternativa conforme
Questo punto ci consiglia di inserire un link a una pagina alternativa che porti ad un contenuto conforme alle regole di accessibilità, se la pagina principale visitata non è conforme a queste ultime.
- G138 - Utilizzare spiegazioni in markup
Con questa tecnica possiamo rendere più accessibile il contenuto mettendo una spiegazione in markup sul contenuto che ha il vincolo, così da farlo riconoscere agli strumenti AT. Gli utenti senza disabilità non incontrano problemi a navigare, anche rapidamente, sul sito web, ma chi ha disabilità incontra forti problemi a leggerne il contenuto (Ad esempio il campo di un modulo definito obbligatorio perché rosso, ha una spiegazione in markup riconoscibile da uno strumento AT).
- G139 - Meccanismo che permette di saltare direttamente agli errori
Questa tecnica ha l'obiettivo di far vedere all'utente dove ha sbagliato. Se inseriamo dei campi errati in un modulo, utilizzando il controllo server-side, alla fine otteniamo una pagina che ci indica nella parte iniziale dove abbiamo sbagliato e ci mantiene i dati corretti che abbiamo inserito nella pagina precedente, in modo da correggere solo quelli errati, che la pagina già ci indica, e rimandare il modulo.
- G140 - Separare la struttura delle informazioni dalla loro presentazione
Questo punto ha lo scopo di facilitare l'interazione dell'Assistive Tecnology (AT) con i contenuti. La struttura del testo, come: titoli, paragrafi, liste, etc.., deve essere separata dalla struttura della presentazione, e cioè dai font, dimensione del testo, colore, etc.., in modo che gli strumenti di tecnologia assistiva possano decidere se decodificare solo la parte strutturale.
- G141 - Organizzare una pagina utilizzando titoli
L'obiettivo di questa tecnica è quello di assicurare che ogni sezione abbia il suo titolo. In HTML questo viene permesso attraverso i tag di intestazione (h1,h2,h3,h4,h5 e h6). Altre tecnologie avranno altri elementi per darne una. Sarebbe bene fare in modo che le intestazioni di una sezione o di un argomento siano ben nidificate. Ad esempio: iniziamo con un titolo in h1, a cui facciamo seguire il nome del paragrafo in h2, se il paragrafo ha delle sottosezioni faremo delle intestazioni utilizzando h2 o h3, e così via.
- G142 - Utilizzare tecnologie che gli user agents a disposizione possono ingrandire
Questa tecnica vuole dare la possibilità di rendere disponibili contenuti su cui si può effettuare lo zoom. Contenuti scritti in tecnologie supportate dagli user agents permettono l'ingrandimento del contenuto senza creare confusione tra le strutture e il contenuto stesso. Infine, dato che questa tecnica si basa completamente sulle funzionalità degli user agents, è consigliabile fare diverse prove con diversi programmi di questo tipo.
- G143 - Testo alternativo per il CAPTCHA
Spesso capita di dover inserire dei caratteri, estrapolati da un'immagine oscurata o da un file audio, in un campo. Per far capire ciò agli utenti che utilizzano tecnologie assistive per visionare una pagina web, bisogna utilizzare del testo alternativo che faccia notare dove si debbano inserire i caratteri CAPTCHA.
- G144 - Garantire un CAPTCHA alternativo
L'obiettivo di questo punto è quello di far sì che venga reso un CAPTCHA alternativo. Ad esempio: se in un sito è presente un'immagine CAPTCHA, è bene includere anche un'alternativa audio, cosicché, se un utente ha delle disabilità uditive, può utilizzare l'alternativa video CAPTCHA.
- G145 - Rapporto di contrasto 3
- 1
La tecnica in questione tende a rendere comprensibile il testo su uno sfondo dando un rapporto di contrasto, tra testo e sfondo, di 3:1. Con questa tecnica, le parole senza grassetto devono avere almeno carattere 18 e le parole con grassetto almeno 14.
- G146 - Utilizzo di layout liquido
Questo punto consiglia di utilizzare un layout che elimini la barra di scorrimento orizzontale, facendo tornare a capo i caratteri che per qualsiasi motivo tendono a uscire dal limite della pagina. Questo è possibile grazie alle dimensioni delle strutture del layout, date in percentuale, in modo tale che possano adattarsi a tutti i dispositivi su cui viene visualizzata la pagina.
- G148 - Non impostare colori di sfondo e testo
Un'ottima tecnica è quella di non impostare colori di sfondo e di testo, così da far scegliere all'user agent il contrasto necessario affinché l'utente possa visualizzare senza problemi l'articolo (l'utente imposta all'user agent i colori che meglio vede).
- G149 - Utilizzo delle componenti di interfaccia utente per evidenziare su cosa si sta puntando
Questa tecnica fa sì che gli strumenti di tecnologia assistiva comunichino all'utente disabile su cosa si sta puntando al momento. Ad esempio: abbiamo selezionato un'area dove inserire del testo o abbiamo selezionato un link. Questi stati di “evidenzia” vengono rispettivamente riconosciuti dalla barra verticale lampeggiante o dal rettangolo tratteggiato.
- G150 - Alternative testuali per dirette audio
L'obiettivo di questa tecnica è quello di rendere disponibile in modo testuale le dirette delle trasmissioni audio. È difficile creare alternative testuali accurate in real-time, perché non è possibile rivederle una seconda volta per correggerle. Tecniche come il Re-voicing speech-to-text (una persona che ascolta la parola e poi la ripete ad un computer che riconosce la sua voce) potranno essere utilizzati in futuro per creare dei sottotitoli in real-time.
- G151 - Fornire un collegamento a una trascrizione del testo di una trasmissione audio, se preparato in anticipo
Quando una trasmissione audio segue un testo preparato prima, se si fornisce una copia di questo sul sito web che ne trasmette l'audio, sarà più semplice e anche migliore capirne il contenuto.
- G152 - Impostare il lampeggio di un'immagine animata GIF di n cicli (in 5 secondi)
Questo punto serve a garantire che le immagini GIF smettano di lampeggiare entro 5 secondi. Tre aspetti determinano la creazione di un'immagine animata:
- Il numero di fotogrammi dell'immagine, che sono i fotogrammi usati per l'animazione;
- Il frame rate, che è quanto a lungo un fotogramma viene visualizzato;
- Il numero di ripetizioni, cioè quante volte l'animazione viene ripetuta.
Nel caso più semplice la durata dell'animazione è la moltiplicazione tra i tre precedenti elementi. Ad esempio, una semplice immagine lampeggiante con 2 frame, un frame rate di 0,5 secondi, e 3 ripetizioni avrà una durata di (2 * 0.5 * 3) secondi, o esattamente 3 secondi. Nel caso in cui il frame rate di due fotogrammi è distinto, si effettua la somma dei frame rate dei fotogrammi, moltiplicati per il numero delle ripetizioni. Ad esempio, una semplice immagine con due fotogrammi, di cui il primo visualizzato per 0,75 secondi e il secondo per 0,25 secondi, e tre ripetizioni avrà una durata di ((0.75 + 0.25) * 3) secondi, esattamente 3 secondi. Per far smettere di lampeggiare un'immagine entro 5 secondi, bisogna impostare il numero di ripetizioni a 5 e dividere per il prodotto del numero dei fotogrammi e del loro frame rate (per frame rate differenti effettuare la somma). Arrotondare questo numero ottenuto, per difetto, al numero più vicino. Se uno solo dei risultati è maggiore di 5 secondi, bisogna correggere uno dei tre elementi.
- G153 - Rendere facile il testo da leggere
L'obiettivo di questa tecnica è quello di garantire che una pagina web sia facile da leggere. Gli utenti disabili, leggendo del testo complesso possono avere difficoltà a comprenderne il contenuto. Al fine di ridurre la complessità del testo bisogna seguire questi punti:
- Sviluppare un singolo argomento per punto;
- Utilizzare frasi semplici e poco articolate;
- Usare frasi non superiori a 25 parole;
- Considerare di dividere una frase lunga in due corte;
- Utilizzare frasi che non contengano più di due periodi;
- Indicare le relazioni logiche tra frasi, paragrafi e sezioni del testo;
- Evitare il gergo professionale;
- Sostituire parole lunghe e non comuni con parole corte e familiari;
- Rimuovere parole che non cambiano il senso della frase;
- Utilizzare elenchi puntati o numerati al posto di paragrafi che contengono una lunga serie di parole;
- Fare chiari riferimenti ai pronomi e agli altri punti del documento;
- Utilizzare frasi con forma verbale attiva, che sono più facili da capire rispetto a quelle passive;
- Usare tempi verbali in modo coerente;
- Utilizzare nomi e etichette in modo coerente;
- G155 - Casella di controllo oltre al pulsante “Invio”
La casella di controllo, serve a verificare se un utente è certo dei dati che ha inserito; spuntandola, quindi, è come se dichiarasse che è certo che i dati siano validi. Questo tipo di controllo si trova soprattutto quando si stanno per effettuare delle operazioni, che non appena concluse, saranno irreversibili. Non ha niente a che vedere quindi con la sicurezza che può dare un pulsante con un'etichetta che dice “Ho controllato i dati e li invio”, poiché per sbaglio l'utente potrebbe inviarli anche se non corretti. Ad esempio: in un sito di una banca quando noi stiamo per inviare un pagamento, ci appare accanto al pulsante “Invia Pagamento” una casella di controllo che ci chiede se i dati del conto del destinatario siano corretti. Se noi andiamo avanti senza spuntare questa casella, il pagamento non verrà inviato e i dati rimarranno inseriti nei campi appositi. Non appena spuntata la casella e premuto il tasto “Invia pagamento” l'operazione (irreversibile) verrà effettuata e verrà visualizzato un messaggio di pagamento inviato.
- G156 - Tecnologie user agents attualmente disponibili
È possibile impostare in diversi user agents, come Internet Explorer, tutte le versioni di FireFox e Opera dalla versione 6 in poi, dei parametri che permettono all'utente di scegliere che colore utilizzare per il testo e per il background di una pagina, nel modo che più gli facilita la visione.
- G157 - Incorporare un servizio di sottotitoli in diretta per un sito web
Questa procedura, che rende disponibile in diretta (o quasi) dei sottotitoli per una trasmissione audio, è possibile grazie ad una persona che ascolta ciò che viene trasmesso e tramite una tastiera speciale riesce a mettere i sottotitoli con un piccolo ritardo.
- G158 - Fornire alternative testuali per file di solo audio
Per dei file di solo audio (parlato e suoni naturali e/o artificiali) è bene, per chi è disabile dell'udito, mettere a disposizione un documento che riporti tutto ciò che contiene il file audio, dal parlato alla descrizione della musica, ecc.
- G159 - Fornire alternative testuali per file di solo video
Questa tecnica è importante per far sì che le persone disabili della vista possano comprendere cosa accade in un video dove ci sono immagini, espressioni, azioni, persone, animali. Questo è possibile grazie ad un documento testuale che contiene tutti i minimi dettagli del video, dall'espressione del volto all'ambiente che si vede, da ciò che sta accadendo alla descrizione dei personaggi.
- G160 - Fornire nel linguaggio dei segni informazioni, idee e processi che devono essere capiti per poter utilizzare il contenuto
Per persone disabili dell'udito o con problemi cognitivi, il linguaggio dei segni può essere la loro prima lingua. Per estendere le informazioni anche a loro è necessario creare dei video in linguaggio dei segni che possano essere messi nella stessa pagina dell'articolo originale, oppure in un'altra pagina collegata all'articolo originale tramite un link. È molto importante, per chi fa il filmato, essere inquadrato da vicino, in modo tale da mostrare in primo piano mani, braccia, spalle e viso (perché il linguaggio dei segni è tutto il linguaggio espresso da quelle parti del corpo), ed è indispensabile evitare di far finire fuori inquadratura le parti del corpo sopra citate, al fine di poter trasmettere a pieno ciò che dice il contenuto originale.
- G161 - Motori di ricerca che aiutano gli utenti
Applicando questo punto al nostro sito, faremo in modo che gli utenti non si smarriscano all'interno di esso (se troppo grande) e attraverso l'immissione di alcune parole (parole chiave) possano trovare le sezioni di proprio interesse, se queste esistono. Applicazioni di ricerca vengono messe a disposizione in modo gratuito da alcune società di ricerca. Altre società mettono a disposizione uno script di ricerca che si può includere all'interno del proprio sito web, altre ancora mettono a disposizione (a pagamento) altri servizi di ricerca più dettagliati.
- G162 - Posizionare le etichette
La posizione delle etichette dei campi non è banale, in quanto una buona posizione rende facile capire cosa deve essere inserito nel campo che segue. Solitamente (e quindi è consigliabile metterle in questo modo) le etichette vengono messe o sopra il campo oppure a sinistra del campo, in quanto questi variano di lunghezza, in modo tale che, se qualche utente con problemi visivi utilizza uno strumento di zoom, riesca a comprendere il da farsi senza problemi. Caselle di controllo e pulsanti di opzione hanno larghezza uniforme, mentre le loro etichette no, quindi possono essere messe anche a destra.
- G163 - Diacritici ON/OFF
Diverse lingue utilizzano questi segni diacritici per aiutare la pronuncia delle parole o per distinguere parole simili. Questi segni all'interno di un sito possono essere attivati o disattivati (o resi disponibili solo per determinate lingue) tramite dei bottoni. Questi bottoni dal lato client permettono il salvataggio nel cookie di sessione, cosicché nelle successive visualizzazioni della stessa sezione, l'impostazione (attiva, disattiva o attiva per qualche lingua) rimarrà operativa.
- G164 - Periodo di tempo per modificare un'operazione
Quando ci troviamo ad affrontare degli ordini on-line è possibile che una volta portato a termine un ordine, scopriamo che abbiamo inserito qualche informazione errata o addirittura vogliamo annullare l'ordine. Questo servizio può essere messo a disposizione da questi siti web, permettendo all'utente di tornare a rivedere gli step precedenti anche una volta concluso l'ordine. Un sito web che offre questo tipo di servizio deve però comunicare all'utente per quanto tempo il termine di recesso/modifica è valido.
- G165 - Modificare gli indicatori dell'ingrandimento della piattaforma
Sui sistemi operativi è disponibile uno strumento di ingrandimento, che per default ha una grandezza e un colore del bordo, per separarlo dal resto. Se, per esempio, il colore del nostro bordo dell'indicatore è uguale al colore dello sfondo di un sito web, veniamo disturbati dalla loro non distinzione. Per questo motivo questi strumenti di ingrandimento hanno delle opzioni, nelle quali è possibile modificarne gli attributi (come dimensione dell'ingrandimento, colore bordo, ecc).
- G166 - File audio per i file video
Per le persone disabili della vista o ipovedenti, creare delle copie audio (preferibilmente in un formato comune nel web come MP3) di file video, permette loro di comprendere dalla descrizione che viene fatta nel file MP3 ciò che sta accadendo.
- G167 - Pulsante con etichetta adiacente ad un campo
Quando siamo di fronte ad un campo che, prendendo in input dei caratteri, viene richiamato da un pulsante per fare una determinata operazione, includendo come etichetta del pulsante lo scopo che devono avere i caratteri inseriti in quel campo, evitiamo di dare delle definizioni ridondanti con altre etichette affiancate al campo. Ad esempio: un campo dove il testo che immettiamo viene ricercato all'interno del sito, può avere un pulsante con etichetta “Ricerca nel sito queste parole”.
- G168 - Richiesta di conferma per continuare
Quando si sta per effettuare un'azione che non potrà essere ripristinata, è bene richiederne la conferma, affinché l'utente possa ripensarci e prendere una decisione precisa. Il sito web che offre questa possibilità di revisione della scelta presa, deve chiarire in un messaggio, che apparirà solo nel momento di conferma dell'operazione selezionata, a cosa va incontro l'utente confermando questa scelta. Ad esempio: si vuole cancellare una email dal cestino; nel momento in cui clicchiamo su “Elimina” ci apparirà un messaggio che ci informerà che l'e-mail una volta cancellata non potrà più essere ripristinata, e di seguito appariranno due pulsanti, “OK” (Per confermare l'operazione, eliminando definitivamente l'e-mail) e “Annulla” (Per annullare l'operazione di eliminazione).
- G169 - Allineare il testo su un solo lato
Persone con problemi cognitivi possono trovare problemi a comprendere un testo allineato a sinistra con margine a destra, a causa dello spazio (abbastanza grande) tra queste parole. Si consiglia allora di allineare il testo su un solo lato (sinistro preferibilmente) o di non impostare i campi di allineamento durante lo sviluppo del sito web, in modo tale che vengano allineati al margine sinistro.
- G170 - Fornire un controllo per l'audio
Quando accediamo ad un sito web e questo riproduce in automatico un file audio, lo sviluppatore deve rendere disponibile nel top della pagina (per essere maggiormente visibile) un pulsante che fermi la riproduzione. Questo perché le persone che hanno dei problemi e/o che utilizzano degli strumenti di AT, possono riscontrare difficoltà dal suono che ne viene riprodotto.
- G171 - Suoni su richiesta tramite pulsante
Per non creare disagi alle persone che utilizzano gli screen reader dobbiamo fare in modo che l'utente abbia la possibilità di abilitare i suoni solo se lo desidera, premendo un pulsante (magari posizionato nel top page) che avvii la riproduzione del suono. Quindi, accedendo al sito web, l'audio sarà nello stato off fino a quando non si premerà il pulsante sopraindicato.
- G172 - Fornire un meccanismo che annulli la giustificazione del testo
Se per qualche motivo la giustificazione del testo è necessaria, occorre che l'autore renda disponibile una versione del testo non allineata, permettendo così all'utente di seguirlo nella versione più comoda al proprio utilizzo.
- G173 - Alternativa audio di un file audio-video
Fornire un'alternativa audio di filmati con o senza audio è, per le persone disabili della vista, molto importante. Dato che molti degli user agents non riescono a unire più tracce audio, è necessario fornirne una a parte. Questa traccia è simile a quella originale, basta inserire nei momenti di pausa gli aspetti del video che non vengono recepiti dal dialogo (come l'ambiente in cui si è, quello che accade di particolare nello sfondo che riprende i protagonisti di quella scena, gli stati d'animo, ecc).
- G174 - Fornire un link per passare ad una visualizzazione con sufficiente contrasto
Se vogliamo creare un sito con dei nostri canoni di contrasto, possiamo farlo rendendo disponibile un link (che abbia un contrasto soddisfacente, in modo tale da permettere agli utenti con problemi di vista di vedere questo link, nelle pagine dove il contrasto non è corretto, per far notare loro che è disponibile una versione con contrasto adeguato) che porti ad una pagina identica, con le stesse funzionalità e lo stesso contenuto, riprodotti con un buon rapporto di contrasto testo-sfondo.
- G175 - Fornire uno strumento per impostare il colore del testo/sfondo
Se nel nostro sito web inserissimo uno strumento che permetta di scegliere il colore del testo e il colore dello sfondo, daremo modo a chi soffre di problemi cognitivi di poter visualizzare i contenuti in modo semplice. Non sempre utilizzare colori contrastanti come nero e bianco, rispettivamente per testo e sfondo, può risolvere questi problemi, in quanto altre persone percepiscono meglio il testo blu sullo sfondo giallo. Se aggiungiamo che queste persone potrebbero avere dei problemi ad impostare nel browser la visualizzazione dei colori di testo e sfondo dei siti web, la nostra soluzione si rivelerà la migliore perché la più semplice che questi utenti hanno a disposizione.
- G176 - Mantenere una parte lampeggiante abbastanza piccola
Questa tecnica ha lo scopo di fornire un metodo per far sì che si possano mantenere degli oggetti lampeggianti piccoli nella propria pagina. Se questo oggetto lampeggia più di 3 volte in un secondo, ma la parte che lampeggia è inferiore al 25% di 10 gradi del campo visivo, allora l'oggetto verificherebbe questa tecnica e sarebbe accettabile. Il grado 10 del campo visivo rappresenta l'area centrale della visione negli occhi e si può considerare una zona molto ricca di sensori visivi. I flash che vengono recepiti vengono trasmessi direttamente alla corteccia visiva, e per chi è fotosensibile questo causerebbe delle convulsioni. Ricevere dei flash in qualche altra parte dell'occhio (che ha meno sensori) porterebbe certamente meno problemi in quanto verrebbero trasmesse meno informazioni alla corteccia visiva. Quindi bisogna fare attenzione alla visione centrale con campo visivo di 10 gradi:
- Se il contenuto è per un contenuto web generale, allora bisogna fare riferimento alla Formula 1 Small Safe Area for Web Content: La maggior parte degli autori non sanno come traslare dal campo visivo ai pixels. Ad oggi la risoluzione più diffusa dei display è di 1024 x 768 (una maggiore risoluzione non farebbe altro che migliorare la situazione, dato che l'immagine verrebbe visualizzata in modo più piccolo) e di circa 15-17 pollici in diagonale. La distanza tipica che si ha dallo schermo è di 28-66 centimetri e un campo visivo di 10 gradi cattura di circa 341 x 256 pixel.
Per chi dispone di un display con una risoluzione inferiore a quella indicata, visualizzare tali immagini sarebbe molto pericoloso. Per questo tipo di problema bisogna adottare il punto G19.
- Se il contenuto è di un display noto (ad esempio di un'azienda), bisogna fare riferimento alla Formula 2 Small Safe Area for Known Displays: Per diversi motivi, quali la distribuzione di sensori di visione centrale non sempre circolare e la comodità di calcolo, un'approssimazione rettangolare a 4:3 del campo visivo centrale di 10 gradi è di 10 gradi di larghezza e 7,5 di altezza. Questo ha una superficie di 75 gradi quadrati, rispetto ai 78,5 gradi quadrati di un vero cerchio di 10 gradi.
- Per convertire la distanza di visione nella dimensione di un rettangolo: moltiplicare la distanza di visione da 0,1745 (10 * pi / 180) per ottenere la larghezza del rettangolo, moltiplicare la distanza di visione da 0,1309 (7,5 * pi / 180) per ottenere l'altezza del rettangolo. (Questo calcolo può essere fatto in pollici o millimetri, o in qualsiasi altra unità di lunghezza.)
- Determinare le dimensioni di 10gradi in pixel. Per fare ciò, moltiplicare la larghezza e l'altezza del rettangolo, come spiegato nel passaggio 2.1, per ottenere la risoluzione dello schermo in pixel. Per avere la dimensione orizzontale e verticale del rettangolo in pixel:
- Per un display widescreen 1080p (che è 1920 x 1080 pixel), la risoluzione dello schermo in pixel per pollice è 2203 diviso la diagonale dello schermo (risultato in pollici).
- Per un display widescreen 720p (che di solito è 1365 per 768 pixel), la risoluzione dello schermo in pixel per pollice è 1566 diviso la diagonale dello schermo (risultato in pollici).
- Per un monitor LCD che specifica il pixel pitch in millimetri / pixel, la risoluzione dello schermo in pixel per pollice è 25,4 diviso per il pixel pitch in millimetri.
- Per qualsiasi display, se si conosce la reale dimensione diagonale dello schermo in pollici e la risoluzione orizzontale e verticale del display in pixel, quindi la risoluzione dello schermo in pixel per pollice, è la radice quadrata di [(risoluzione orizzontale in pixel) * (risoluzione orizzontale in pixel) + (risoluzione verticale in pixel) * (risoluzione verticale in pixel)].
- G177 - Suggerire come correggere un errore
Per evitare che un utente sbagli ad inserire dei dati all'interno di alcuni campi che prevedono dati particolari, possiamo inserire dei controlli che forniscano come risultato, se l'utente ha sbagliato, il suggerimento per correggerne l'errore. Ad esempio, se dobbiamo inserire il numero di un mese dell'anno e noi inseriamo 13, ci apparirà un suggerimento che ci dirà “I mesi dell'anno sono in tutto 12, quindi inserire un numero compreso tra 0 e 12”.
- G178 - Controlli sulle pagine web che consentano lo zoom almeno del 200%
Utenti con capacità visive ridotte, hanno dei problemi a visualizzare le pagine web ad una grandezza normale, se aggiungiamo che non riescono a configurare le impostazioni del browser per l'ingrandimento, un'ottima soluzione è quella di inserire dei controlli di ingrandimento all'interno delle nostre pagine web. Lo zoom di queste pagine dovrà essere un ingrandimento a livelli che porti almeno ad uno zoom del 200% del contenuto originale.
- G179 - Garantire che non ci sia perdita di contenuti quando il testo viene ridimensionato e i contenuti no
Alcuni user agents ridimensionano il testo senza ridimensionare le strutture che lo contengono, e questo può causare un accavallamento del testo tale che il contenuto viene reso inutilizzabile. Esistono però delle tecniche di layout che permettono al testo di essere ridimensionato senza problemi fino ad almeno il 200% della sua dimensione iniziale. Se poi si aumenta ancora con lo zoom, il testo può essere fatto accavallare. Le strutture che lo contengono possono anche avere una barra di navigazione che permetta all'utente di scorrere il testo ridimensionato.
- G180 - Fornire all'utente un modo per impostare la propria sessione di lavoro a 10 volte quella standard
Alcuni utenti non riescono a completare la propria sessione di lavoro all'interno di un sito con la durata di quest'ultima ad un tempo prestabilito. Per andare incontro a queste persone, vengono messe a disposizione delle componenti che servono ad allungare la propria sessione a 10 volte quella standard. Sarebbe meglio se l'utente potesse decidere senza limitazioni quanto potrebbe durare la propria sessione di lavoro, anche attraverso incrementi discreti.
- G181 - Inviare dati dopo la scadenza della sessione di lavoro
Nel caso di dati importanti, quando si dilunga troppo una sessione di lavoro e questa scade senza che ce ne accorgiamo, per dare maggiore sicurezza all'utente bisogna fornire, nel momento in cui tentiamo di inviare i dati che finora abbiamo elaborato, un messaggio che ci informa che la nostra sessione è scaduta e che, per non perdere i dati che avevamo creato/modificato, è necessario re-inserire nei campi le nostre identificazioni (come nickname e password). Inseriti questi ultimi ri-accediamo alla nostra sessione e i dati che stavamo inviando saranno inviati correttamente. Questo è possibile grazie al server che, scaduta la nostra sessione, ci richiede una nuova autenticazione prima di procedere e collega alla pagina di ri-autenticazione la pagina precedente che conteneva i dati che avevamo creato/modificato, e al momento dell'identificazione dell'utente i dati in questione vengono inviati in automatico.
- G182 - Fornire ulteriori riferimenti visivi oltre al colore del testo
Persone con problemi visivi, potrebbero avere problemi ad orientarsi attraverso il solo colore diverso delle parole/frasi che ne identifica la loro specialità. Questa tecnica viene fornita per poter attribuire qualche altra particolarità al testo speciale che inizialmente è solo colorato in modo diverso. Ad esempio, al titolo di un testo, oltre che a scriverlo in rosso, potremmo anche attribuirgli il grassetto o il corsivo, cosicché venga evidenziato maggiormente che è una parola/frase speciale, permettendo, a chi magari non distingue il colore rosso, di capire che quel testo è un elemento speciale.
- G183 - Applicare un contrasto di 3
- 1 con il testo attorno per parole/frasi speciali
Per utenti con problemi visivi, può essere utilizzata questa tecnica per rendere maggiormente visibile un testo speciale (tipo link, titoli, ecc). Essa consiste nel creare un contrasto tra la parte speciale e quella che troviamo attorno rispettivamente di 3:1. Anche se questa differenza di colore rende molto visibile questa espressione, non è succifiente, perché potrebbe esserci un utente che non distingue quel colore che noi gli abbiamo dato per renderla visibile. A questo punto si procede impostando un ulteriore formattazione (ad esempio grassetto, sottolineato, ecc.) dando la possibilità anche a queste persone di recepire sicuramente e in modo facile che quella parola/frase svolge un compito particolare.
- G184 - Descrivere le informazioni da inserire in un form o in un insieme di campi
Quando ci troviamo ad inserire dei dati più o meno personali, dobbiamo sapere bene quale sia la giusta sintassi per inserirli. Questa può essere descritta all'inizio di un form, oppure se ci sono dei campi che si ripetono, sarebbe opportuno inserire una descrizione per tutti i campi in modo tale da evitare di scriverla per tutti. Ad esempio, se ci sono dei campi obbligatori, invece di definirli uno per uno scrivendo “Questo è un campo obbligatorio” possiamo definirli in questo modo “I campi obbligatori sono contrassegnati da un “*” (asterisco)”; oppure la data di nascita da inserire in un campo avrà una descrizione del tipo “Inserire la data di nascita secondo la seguente sintassi: gg/mm/aaaa.”.
- G185 - Link a tutte le pagine di un sito nella sua Home Page
Quando abbiamo un sito di piccole dimensioni, per mostrare all'utente tutte le sezioni che il sito mette a disposizione, possiamo inserire nella Home Page tutti i link che si possono visitare, includendo in ogni singola pagina del link un collegamento alla pagina principale. Applicando questa tecnica otterremmo due obiettivi in uno: il primo, quello di avere tutti i link alle sezioni nella Home Page; il secondo, quello di avere nella pagina principale anche una mappa del sito. Per far comprendere meglio questo punto consideriamo il seguente esempio: Il sito web di un artigiano ha nella Home Page i link che portano alla pagina “Contatti”, “Dove siamo”, “Prodotti”, e ognuna di queste pagine ha un link che porta alla pagina principale. In questo modo vengono soddisfatti i due criteri di cui si è discusso sopra.
- G186 - Utilizzo di controlli per fermare il lampeggio di un oggetto
Questa tecnica consiglia di introdurre dei controlli visibili nella parte alta della pagina (top-page) così da permettere agli utenti a cui danno fastidio i flash delle immagini di poterle fermare grazie a questi comandi, che possono o fermare tutte le immagini che lampeggiano oppure possono esserci diversi controlli per quanti contenuti lampeggianti ci sono.
- G187 - Disattivare i lampeggi direttamente dall'user agent
È possibile disattivare il lampeggio delle immagini direttamente impostandolo dall'user agent, fermando così tutte le immagini lampeggianti che vengono incontrate all'interno dei siti web.
- G188 - Fornire un pulsante per aumentare gli spazi di linea e del paragrafo
Persone con problemi cognitivi possono incontrare difficoltà a leggere del testo troppo stretto (con piccoli spazi tra una linea di testo e un'altra) e quindi, inserendo dei pulsanti che permettano di aumentare questo spazio di almeno 1,5 volte quello originale, aumenterebbe la facilità di lettura e di comprensione di questi utenti.
- G189 - Controlli nel top-pagina che cambiano il testo dei link
Nel web sono presenti degli utenti che preferiscono comprendere il contesto per capire a cosa porta un link e utenti che invece vogliono immediatamente un link abbastanza esteso in cui il testo stesso del link facci capire a cosa è indirizzato. È utile quindi, applicare un link al top-pagina che sia scritto per esteso, in modo che possa essere compreso dagli utenti che vogliono andare subito all'obiettivo senza considerare il contesto e che porti ad una alternativa della stessa pagina, in cui però i link sono tutti scritti in modo esteso. Per comprendere meglio questo punto osserviamo l'esempio di seguito: Un sito di programmi applicativi freeware (liberi) ha tanti testi che spiegano questi ultimi e dei link al loro download. Sempre lo stesso sito conterrà nel top-pagina un link con testo esteso che avrà scritto “Se vuoi passare alla versione con link estesi clicca qui”. Cliccando su quel collegamento visualizzeremo una pagina alternativa alla precedente nella quale tutti i link per scaricare i programmi avranno testo del tipo “Scarica Nome Programma in licenza freeware”, in modo da evitare all'utente di comprendere il contesto per capire dove poter cliccare per poter scaricare quel file.
- G190 - Fornire un link per un contenuto non conforme che porti a una versione conforme
Quando all'interno del nostro sito web è presente un contenuto che per forza di cose non può essere reso accessibile, bisogna porre accanto un link testuale che porti alla versione conforme. Ad esempio, il video di una canzone non può includere nelle pause della sua versione originale la spiegazione audio di ciò che sta accadendo. L'ascolto di questa darebbe fastidio a chi è normalmente abile. Dovrebbe però avere accanto un link che porti ad una versione accessibile anche a chi è disabile, in modo tale da permettere anche a questi ultimi la comprensione di ciò che vuole trasmettere la canzone.
- G191 - Fornire un comando che ricarichi la pagina senza contenuti lampeggianti
Questa tecnica, per agevolare la navigazione del sito web da parte di utenti con problemi cognitivi, consiglia di creare un'alternativa (della pagina web che contiene i contenuti lampeggianti) che non contenga componenti che lampeggino. Il tutto può essere reso disponibile all'utente attraverso un link, un pulsante che porti ad una pagina uguale a quella originale tranne che per le componenti lampeggianti che qui devono essere eliminate.
- G192 - Completamente conformi alle specifiche
Quando un linguaggio di marcatura è utilizzato in modo conforme alle regole definite nel Success Criterion 4.1.1, non c'è bisogno di verificare le tecniche WCAG 2.0, in quanto è pienamente conforme a queste.
- G193 - Help Assistant in una pagina web
È possibile includere in una pagina web un assistente virtuale (Help Assistant) che dia all'utente degli aiuti su come compiere delle operazioni. Questo assistente può essere avviato, fermato, messo in pausa e riprodotto, ai fini di agevolare il compimento dell'operazione all'utente. Deve essere inoltre resa disponibile un'alternativa testuale dei consigli dati dall'assistente virtuale, raggiungibili tramite un link posto accanto ad esso.
- G194 - Controllo ortografico e suggerimenti durante la scrittura
Utenti con problemi cognitivi o con delle disabilità potrebbero incontrare problemi nello scrivere del testo ortograficamente corretto. Mettere a disposizione un modo per il controllo dell'ortografia sarebbe un'ottima soluzione, oppure dare dei suggerimenti (come fanno alcuni motori di ricerca) che, man mano che si scrivono le lettere, mostrino tutte le possibili parole che contengono quelle lettere.
- G195 - Utilizzare indicatori di attivazione ben visibili
Molti browser utilizzano di default degli elementi di focus (quando si seleziona un elemento) che non sono tanto distinguibili a seconda dei contesti in cui si vanno a richiedere, e questo può creare confusione. Questa tecnica ha l'obiettivo di far utilizzare un puntatore di focus con dei colori abbastanza vivaci e con linee particolari, in modo che la selezione di un contenuto venga subito identificata.
- G196 - Testo alternativo per un gruppo di immagini
Quando abbiamo un gruppo di immagini e ciascuna di queste rappresenta uno stato, è inutile descrivere ciascuno stato dell'immagine, l'importante (ai fini della comprensione) è descrivere lo stato che rappresenta quell'immagine in quel momento. Il concetto può essere un po' austico, ma, con un esempio verrà compreso pienamente. Se siamo in un sito e visualizziamo un'immagine a cui è stata data una votazione tramite le comuni 5 stelle (a seconda del voto, da 0 a 5, che si dà le stelle si colorano. Es: il voto è 2, si colorano due stelle dell'immagine) di gradimento e consideriamo il caso in cui all'immagine sia stato dato un voto di 3, la descrizione del voto avrà scritto “È stato dato un voto di 3 su 5”
- G197 - Etichette, nomi e testi alternativi uguali se applicati a componenti che effettuano le stesse funzioni
Utenti disabili della vista, o con problemi a quest'ultima, se incontrano delle etichette diverse applicate a componenti che compiono la stessa funzione, possono cadere in errori inutili, non sapendo che quella componente ha la stessa funzione di un'altra, solo che non è stato specificato.
- G198 - Sessione utente senza limite di tempo
Utenti con varie disabilità non riescono a terminare il proprio lavoro nel tempo limite che viene imposto alla sessione. Fornendo un controllo che, prima che scada la pagina,dia la possibilità all'utente di impostare ad “illimitata” la durata della propria sessione di lavoro, si potrà avere tutto il tempo necessario per concluderlo con calma.
- G199 - Feedback di operazione eseguita con successo
Quando un'operazione, durante una sessione di lavoro, viene portata a termine correttamente, invece di verificare che tutto è andato come volevamo andando a ricercare ciò che abbiamo inviato, può essere fornito un messaggio che avvisi che l'operazione è avvenuta con successo. Ad esempio, se inviamo un messaggio sul forum, dopo aver cliccato sul pulsante invio, dopo qualche attimo di attesa, se tutto è andato bene, vedremo una pagina in cui è scritto il messaggio “Il messaggio è stato inviato con successo”.
Informazioni più approfondite
[modifica | modifica sorgente]- (EN)Tutte le tecniche WCAG 2.0
- (EN)Criteri di successo
- (EN)Indice principale dei contenuti delle WCAG 2.0
- (EN)Lista di tutti i criteri di successo (Success Criterion)
- (EN)Livelli di conformità