Diseña placeholders accesibles

Los placeholders cumplen una función directamente relacionada con las heurísticas de usabilidad de Nielsen. Concretamente con la número 6, reconocimiento en lugar de recuerdo. 

¿Qué es y para qué sirve el placeholder?

Para comprender realmente el propósito de un placeholder, comenzaremos con una breve definición. En los formularios, un placeholder, desde el punto de vista de las interfaces de usuario, se refiere a un texto de muestra o de ejemplo que se inserta dentro de un input o campo de entrada. Nos sirve de indicación y nos da pistas sobre qué tipo de información se espera que introduzcamos en ese campo. 

Veámoslo con un ejemplo práctico. Tenemos ante nosotros un campo de email y el placeholder muestra la siguiente frase: “Introduce tu dirección de correo electrónico”. 

Los placeholders están destinados a mejorar la usabilidad al orientar al usuario sobre cómo interactuar con los elementos de la interfaz, sin embargo no sustituyen a las etiquetas o a las instrucciones detalladas, todos estos componentes son complementarios y necesarios.

Principios de accesibilidad aplicados a placeholders

Estos principios se basan en las Directrices de Accesibilidad para el Contenido Web (WCAG), que proporcionan un marco de referencia para hacer el contenido web más accesible a personas con discapacidades. Los principios de accesibilidad más relevantes para los placeholders son los siguientes:

Perceptibilidad

• Contraste de color: los placeholders deben tener un contraste suficiente con respecto al color de fondo del campo de entrada que los haga fácilmente visibles para cualquier usuario, incluidos los usuarios con visión reducida. Para comprobar los contrastes, podemos utilizar herramientas como el Color Contrast Accessibility Validator de a11y.
• No usar un solo color: utilizaremos diferentes colores o tonos para indicar los estados del campo de entrada. De esta manera, conseguiremos distinguir visualmente un campo en estado deshabilitado, erróneo, on focus, activo o con placeholder. 

Operabilidad

• Claridad en la interacción: el texto del placeholder no debe interferir cuando el usuario complete el campo de entrada. Desaparecerá en el momento en el que comience a escribir.
• Facilidad de uso: el placeholder no debe confundir al usuario sobre si el campo ya está completado o no. Podemos evitar esta problemática escogiendo un color atenuado para el placeholder y más saturado para la respuesta dada por el usuario.

Comprensibilidad

• Uso de elementos complementarios: como decíamos antes, el placeholder no debería ir solo. Para una correcta usabilidad lo acompañaremos de etiquetas y de otro tipo de instrucciones que serán visibles en todo momento.

Robustez

• Compatibilidad con tecnologías de asistencia: hay que asegurar que los placeholders, así como los campos de formulario funcionen correctamente con tecnologías asistivas, como lectores de pantalla.

Problemas comunes de accesibilidad con placeholders

Uso del placeholder en solitario, sin etiquetas

El texto contenido por el placeholder desaparece una vez el usuario comienza a escribir en el campo de entrada. 

Si la única ayuda en la que puede apoyarse el usuario es el placeholder.. está perdido, ya que es facilísimo olvidar esa información una vez se desvanece.

No dejemos de lado el propio texto del placeholder, que debe ser conciso y descriptivo. Recordemos que el texto se cortará si su longitud es superior a la del campo de entrada que lo contiene. Usar un texto real como ejemplo de lo que se espera como entrada, en ocasiones puede resultar más confuso que útil.

Como diseñadores, es nuestro deber encontrar un equilibrio entre un buen diseño y un diseño accesible.

No todos los navegadores admiten el uso de placeholders

Aunque hoy en día la mayoría de los navegadores soportan placeholders, no todos lo hacen. Los usuarios de este tipo de navegadores verán un campo de entrada en blanco si no hemos acompañado este input con etiquetas o instrucciones adicionales, y será prácticamente imposible para el usuario completar este dato.

En la página web de Can I use… podemos conocer las versiones de los navegadores que soportan el atributo de los placeholders. 

Manejo de errores

Imagina la siguiente situación: estás rellenando un formulario, llegas al final de la página con todos los campos completados y haces clic en el botón <Enviar>, cuando salta un error en un campo concreto. 

Te diriges al campo en cuestión para corregir el error, pero este input no tiene etiqueta. No constan instrucciones adicionales que den algo de contexto, y el mensaje de error es algo tan genérico y poco descriptivo como “Dato erróneo”. 

Es posible que la única identificación que tengamos para localizar el mensaje de error sea una línea de color rojo.

Parece todo un reto lograr que un usuario pueda recuperarse de este error, y poder continuar con el envío de su formulario. Y que pueda hacer esto también forma parte de las heurísticas de Nielsen, con la número 5, “prevención de errores”.

Distinguir el estado del campo de entrada

En términos de contraste, el placeholder ha de tener un tono atenuado que se diferencie de forma clara del texto de entrada, que tendrá un color más saturado. Hay ocasiones en que esta diferencia de tono es tan sútil que genera confusión en el usuario.

¿Qué ocurre con el estado deshabilitado? Aquí podemos tener otra situación conflictiva, ya que si el placeholder usa un tono más atenuado que el estado activo, el color que indica un campo deshabilitado ha de ser todavía más ligero.

Otra práctica para conseguir que el placeholder se diferencia del texto introducido por el usuario, además de utilizar el color atenuado, es poner el texto del placeholder en cursiva.

Lectores de pantalla que no leen los placeholders

Existen lectores de pantalla que no “ven” el texto de los placeholders, para ellos un campo de entrada sin etiquetas ni instrucciones previas, es únicamente un rectángulo vacío. 

En la página de JS Bin se puede consultar la relación del navegador, el sistema operativo y lo que leen los lectores de pantalla.

Tamaño del área interactiva

El área interactiva permite a los usuarios realizar acciones, en el caso de un campo de entrada su área queda reducida al tamaño del propio input. Sin embargo, el uso de un campo sustentado por una etiqueta incrementa este tamaño, lo cual favorece a usuarios con problemas de motricidad fina.

Buenas prácticas en el uso de los placeholders

Uso adecuado del color y el contraste para asegurar una correcta visibilidad

Siguiendo los preceptos dados por la WCAG, a la hora de diseñar los estados propios de un campo de entrada tendremos en cuenta los siguientes puntos:

• El color para el estado deshabilitado no es necesario que pase ningún nivel de accesibilidad. Esto nos permite jugar con tonos claros, que permitan diferenciar este estado del texto de placeholder.
• El color usado para los textos del placeholder sí ha de cumplir el nivel mínimo de accesibilidad (AA) para el contraste de color, que es de 4,5:1. Por este motivo, hay que generar una diferencia suficiente entre el color usado para el texto del placeholder y el color del texto del campo informado.

Limitaciones del uso de placeholders como única fuente de información

La mayoría de los problemas que hemos detectado en la sección anterior se solucionan añadiendo una etiqueta a cada campo de entrada de un formulario. 

Si consideramos necesaria una breve explicación previa para poder completar el campo de forma satisfactoria, es otro recurso que también podemos utilizar.

Texto conciso y descriptivo

El placeholder debe ser un texto corto y explicativo, que informe del tipo de entrada esperada por parte del usuario. Si no tenemos una etiqueta que los respalde, no son recomendables los textos que simulan ejemplos de respuesta.

En conclusión, los placeholders son herramientas cruciales en el diseño de interfaces que, cuando se utilizan de manera efectiva, pueden mejorar significativamente la experiencia del usuario al guiarlo de forma intuitiva a través de los formularios. 

Sin embargo, es fundamental recordar que su uso debe complementarse con prácticas de diseño accesible y consideraciones claras de usabilidad. Al seguir los principios de accesibilidad, garantizar la legibilidad y claridad del texto, y manejar adecuadamente los errores, podemos asegurar que todos los usuarios, incluidos aquellos con discapacidades, puedan interactuar con nuestros productos digitales de manera más eficaz. 

---

Foto de portada de Clark Tibbs en Unsplash.