lunes, 12 de diciembre de 2016

Ejemplo de que usar el placeholder es una mala idea

El siguiente formulario se encuentra en Mejor con lentillas:


El aviso "* Campos obligatorios" al final del formulario en vez de al principio no es muy adecuado, pero ese no es el problema más grave de este formulario.

Para indicar el contenido de cada campo del formulario se emplea el atributo placeholder en vez de una etiqueta con


Lo podemos comprobar viendo el código fuente:


¿Por qué es una mala idea usar el placeholder? Imaginemos que me equivoco y en el campo para el teléfono escribo el DNI y en el campo para el DNI escribo el teléfono. El resultado será el siguiente:


¿Qué está pasando? ¿Cuál es mi error? Si no me he fijado bien al rellenar el formulario, no recordaré qué debo introducir en cada campo. Para saberlo deberé ¡¡borrar lo he escrito!!

Además, desde un punto de vista de la accesibilidad web, algunos lectores de pantalla no reconocen el atributo placeholder, así que los usuarios que dependen de su uso para poder navegar por la Web no podrán rellenar este formulario de forma autónoma.

7 comentarios:

Otto Pereda dijo...

Buen día Sergio.

He leído con detenimiento e interés este post y me llama la atención lo que comentas. Estoy totalmente de acuerdo en cuanto al aviso de los campos obligatorios, debiese aparecer al comienzo.

Con reapecto al uso del atributo placeholder, creo que vale la pena hacer un par de comentarios, pues su uso en sì mismo no es incorrecto, el problema que veo es que el formulario no tiene etiquetas, eso me parece más grave. Entiendo tu comentario acerca del uso de placeholder a modo de etiqueta de cada campo, eso me parece un error de diseño y de arquitectura web.

Considero un error terrible que los campos del formulario no tengan etiquetas, por lo que ya expones acerca de navegaciòn utilizando lectores de pantalla, estoy completamente de acuerdo. Si el diseñador no quería que se vieran las etiquetas bien podría, usando CSS, haberlas escondido, pero ponerlas, que no es una buena práctia, especialmente si pensamos en usuarios con baja visión, para quienes el placeholder resulta difícil de leer en ocasiones dado que tiene un color gris que no siempre hace suficiente contraste con el fondo del campo de formulario.

Agradezco la publicación de este post, muestra concretamente uno de los errores que he viste en más de una ocasión, pero había tenido oportunidad de comentarlo.

Saludos.

Sergio Luján Mora dijo...

Hola Otto.

Gracias por el comentario. Como bien dices, su uso no es incorrecto, igual que tampoco es incorrecto el uso del atributo title, para algo existen. El problema de ambos es que no se saben usar y este ejemplo lo demuestra: no sólo plantea problemas de accesibilidad, también plantea graves problemas de usabilidad.

Un saludo.

MartínBalda dijo...

Sergio, por favor recuerda que algunos de tus lectores somos ciegos, y este post no es accesible para nosotros. Saludos!

Sergio Luján Mora dijo...

Hola Martín.
Asumo la culpa de que no sea accesible, lo único que te puedo decir es que me faltan manos.
Un saludo.

MartínBalda dijo...

Sergio: No esperaba esa respuesta... Además los usuarios que usamos lector de pantalla podríamos haber dado nuestra opinión.
Hay que predicar con el ejemplo!
Saludos.

Sergio Luján Mora dijo...

Te voy a dar otra respuesta que te ve a gustar menos, que es muy políticamente incorrecta, que un community manager nunca escribiría, pero que es la verdad... Esto es como el que llega el lunes a su trabajo lleno de arañazos y sus compañeros le preguntan qué le ha pasado. "El gato es mío y hago con él lo que yo quiero".

Este tema ya lo he discutido en este blog en el pasado, incluso puede ser que fuese contigo. Lo que escribo aquí lo hago en mi tiempo libre y gratis, igual que muchas otras cosas que hago por la accesibilidad web como dar conferencias y cursos gratis. Estaría muy bien que todo lo que hiciese fuese completamente accesible, pero como te he dicho en mi primera respuesta, me faltan manos.

María Dolores García Fernández dijo...

Hola Sergio,
tu comentario me hizo recordar el posteo de Cultua Informática, que habla sobre u programdor que solo usa wordpress:
https://www.facebook.com/CulturaInformatica/photos/pb.120463681478699.-2207520000.1481809339./597387153786347/?type=3&theater
Saludos y seguimos en contacto, Dolores.