He organizado la información sobre la marca “obligatorio” en las interfaces de usuario (formularios) extranjeras, junto con los documentos de directrices de UI.
📌 Principales marcas obligatorias y mejores prácticas
Uso del asterisco (*)
- Es el más extendido en general, y se añade un “*” a los campos obligatorios.
- Sin embargo, es obligatorio incluir una explicación al principio del formulario, como “* indica un campo obligatorio” (Nielsen Norman Group, Universidad Estatal de California, Northridge).
- También hay ejemplos de enfatizarlo usando colores (texto rojo, etc.).
Especificar “Required” o “(required)” en la etiqueta
- Al añadir la palabra “Required” en la etiqueta, se puede indicar claramente a los lectores de pantalla, mejorando la accesibilidad (Deque).
Uso combinado de atributos ARIA y el atributo
requiredde HTML5- Además de la visualización, se puede transmitir de forma programática que es obligatorio mediante
aria-required="true"o<input required>(Deque).
- Además de la visualización, se puede transmitir de forma programática que es obligatorio mediante
Especificar campos opcionales usando “(optional)”
- También hay una manera de especificar los campos opcionales como “(optional)” en lugar de los campos obligatorios, lo cual es efectivo cuando hay una mezcla de ambos.
- Sin embargo, Nielsen-Norman señala que “es más fácil juzgar si también se indica lo obligatorio” (TPGi).
✅ Resumen de documentos de directrices de UI
| Proveedor | Contenido |
|---|---|
| NN/g: Marking Required Fields in Forms | Se recomienda la combinación de asterisco + texto explicativo, y mostrar solo lo opcional se considera poco amigable (Nielsen Norman Group). |
| Deque (Anatomy of Accessible Forms) | ・Se usa la palabra “Required” o una imagen dentro de la etiqueta. ・Se afirma que la sugerencia solo por color es insuficiente. |
| W3C Techniques (H90) | Hay ejemplos que incluyen un asterisco o “(required)” en la etiqueta, y definen su significado al principio del formulario. |
| TPGi (Doing what’s required) | Considerando la accesibilidad, la combinación óptima es asterisco + atributo ARIA + inserción de texto en la etiqueta. |
| Guía de UX de Formularios Contensis | Un marcado consistente (* o (optional)) se resume brevemente como importante. |
✅ Enfoques recomendados para la implementación
Agregar texto explicativo al principio del formulario:
Fields marked with * are required. (o “All fields are required” en general, “unless marked optional” si hay opcionales)
Asignación de etiquetas:
- Se escribe como
First Name *oEmail (required).
- Se escribe como
Atributos ARIA y HTML5:
1 2<label for="email">Email <abbr title="required">*</abbr></label> <input id="email" required aria-required="true">No dependa solo del color: Responda tanto de forma visual como programática.
🔗 Enlaces de referencia (Documentos de directrices de UI)
- NN/g: Marking Required Fields in Forms (Universidad Estatal de California, Northridge, Nielsen Norman Group, Deque)
- Deque: Anatomy of Accessible Forms (Deque)
- W3C Techniques: H90 Indicating required form controls (W3C)
- TPGi: Indicating mandatory fields accessibly (TPGi)
- Contensis: UX Forms Guidelines (Contensis)
Si es necesario, también podemos proporcionar ejemplos específicos de código HTML/CSS, o plantillas de diseño de componentes de UI para Sketch o Figma. ¡No dude en consultarnos!