Selector de fecha
El selector de fechas es un componente compuesto que combina un campo de entrada de texto con un widget de calendario. Permite a los usuarios escribir una fecha directamente o seleccionarla de un calendario visual. Esto proporciona flexibilidad tanto para los usuarios que conocen la fecha exacta como para aquellos que necesitan el contexto de un calendario para elegir una fecha.
El método principal para introducir fechas siempre debe ser la entrada de texto. El calendario es una mejora que proporciona una alternativa útil. Use este componente para recopilar fechas, como la fecha de nacimiento o la fecha de solicitud.
A continuación se muestra la presentación estándar del selector de fechas en InsureKidsNow.gov. Incluye una etiqueta, un campo de entrada de texto con formato claro y un ícono de calendario que activa o desactiva el widget de calendario interactivo.
Selector de fechas IKN
Filtrar por inicio del periodo de calificación estatal (mm/dd/aaaa)
Anatomía y especificaciones visuales
El selector de fechas se compone de dos partes principales: el campo de entrada de fecha y el widget de calendario.
- Etiqueta: Texto que describe claramente la fecha requerida.
- Campo de entrada de fecha: un campo de texto estándar donde los usuarios pueden escribir una fecha.
- Texto de sugerencia de formato: texto obligatorio debajo de la etiqueta que especifica el formato de fecha esperado (MM/DD/AAAA).
- Botón con ícono de calendario: Un botón con ícono situado a la derecha del campo de entrada. Al hacer clic en este botón, se muestra u oculta el widget de calendario.
- Widget de calendario: El calendario interactivo que aparece cuando el usuario hace clic en el ícono del calendario. Incluye:
- Controles de navegación: botones para pasar al mes anterior y al siguiente.
- Visualización de mes y año: El mes y el año que se muestran actualmente.
- Encabezados de los días de la semana: abreviaturas de una sola letra para los días de la semana (D, M, X, J, V, D).
- Cuadrícula de fechas: La cuadrícula interactiva muestra los días del mes actual. La fecha de hoy y la fecha seleccionada se distinguen visualmente.
El componente selector de fechas puede tener varios estados.
- Estado predeterminado: el campo de entrada de fecha tiene un borde gris sólido de 1 px y fondo blanco. El ícono del calendario es de color gris oscuro.
- Estado al pasar el cursor: cuando el usuario sitúa el cursor sobre el campo de fecha, su borde se oscurece. El botón con el ícono del calendario adquiere un fondo gris claro al pasar el cursor sobre él para indicar que se puede hacer clic en él.
- Estado de enfoque: debe aparecer un contorno azul sólido de 2 px (#0D76AD) alrededor del componente para proporcionar un indicador de enfoque claramente visible. Este contorno se aplica al campo de entrada cuando está enfocado. Cuando el widget de calendario está abierto, el enfoque se gestiona dentro del calendario y la fecha o el control actualmente enfocado tiene un contorno visible.
- Estado deshabilitado: el campo de entrada y el ícono del calendario aparecen atenuados y con opacidad reducida para indicar que no son interactivos.
- Estado de error: cuando se introduce una fecha inválida o incompleta, el borde del campo de entrada se vuelve rojo sólido de 2 px. Debe aparecer un mensaje de error descriptivo debajo del campo de entrada.
Guía de accesibilidad e implementación
Un selector de fechas presenta importantes desafíos de accesibilidad. Los siguientes detalles de implementación son obligatorios para garantizar que el componente sea utilizable por todos.
- Priorice la entrada de texto. El componente debe funcionar como un campo de entrada de texto estándar, incluso si JavaScript no se carga correctamente. Incluya siempre un texto de ayuda que indique explícitamente el formato MM/DD/AAAA requerido.
- Use etiquetas adecuadas. Cada selector de fecha debe tener un elemento < label > correspondiente. El atributo `for` de la etiqueta debe coincidir con el ID del campo < input >. Esta asociación programática es esencial para los usuarios de lectores de pantalla.
- Admite la navegación completa mediante teclado. Los usuarios deben poder completar la tarea de seleccionar una fecha usando únicamente el teclado.
- Campo de entrada de fecha: se aplican las interacciones de teclado estándar para un campo de entrada de texto.
- Botón con ícono de calendario: el botón debe poder seleccionarse mediante la tecla Tab. Al pulsar Intro o la barra espaciadora se abre y se cierra el widget de calendario.
- Navegación del widget de calendario:
- Escape: cierra el calendario. El enfoque vuelve al botón con el ícono del calendario.
- Teclas de flecha: navega día a día dentro de la cuadrícula del calendario.
- Intro o barra espaciadora: selecciona la fecha enfocada, actualiza el campo de entrada y cierra el calendario. El enfoque vuelve al campo de entrada.
- Re Pág / Av Pág: se desplaza al mes anterior o siguiente.
- Mayús + Re Pág / Av Pág: se desplaza al año anterior o siguiente.
- Inicio / Fin: cambia el enfoque al primer o último día de la semana actual.
- Implemente correctamente los atributos ARIA.Use los atributos ARIA (Aplicaciones de Internet Enriquecidas Accesibles) para comunicar el estado y el comportamiento del componente a las tecnologías de asistencia.
- El widget de calendario debe tener el rol "dialog" y una etiqueta aria que describa su propósito (por ejemplo, "Calendario").
- Use aria-hidden="true" para ocultar el widget del calendario a los lectores de pantalla cuando no esté visible.
- El botón con el ícono del calendario debe tener una etiqueta aria como "Abrir calendario" para anunciar su función.
- Proporcione mensajes de error claros y accesibles. Los errores de validación (por ejemplo, formato incorrecto, fecha inválida) deben comunicarse con claridad. El texto del mensaje de error debe estar vinculado programáticamente al campo de entrada mediante el atributo aria-describedby. No use únicamente el color para indicar un error.
Especificaciones adicionales
Para obtener información adicional sobre especificaciones, pautas, accesibilidad y uso, consulte el componente Selector de fechas en el sitio web de USWDS:
USWDS - Selector de fechas