Linea Amica, dai che ce la facciamo!

Aggiornamento dal post precedente, Linea amica di chi. Colonna sonora: Je suis désolé, Mark Knopfler.

Sul sito di Innovazione P.A. è disponibile il report delle attività della prima settimana di funzionamento del portale. Da ieri, il backoffice di Linea Amica prende in carico e risponde in 48 ore a tutte le richieste-segnalazioni che pervengono attraverso il portale. Così annuncia Adnkronos. L’articolo presenta molti numeri e l’insediamento di un “comitato di regia”, e fra le altre notizie mi colpisce particolarmente questa: “Sui servizi specifici alle persone con difficoltà, conclude la nota, sono stati avviati gruppi di lavoro congiunti tra il Ministero per la Pubblica Amministrazione e l’Innovazione e le federazioni maggiormente rappresentative dei disabili. Dal 1 marzo entrerà in funzione un gruppo di 20 ricercatori Formez/Federazioni Disabili che costituirà lo strumento di ‘Linea Amica’ in questo settore”.

Bè, forse era preferibile pensarci prima, e prima di pubblicare dichiarazioni fasulle di accessibilità (che è ancora lì, preferiscono fare test ogni 24 ore invece di toglierla) ma… vediamo che succede intanto sul sito.

Uau! Ora i label hanno anche gli attributi for! Quasi quasi tento il colpo grosso, tentiamo un’analisi dell’accessibilità almeno del form.

Disattivati gli stili CSS, per ora il form di contatto si presenta così:

form di contatto di Linea Amica senza CSS

Un form piuttosto semplice insomma: alcuni campi di testo, una casella di controllo, un elenco a discesa.

Per delineare quel form è stato usato questo codice:

<div id="page_center">
<h2>Contattaci (servizio in fase di sperimentazione)</h2>
<p style="color:red; text-align:center;" ><strong></strong></p>
<form id="form" action="invio" method="post">
<div><div class="label">* Campo obbligatorio</div>
<div><br /><br /></div>
<div class="form_input_large">
<div id="form_email" class="label">
<label for="email">E-mail</label><span class="asterisco">*</span>:
</div>
<div id="form_email_input" class="label_input">
<input type="text" id="email" name="email" size="25" value=""/>
</div></div>
<br/><br/>
<div class="form_input"> <div id="form_nome" class="label">
<label for="nome">Nome: </label></div>
<div id="form_nome_input" class="label_input">
<input type="text" id="nome" name="nome" size="25" value=""/>
</div></div>
<div class="form_input_right">
<div id="form_cognome" class="label">
<label for="cognome">Cognome: </label></div>
<div id="form_cognome_input" class="label_input">
<input type="text" id="cognome" name="cognome" size="25" value=""/>
</div></div><br/><br/>
<div class="form_input">
<div id="form_citta" class="label">
<label for="citta">Città:</label></div>
<div id="form_citta_input" class="label_input">
<input type="text" id="citta" name="citta" size="25" value=""/>
</div></div>
<div class="form_input_right">
<div id="form_tel" class="label">
<label for="telefono">Telefono: </label></div>
<div id="form_tel_input" class="label_input">
<input type="text" id="telefono" name="telefono" size="25" value=""/>
</div></div>
<br/><br/>
<div id="form_disp" class="label">
<label for="disp2">Disponibilità ad essere ricontattati: </label></div>
<div id="form_disp_input" class="label">
<input type="checkbox" id="disp2" name="disp" />
</div>
<br/>

<br/>
<div id="form_tipo" class="label"> <label>Tipologia della richiesta a Linea Amica: </label>    </div>
<div id="form_tipo_input" class="label">
<select name="tipologiaRichiesta">
<option value="0">Seleziona tipologia richiesta</option>
<option value="Informazioni generiche">Informazioni generiche</option>
<option value="Segnalazione negativa">Segnalazione negativa</option>
<option value="Segnalazione positiva">Segnalazione positiva</option>
</select>
</div>
<br/><br/><br/>
<div >Inserisci una domanda (max 3000 caratteri).</div>
<br/>
<div id="form_domanda_cont">
<div id="form_domanda" class="label">
<label>Testo della richiesta: </label></div>
<div id="form_domanda_input" class="label">
<textarea name="domanda" cols="54" rows="4"></textarea>
</div></div>
<div id="form_invia" class="label"> <input type="submit" name="Invia" value="Invia" /></div></div></form>        </div> <!-- /#page_center -->

Se una cosa così la facesse un mio amico, gli chiederei ci sei o ci fai. In questo caso, mi limito a chiedere “Perché lo fai?”… Non dico sviluppate una soluzione, almeno leggete un tutorial, fate qualcosa.

Ma a che servono tutti quei div? Provate a usare fieldset e legend per condurre passo passo il cittadino, farlo sentire a casa propria. Una esagerazione? Accessible Form Step Wizard, del nostrano Diego La Monica.

Ma anche senza arrivare a tanto, almeno usate i tag corretti. Un cieco che utilizza Jaws o un qualsiasi screen reader li potrà sfruttare a pieno, se vengono usati. Serve uno spunto? Ecco un esempio. Basta leggere il sorgente e cercare di replicarlo con un minimo di perizia, niente di più.

Un po’ di CSS? Certo, anche l’occhio vuole la sua parte, ed ecco The Man in Blue.

Io spero che nel gruppo dei magnifici “20 ricercatori Formez/Federazioni Disabili” (20? ma non è un po’ esagerato?) ci sia almeno uno che si preoccupa di standard e accessibilità, che conosca almeno una manciata di best pratice dello sviluppo Web, non dico un esperto ma almeno a conoscenza dei fatti, che abbia un’idea di cosa sono i tag di HTML, che capisca la parola semantica…

Je suis désolé, diceva Mark Knopfler. Ne verremo a capo? Forza ricercatori, e auguri! Dai che ce la facciamo.

Qualcuno potrebbe anche dire sì, d’accordo, ma tu come avresti fatto?

Una soluzione senza pretese e riflessioni, di getto, ma completa di fieldset, legend e correggendo le mancanze presenti nell’originale potrebbe essere la seguente. Più accessibile, più usabile, 50% del codice originale. Non ho aggiunto tutti i tabindex, perché mi son stufato. È certamente possibile fare anche meglio.

<form id="contatti" method="post" action="">
<fieldset><legend>1. Dicci come ricontattarti</legend>
<ol>
<li><label for="Email">E-Mail</label>
<input type="text" name="Email" id="Email" tabindex="1" /></li>
<li><label for="Nome">Nome</label>
<input type="text" name="Nome" id="Nome" tabindex="2" /></li>
<li><label for="cognome">Cognome</label>
<input type="text" name="cognome" id="cognome" tabindex="3" /></li>
<li>
<label for="citta">Città</label>
<input type="text" name="citta" id="citta" tabindex="4" /></li>
<li>
<label for="tel">Telefono</label>
<input type="text" name="tel" id="tel" tabindex="5" />
</li>
<li>
<label for="sino">Disponibilità ad essere contattati</label>
<input type="radio" name="Sino" value="Sì" id="Sino_0" />
<label>Sì</label>
<input type="radio" name="Sino" value="No" id="Sino_1" />
<label>No</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>2. La tua domanda</legend>
<ol>
<li>
<label for="domanda">Tipologia della richiesta a Linea Amica</label>
<select name="domanda" id="domanda" tabindex="5">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
<option>ddd</option>
</select></li>
<li>
<label for="testo">La tua richiesta (max 3.000 caratteri)</label>
<textarea name="testo" id="testo" cols="45" rows="5" tabindex="7"></textarea>
</li>
</ol>
</fieldset>
<fieldset>
<legend>3. Invia il tuo messaggio</legend>
<p>Dichiarazione privacy, blablabla, note e quant'altro</p>
<label for="invia">Invia il tuo messaggio</label>
<input type="submit" name="invia" id="invia" value="Invia" tabindex="9" />
</fieldset>
</form>

Annunci

Un pensiero su “Linea Amica, dai che ce la facciamo!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...