Gestión Del Blog on kenji.blog

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!

Extensión de navegador de actualización automática de páginas web (Complemento de Edge)

Sat, 06 Apr 2024 15:36:54 +0900

Les presento “Actualización automática de pestañas”, una extensión de navegador de Edge para actualizar páginas web automáticamente.

Instalación de la actualización automática de pestañas

Actualización automática de pestañas

Acceda al sitio web anterior y haga clic en Instalar.

Haga clic en Agregar extensión.

Cómo usar

Una vez completada la instalación, se agregará un icono en la parte superior derecha de Edge.

Abra la página web que desea actualizar automáticamente y haga clic en el icono para comenzar la actualización automática.

La parte en el recuadro verde es el intervalo de actualización automática. Seleccione el momento para la actualización automática.

Para detener la actualización automática, haga clic en el icono y luego en Stop reloading this tab.

Plantilla de página web genial (html5up)

Mon, 17 Apr 2023 00:26:55 +0900

Plantilla de página web genial

html5up https://html5up.net/

Dejo esta nota porque pensé que me gustaría usarla.

He empezado un blog

Fri, 02 Sep 2022 07:23:00 +0900

He empezado un blog

Algo como fuegos artificiales, el código está aquí

Hola a todos. Por alguna razón, he decidido empezar un blog.

No tengo un objetivo grandioso como “¡Quiero publicar esto!”, simplemente pensé que sería bueno tener un lugar donde escribir sobre tecnología, la vida cotidiana o cualquier cosa que me venga a la mente tal como es.

No voy a poner demasiado esfuerzo, solo planeo hacerlo como si fuera un bloc de notas.

Lo estoy haciendo con algo llamado Hugo

Este blog está hecho con un generador de sitios estáticos llamado “Hugo”. Encontré un tema que me gustó y decidí usarlo. (Es un secreto que me tomó como 2 horas elegir el tema)

También planeo escribir notas casuales sobre código y herramientas que me llamen la atención.

Hablando de Komeda por la mañana

Por cierto, esta mañana me desperté un poco temprano y fui a Komeda Coffee. Salí a las 8:30 y caminé mientras respiraba el aire de la mañana.

Pedí un Mini Shiro-Noir y un set de desayuno A con Café au Lait. Creo que costó alrededor de 800 yenes. (No me acuerdo)

Los cafés por la mañana son geniales. Siento que si tengo un tiempo para relajarme antes del trabajo, de alguna manera el día irá bien.

Así que, escribiré de manera relajada a partir de ahora. Planeo mezclar temas técnicos y cosas cotidianas.

¡Encantado de conocerlos!