Text Field
Es una caja de texto que permite ingresar información libre.
Definición
Permite a los usuarios ingresar entradas de texto personalizadas. Por defecto, se utiliza para que el usuario agregue contenido breve de una sola línea, como direcciones de correo electrónico, números de teléfono, nombres, contraseñas, entre otros. Es común utilizarlos en formularios para recopilar información precisa y detallada del usuario.
Anatomía
1Label
2Value
3Field
4Texto de ayuda
Estados
Tamaños
1Small
2Medium
3Large
Cuándo usar
Se usa cuando un usuario necesita ingresar información única que no puede ser predicha con un conjunto preestablecido de opciones.
Cuándo no usar
Si un usuario solo puede ingresar una opción de una lista predefinida, evita usar este componente. En su lugar, considera utilizar un dropdown o un grupo de radio buttons.
Accesibilidad
Las Pautas de Accesibilidad al Contenido Web 2.1 y 2.2 ofrecen recomendaciones para mejorar la accesibilidad a personas con discapacidades visuales, auditivas, de movimiento, del habla, cognitivas y fotosensibilidad. Aunque las guías no cubren todas las necesidades, sí ayudan a que más personas puedan acceder a los servicios digitales.
Las guías de accesibilidad se dividen en cuatro principios: Perceptible, entendible, operable y robusto, consideramos abarcar únicamente los principios perceptible, entendible y operable, dejando fuera robusto ya que este no tiene un campo de acción en el diseño de los componentes UI.
La siguiente lista son recomendaciones de la WCAG que afectan al componente text field.
Perceptible
Color y Contraste SC. 1.4.3
La relación de contraste mínima recomendada para la accesibilidad es de 4.5:1 para el texto normal y de 3:1 para el texto grande (18 puntos o más).
Recursos:
Estado Focus SC 2.4.7
Su propósito es ayudar a las personas que navegan las páginas con el teclado, permitiéndoles determinar visualmente en qué lugar se encuentran.
Entendible
Label SC 3.3.2
Los usuarios deben identificar que datos deben agregar al text area por medio del label o las etiquetas.
Operable
Nombre, Rol, Valor SC 4.1.2
Asegúrese de que el text field tenga diseñado sus diferentes estados (enable, active, focus, error, warning, disabled, read-only).
Incluye etiqueta
Cada text field debe tener una etiqueta. Un text field sin etiqueta es ambiguo y no es accesible.
Texto de ayuda
Este brinda al usuario orientación y apoyo. Proporciona sugerencias, especificaciones de formato y requisitos, para facilitar el correcto uso del campo.
Requerido u opcional
En un formulario, marcar solo los campos requeridos u opcionales, según sea menos común. Si la mayoría de los campos son opcionales, marcar solo los requeridos con un asterisco o con etiquetas de «requerido». Si la mayoría son requeridos, etiquetar como «opcional» los campos que no lo son (No usar asteriscos para indicar campos opcionales).
Mensajes claros
Redactar los mensajes de error mostrando soluciones en lugar de solo indicar el problema. Los mensajes ambiguos pueden ser frustrantes para los usuarios.
Usa la descripción
Evita el uso del marcador de posición para incluir información esencial o instrucciones, ya que cuando se ingresa un valor, el texto desaparece y no es visible para el usuario.
Mensaje de error
El text area de ayuda también puede mostrar mensajes de error. Cuando se produce un error, el texto de ayuda se reemplaza por el texto de error y cuando se resuelve, la descripción del texto de ayuda vuelve a aparecer en el campo. El texto de ayuda debe explicar los requisitos o contexto adicional sobre cómo completarlo correctamente. El texto de error debe indicar cómo corregir el error o describir la interacción necesaria.
Usar sufijos
Los text field pueden contener texto de sufijo, como una unidad de medida o un dominio de correo electrónico.
