Web Design  »  Guide  »  Guida Accessibilità dei siti Web pratica 

· Evidenziare i campi modulo rispetto allo sfondo. Uno dei problemi principali che incontrano gli ipovedenti è la scarsa visibilità dei campi modulo sulla pagina. Per consentire loro di identificarli con chiarezza, è consigliabile studiare un tipo di impaginazione che ne favorisca la visibilità: per esempio un forte contrasto tra lo sfondo circostante, i campi e i testi delle etichette. Meglio ancora sarebbe creare una netta bordatura intorno ai campi, in modo da renderne ben definito il perimetro. Ciò si può ottenere facilmente, almeno con i browser grafici di ultima generazione, usando apposite definizioni di stile. Per esempio:

input {border: 3px solid #000}

che crea un bordo nero di tre pixel intorno ai campi definiti dall'elemento INPUT. La necessità di evidenziare l'elemento da compilare rispetto allo sfondo è massima per i componenti più piccoli dei moduli, cioè le caselle di spunta ("checkbox" in inglese) e i radiocomandi ("radiobutton"). Un esempio di evidenziazione tramite CSS di questi elementi è visibile nel modulo di contatto dei forum accessibili di Diodati.org: i due radiocomandi, che sarebbero normalmente poco visibili per un ipovedente, sono bordati di grigio scuro per farli risaltare rispetto al grigio chiaro dello sfondo.

· Consentire all'utente di ingrandire i campi modulo. Una possibilità in più, per permettere agli ipovedenti un'agevole lettura e compilazione dei moduli, consiste nel creare una funzione per ingrandire all'occorrenza i campi ed il loro contenuto. Per chi volesse vedere un'applicazione pratica di ciò, la funzione è stata implementata in tutti i moduli presenti sui forum di Diodati.org: per mezzo di un uso combinato di script lato server e definizioni CSS, si permette all'utente di modificare lo stile dei campi, ingrandendoli o rimpicciolendoli a piacere. Vengono modificati sia lo spazio occupato dal campo sia la dimensione del testo al suo interno. L'uso basilare della funzione è il seguente (nell'esempio il linguaggio lato server utilizzato è ASP):

<style type="text/css">
............
<% if ... then %>
input,select {
font-size:180%;
font-family:arial,helvetica,sans-serif;
font-weight:bold
}
textarea {
font-size:180%;
font-family:monospace;
font-weight:bold
}
<% else %>
input,select {
font-size:100%;
font-family:arial,helvetica,sans-serif
}
textarea {
font-size:100%;
font-family:monospace
}
<% end if %>
............
</style>

Il semplice codice di programmazione qui riportato, tradotto in linguaggio discorsivo, significa: se l'utente fa una certa scelta (nel nostro caso quella d'ingrandire, premendo un apposito pulsante sulla pagina), allora applica lo stile ingrandito dei campi modulo, definito da dimensioni al 180% e caratteri in grassetto; viceversa, se l'utente non fa nessuna scelta oppure se ha scelto qualcosa di diverso rispetto a prima – cioè se ha scelto di rimpicciolire invece che di ingrandire -, imposta lo stile normale predefinito, caratterizzato da dimensioni al 100% e niente grassetto. Benché alcuni browser di ultima generazione come Opera e Mozilla consentano nativamente di ingrandire a piacere tutta la pagina, moduli compresi, altri browser - come il ben più diffuso Internet Explorer - non possiedono altrettanta versatilità. L'uso della funzione di ingrandimento dei campi modulo sopra descritta, usata in combinazione con il limitato ingrandimento dei caratteri possibile in Internet Explorer, consente anche agli ipovedenti che usano questo browser un'agevole lettura e compilazione dei moduli.

Prima di abbandonare l'argomento, è importante una precisazione. Il punto di controllo 10.4 delle WCAG 1.0, che ha priorità 3, suggerisce agli sviluppatori di inserire dei caratteri segnaposto in ogni campo modulo destinato all'immissione di testo da parte degli utenti. Questa è una norma transitoria: viene cioè raccomandata la sua applicazione, solo finché i programmi utente in uso, tecnologie assistive comprese, non gestiranno correttamente i controlli vuoti.

Ma i programmi utente attualmente utilizzati, dai più datati browser grafici ai sintetizzatori vocali come Jaws, sono in grado di gestire correttamente anche i campi modulo vuoti. Continuare perciò a mettere del testo segnaposto all'interno dei campi, al solo scopo di favorire eventuali antiche tecnologie non conformi allo standard HTML, ci sembra diventato del tutto inutile. Per di più, la presenza di un testo da cancellare all'interno di un campo di immissione conduce ad una palese perdita di usabilità del modulo: molti utenti, infatti, dimenticano di cancellare il testo segnaposto, o lo cancellano parzialmente, e ciò finisce con l'invalidare inevitabilmente i dati che essi inoltrano.

Se lo scopo della presenza di un testo segnaposto è, invece, quella di attirare l'attenzione dell'utente sul campo, il che si rivelerebbe utile per gli ipovedenti, allora il medesimo obiettivo può essere conseguito con un'evidenziazione dei bordi per mezzo dei CSS, ottenibile con i sistemi che sono stati descritti più sopra.

Per tali ragioni, consigliamo agli sviluppatori – discostandoci stavolta dall'aderenza alle WCAG 1.0 - di non inserire del testo segnaposto nei campi di immissione dei loro moduli, a meno che non si tratti di testo che non necessita di essere cancellato dall'utente (per esempio la stringa "http://" in un campo che deve essere completato con l'inserimento di un indirizzo web).

Altri articoli

Altre guide

Altre newsletter