Document Actions
Accessibilità form
medio
Il codice di Plone presta particolare attenzione al rispetto degli standard internazionali riguardo l'accessibilità ed è di buona qualità, tuttavia in una discussione sulla mailing list dedicata ad ItalianSkin è nata una proposta per migliorarlo ancora ed ovviare così a fastidiosi bug degli screen reader.
In particolare in questo documento prenderemo in considerazione il codice dei form ed i problemi che sono stati evidenziati nella mailing list dedicata ad Italianskin, un laboratorio aperto a tutti per migliorare Plone in ottica accessibile.
Qui di seguito abbiamo il codice di un form tra quelli resi disponibili in Plone ed oggetto della discussione nella mailing list:
1 <form action="join_form" method="post"
2 class="enableUnloadProtection">
3
4 <fieldset>
5
6 <legend>
7 Personal Details
8 </legend>
9 ...
10 <div class="field">
11
12 <label for="fullname">Full Name</label>
13
14 <div class="formHelp">
15 Enter full name, eg. John Smith. (with alphanumeric characters only!)
16 </div>
17
18 <input type="text"
19 name="fullname"
20 id="fullname"
21 size="30"
22 value="fullname"
23 tabindex="1"
24 />
25
26 </div>
27 ....
28 <div class="field">
29
30 <div class="formHelp">
31 A URL will be generated and e-mailed to you; follow the link
32 to reach a page where you can change your password and
33 complete the registration process.
34 </div>
35 </div>
36
37 <div class="formControls">
38 <input class="context"
39 type="submit"
40 tabindex="7"
41 name="form.button.Register"
42 value="Register"/>
43 </div>
44
45 </fieldset>
46
47 </form>
Da come si può notare, il form fa un ampio utilizzo di tag legend, fieldset e label associate a ciascun elemento input (mancano gli attributi title, ma a breve saranno aggiunti su tutte le pagine di Plone).
Ogni elemento di input è corredato da una label a cui è associato, inoltre ci sono delle sezioni marcate dalla classe formHelp contenenti delle informazioni che dovrebbero supportare l'utente durante la compilazione del form, spesso fondamentali ai fini della comprensione e di una corretta compilazione. Per esempio un tipo di informazione
che ritengo fondamentale potrebbe essere: "ATTENZIONE: in questo campo puoi inserire solo caratteri alfanumerici, altrimenti l'operazione fallirà".
Fino a qui sembra tutto a posto, tranne per il fatto che Jaws, il più diffuso screen reader sul mercato, in modalità editazione non permette di leggere proprio quei testi che dovrebbero aiutare l'utente nella compilazione del form.
In particolare, quando l'utente scorre con Jaws, la pagina viene letta correttamente in ogni particolare, ma quando si entra in modalità editazione, per compilare il form, Jaws legge solo le etichette dei campi. Accedendo alle impostazioni avanzate di Jaws è possibile settare la lettura degli attributi title, tuttavia anche nell'ultima versione attualmente sul mercato, la 8.0, la lettura contemporanea delle label e tag title dei campi input non avviene. Essendo spesso queste informazioni fondamentali, è nata una lunga discussione per trovare la strada migliore per risolvere questo problema.
Problemi rilevati nei più comuni screen reader
I problemi riscontrati dai test effettuati da Nunziante Esposito e Franco Carinato con tutte le versioni di Jaws, dalla 6.10 alla 8.0, ed altri screen reader quali Windows Eyes e NVDA sono i seguenti:
- Jaws in modalità edit non permette di leggere i testi di aiuto marcati in Plone con la classe formHelp, ma solo i contenuti delle label;
- Jaws non legge sia il contenuto delle label sia gli attributi title sull'elemento di input, nonostante nella configurazione del software sia contemplata questa possibilità;
- Jaws in modalità edit non legge altri testi di supporto alla compilazione del form, non associati a nessun elemento di input.
Soluzioni proposte
L'obiettivo finale è quello di migliorare ulteriormente la qualità dei form in Plone (già ottima direi) e trovare una soluzione standard che permetta a chiunque utilizzi uno screen reader di averne tutti gli elementi utili per compilare efficientemente i form, nell'attesa che un giorno questi bachi, in Jaws o in altri screen reader, vengano risolti.
Si ritiene infatti prioritario, anche se non indicato in specifiche raccomandazioni o leggi vigenti, che chiunque utilizzi Plone, possa leggere in modo agevole tutte le informazioni rilevanti dei form. Essendo gli screen reader attualmente disponibili limitati in tal senso, si crede opportuno adattarci a tali limiti e consentire così una fattiva accessibilità.
Rendere leggibili i testi di supporto alla compilazione degli elementi di input
Aggiungere attributo title
Una tra le prime proposte per ovviare a questo problema è stata quella di inserire delle informazioni descrittive sull'elemento di input all'interno dell'attributo title, ovvero modificare il codice in maniera simile a questa:
10 <div class="field">
11
12 <label for="fullname">Full Name</label>
13
14 <div class="formHelp">
15 Enter full name, eg. John Smith. (with alphanumeric characters only!)
16 </div>
17
18 <input type="text"
19 name="fullname"
20 title="Enter full name, eg. John Smith. (with alphanumeric characters only!)"
21 id="fullname"
22 size="30"
23 value="fullname"
24 tabindex="1"
25 />
26
27 </div>
Questa sembrerebbe proprio la via più corretta, tuttavia ci siamo scontrati nuovamente con un baco di Jaws, in quanto Jaws non permette di leggere sia il contenuto delle label sia gli attributi title sull'elemento di input, nonostante nella configurazione del software sia contemplata questa possibilità
Utilizzo di tag a semantica più stretta
E' stato proposto di utilizzare il tag <p> al posto dei <div> per la rappresentazione dei testi informativi:
<p class="formHelp">
Enter full name, eg. John Smith. (with alphanumeric characters only!)
</p>
al posto di:
<div class="formHelp">
Enter full name, eg. John Smith. (with alphanumeric characters only!) </div>
ma anche tale tentativo non ha portato a nessun cambiamento nella lettura di Jaws.
Soluzione definitiva
Abbiamo concordato che l'inserimento dell'attributo title è opportuno e consigliabile, anche se in questo caso non porta beneficio a chi utilizzi degli screen reader, almeno nelle versioni attualmente disponibili. Nella speranza che si evolva lo screen reader attualmente più diffuso e che magari qualche altro sistema, speriamo Open Source, diventi una valida alternativa a Jaws, la soluzione migliore sembra quella di inserire degli span dentro le label.
In tale modo è possibile anche preservare l'attuale aspetto grafico tipico di Plone, modificando opportunamente i fogli di stile:
10 <div class="field">
11
12 <label for="fullname">
13 Full Name:
14 <span class="formHelp">
15 Enter full name, eg. John Smith. (with alphanumeric characters only!)
16 </span>
17 </label>
18
19 <input type="text"
20 name="fullname"
21 title="Enter full name, eg. John Smith. (with alphanumeric characters only!)"
22 id="fullname"
23 size="30"
24 value="fullname"
25 tabindex="1"
26 />
27
28 </div>
Analizzando la reale struttura di un form Plone si nota che anche le informazioni visualizzate in caso di errore di compilazione vengono visualizzate in tag <div>, e quindi hanno lo stesso problema dei testi informativi con classe formHelp. Ecco allora come in definitiva potrebbe essere un campo di Plone completamente accessibile:
<div class="field"
tal:define="error errors/username| nothing;
username request/username | nothing;"
tal:attributes="class python:test(error, 'field error', 'field')">
<label for="username">
<span tal:omit-tag=""
i18n:translate="label_user_name">User Name</span>
<span class="fieldRequired"
title="Required"
i18n:attributes="title title_required;"
i18n:translate="label_required">(Required)</span>
<tal:block condition="error">
<span class="formError" tal:content="error">Validation error output</span>
<span class="hiddenStructure">—</span>
</tal:block>
<span i18n:translate="help_user_name_creation_casesensitive"
class="formHelp">
Enter a user name, usually something like
'jsmith'. No spaces or special characters.
Usernames and passwords are case sensitive,
make sure the caps lock key is not enabled.
This is the name used to log in.
</span>
</label>
<input type="text"
name="username"
id="username"
title=""
size="30"
value="username"
tabindex=""
tal:attributes="value username;
title help_user_name_creation_casesensitive;
tabindex tabindex/next;"
/>
</div>
Rendere leggibili i testi di supporto alla compilazione del form (non associati a nessun input)
Soluzione definitiva
Nel caso di testi sprovvisti di campo associato, ad esempio quello appena prima del tasto di conferma del join_form.pt, si potrebbe utilizzare una label senza specificare l'attributo for:
<div class="row"
tal:condition="allowEnterPassword">
<label>
<span class="formHelp" i18n:translate="label_password_change_mail">
A URL will be generated and e-mailed to you; follow the link
to reach a page where you can change your password and
complete the registration process.
</span>
</label>
</div>
In questo modo il testo verrebbe letto correttamente in quanto inserito in una label.
Modifiche al foglio di stile
Al fine di non modificare il layout del form, si sono aggiunti questi comandi al foglio di stile finale:
.formHelp, .formError
{
display: block;
font-weight: normal;
}
Risultati
Queste modifiche verranno applicate sia al codice di ItalianSkin che direttamente nelle future versioni di Plone.
