El atributo placeholder de HTML pretende ser un texto breve que proporcione una pista sobre el valor esperado en un campo de entrada de formulario.
De primeras podría parecer que es buena idea utilizarlo, sin embargo, tiene algunos inconvenientes de usabilidad y de accesibilidad.
En ningún caso debe sustituir al label
Una práctica que no es raro ver en algunos formularios es la de utilizar atributos placeholder como sustitutos de los elementos label de HTML.
Puede parecer que es una solución estéticamente atractiva, pero tiene dos graves problemas de usabilidad y uno adicional de accesibilidad:
- Una vez que el usuario entra en el cuadro de texto para editarlo, el
placeholderdesaparece y, por tanto, no puede verificar que lo que está escribiendo es lo que debe escribir. - Puede ocurrir que el usuario confunda el
placeholdercon un campo que ya ha rellenado y lo pase por alto. - Por accesibilidad, todos los campos de un formulario deben ir correctamente identificados y asociados con un
label. Este problema de accesibilidad es también aplicable a loslabelde efecto flotante que a nivel de código se resuelvan medianteplaceholder.
Desaparece en el momento de escribir
Una vez que tenemos claro que no podemos prescindir de los label, podemos plantearnos utilizar los atributos placeholder para proporcionar información adicional o de ayuda al usuario para rellenar el campo.
El gran problema de usabilidad que tiene esta solución es que perdemos el texto de ayuda justo en el momento que más podemos necesitar consultarlo. Es decir, en el momento de rellenar el campo de formulario.
Es mucho mejor solución proporcionar esta ayuda siempre visible para el usuario.
Como recomendación adicional, es mejor facilitar este texto de ayuda por encima del campo de formulario en lugar de por debajo. Ya que, si está debajo, en dispositivos que utilicen un teclado virtual (como los móviles), puede quedar tapado.
Puede confundirse con un campo rellenado
En un formulario a medio rellenar, es mucho más fácil distinguir visualmente los campos que me faltan por rellenar si estos se encuentran en blanco que si llevan un placeholder. En este último caso, puedo confundirlos con campos que ya hayan sido rellenados.
Insuficiente contraste
El color que asignan por defecto los navegadores a los atributos placeholder no cumple con los requisitos de contraste establecidos en accesibilidad. De modo que resultan difíciles de leer para algunos usuarios.
