Sobre la marca obligatoria en los formularios de entrada

Mon, 14 Jul 2025 13:47:51 +0900

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 required de 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).
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 * o Email (required).

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!

UX on kenji.blog

Sobre la marca obligatoria en los formularios de entrada

📌 Principales marcas obligatorias y mejores prácticas

✅ Resumen de documentos de directrices de UI

✅ Enfoques recomendados para la implementación

🔗 Enlaces de referencia (Documentos de directrices de UI)