Come utilizzare l’attributo placeholder di HTML5 e risolvere i problemi di accessibilità.
L’attributo placeholder di HTML5 consente di visualizzare un breve suggerimento all’interno delle caselle input di tipo testo e delle textarea. Quando la casella riceve il focus, il testo sparisce e lascia spazio ai caratteri digitati dall’utente.
E’ una novità molto comoda che permette di evitare l’uso di JavaScript, ma deve essere utilizzata con attenzione. La prima cosa da notare è che il placeholder non sostituisce la label.
Le specifiche del W3C dicono:
The placeholder attribute should not be used as an alternative to a label.
Per andare sul sicuro vi consiglio di considerare il suggerimento un più rigido divieto: l’attributo placeholder non deve essere un’alternativa alla label.
Altro punto riguarda il contrasto tra testo e colore di sfondo: quello di default non è sufficiente per superare i test di accessibilità. Al momento è possibile modificare il colore del placeholder su Chrome, Safari e Firefox 4 in questo modo:
input::-webkit-input-placeholder {color: #555;} /* Webkit browsers */
input:-moz-input-placeholder {color: #555;} /* Firefox 4 */
Il supporto non è ottimale, ma per fare delle verifiche potete fare riferimento a questi browser:
- Chrome, Safari e gli altri browser Webkit
- Firefox 4
- Opera (che però non consente ancora di modificare lo stile CSS dell’attributo)
Se volete testare personalmente il funzionamento dell’attributo placeholder potete accedere a questa pagina di test, ricordando di utilizzare uno dei browser citati:
Demo: Placeholder
Tom, come ci si comporta per la validazione se si vuole sviluppare un sito Internet con le specifiche di Html 5?
L’indicazione era nel senso di utilizzare XHTML 1.0 Strict e la versione di Css il più possibile datata per venire incontro agli utilizzatori di vecchie tecnologie con browsers non aggiornati. Forse adesso non è necessario tanto rigore.
Html 5 prevede poi più intestazioni h1 in una pagina: a questo non sono molto favorevole perchè nello sviluppo cerco sempre di rendere essenziale e di semplice navigazione la pagina.
Preferisco creare più livelli di navigazone e limitare l’impatto di numerosi link magari ripetuti.
Come dir che un blog creato con WordPress è più accessibile di una schermata di Facebook.
@Francesco il W3C ha attivato un servizio di validazione sperimentale per HTML5, l’ho usato per i miei progetti e fa il suo dovere, puoi provarlo già ora impostando la giusta doctype su “more options”: http://validator.w3.org/.
Per quanto riguarda le intestazioni, HTML5 consente l’uso di più h1 utilizzando il tag hgroup, ma il supporto è scarso e non c’è ancora una certezza assoluta su come debba essere interpretato: molto meglio continuare a usare le intestazioni come se fosse XHTML.
ciao, da quanto si legge nel testo della Legge Stanca (Requisito 1):”A) per tutti i siti di nuova realizzazione utilizzare almeno la versione 4.01 dell’HTML o preferibilmente la versione 1.0 dell’XHTML, in ogni caso con DTD (Document Type Definition – Definizione del Tipo di Documento) di tipo Strict;”
L’uso del doctype HTML5 (che tra l’altro è ancora undraft) per le validazioni di accessibilita pare non sia permesso. Questo tipo di limitazione impedisce di fatto l’uso dell’attributo placeholder in siti della PA validati come HTML4/XHTML1.0 Strict.
Oppure qualcosa è cambiato?
@giovanisp purtroppo non c’è niente di nuovo, la legge Stanca è ancora la normativa più recente in Italia. Vedo improbabile usare HTML5 in un sito di una PA.