L'attributo placeholder contiene una quantità sorprendente di problemi che impediscono di offrire ciò che promette. Chiariamo perché dovremmo valutare di smettere di usarlo.

1. Non dovremmo usare
i placeholder

3. L'attributo placeholder contiene una quantità
sorprendente di problemi che impediscono di offrire ciò
che promette.
Chiariamo perché dovremmo valutare di smettere di usarlo.

4. Fonte: https://www.smashingmagazine.com/2018/06/placeholder-attribute/

5. https://w3c.github.io/html/sec-forms.html#the-placeholder-attribute
“Il placeholder rappresenta un breve suggerimento
(una parola o una frase breve) inteso ad aiutare
l'utente con l'inserimento di dati quando un campo
input non ha valore. Un suggerimento potrebbe essere
un valore di esempio o una breve descrizione del
formato previsto. "

6. Problemi

7. Traduzione
• I browser con funzionalità di traduzione automatica
come Chrome ignorano gli attributi placeholder quando
viene avviata una richiesta di traduzione della pagina
corrente.
• Il contenuto del placeholder non verrà tradotto e
rimarrà come lingua originale.

8. Se questo contenuto non viene aggiornato insieme al resto
della pagina tradotta, esiste un'alta probabilità che una
persona che non ha familiarità con la lingua non sia in grado
di comprendere e utilizzare correttamente l’input.

10. Questa dovrebbe già essere una ragione sufficiente per
non usare i placeholder.

11. Molte persone impostano i loro dispositivi per utilizzare una
lingua che non è la lingua ufficiale del paese riportata
dall'indirizzo IP del proprio browser.

12. Interoperabilità
L'interoperabilità è la pratica di far scambiare sistemi diversi e
comprendere le informazioni.
È una parte fondamentale di Internet e della tecnologia
assistiva.

13. label + input
❤

14. Un input interoperabile viene creato associando ad
esso un elemento <label>

15. Il placeholder viene spesso utilizzato al posto di un
elemento label.
È un pratica che sembra aver guadagnato popolarità
nella comunità del design.

16. Indovinate chi fa così?

18. Se una label è associata a un input, facendo clic o toccando il
testo della label si mette a fuoco l'input.
Questo piccolo trucco fornisce un'area aggiuntiva per
interagire con l'input, il che può essere utile per le persone con
problemi di controllo motorio.
I placeholder che fungono da label, così come le label flottanti,
non possono farlo.

20. Cognizione

21. Quando una persona inserisce informazioni in un input, il suo
contenuto placeholder scomparirà.
L'unico modo per ripristinarlo è rimuovere le informazioni
inserite.
Il messaggio di guida viene rimosso non appena la persona
che tenta di compilare l'input interagisce con esso. No good!

24. Le persone meno tecnologicamente istruite potrebbero
non capire perché il contenuto della guida stia
scomparendo o come riportarlo indietro.

25. Alfabetizzazione
Digitale

26. Presumere che l'utente finale "semplicemente saprà"
è semplice arroganza.

27. Il placeholder può apparire come contenuto inserito.
Se si tratta di un campo obbligatorio, l'invio del form creerà
un'esperienza frustrante in cui potrebbe non capire quale sia
l'errore o come risolverlo.
Se non è un campo obbligatorio, il tuo form corre il rischio di non
riuscire a raccogliere informazioni secondarie potenzialmente
preziose.

28. Non è responsive

29. Non saprai mai dov'è quel codice.

30. Contrasto di colore

31. • Troppo chiaro: non passa i criteri di accessibilità e
rischia di non esser visto.
• Troppo scuro: può diventare abbastanza scuro da
essere interpretato come input inserito, anche da
persone più digitalmente alfabetizzate.

33. Modalità Contrasto
elevato

34. Il sistema operativo Windows contiene una funzione chiamata
Modalità contrasto elevato. Quando è attivato, assegna nuovi
colori agli elementi dell’interfaccia e utilizza un numero
limitato di opzioni di colore.

35. Facciamo il CSS per la Modalità Contrasto Elevato!

36. –Hugo Giraudel
“High contrast mode is not about design anymore but
strict usability. You should aim for highest
readability, not color aesthetics.”
https://twitter.com/HugoGiraudel/status/877123359418576896

37. Per ricapitolare, l’attributo placeholder:
• Non può essere tradotto automaticamente;
• Spesso viene utilizzato al posto di una label, bloccando la tecnologia
assistiva;
• Può nascondere informazioni importanti quando si inizia a digitare
nell’input;
• Può essere troppo chiaro per essere leggibile;
• Ha opzioni di styling CSS limitate;
• Può apparire come informazioni pre-riempite e essere saltato
sopra.

38. Soluzione?

40. Questo approccio:
• Comunica una gerarchia visiva e strutturale:
• A cosa serve questo input (label);
• Cose che devi sapere per usare l'input
correttamente;
• L’input stesso.
• Può essere tradotto;
• Non sembreranno informazioni pre-riempite;
• Può essere visto in condizioni di ipovisione;
• Non scomparirà quando il contenuto viene inserito
nell’input;
• Può includere markup semantico ed essere stilizzato
tramite CSS.

41. Ocio!

42. Se posto sotto l'input, il contenuto potrebbe essere
oscurato quando appare una tastiera sullo schermo.

43. • Le soluzioni front-end sfruttano speciali attributi di
input permettendo di utilizzare il sito o l'app con la
minore complicanza possibile.
• Un buon copywriting crea etichette che descrivano
chiaramente e sinteticamente lo scopo dell'input.
• Non facendo assunzioni sulle base di altre persone,
inclusa la tecnologia che usano, puoi fare la tua parte
per aiutare a prevenire l’esclusione. (“eh ma tanto lo
sanno usare!!1!1!”)

44. Prenditi un po’ di tempo per rivedere il tuo design, il tuo
codice e vedere cosa non regge.
Forse è il caso di rivedere come usiamo i placeholder.