Selector (Menú desplegable)
El componente de selección, a menudo llamado menú desplegable, permite a los usuarios elegir una opción de una lista predefinida. Es un elemento de formulario esencial que proporciona una forma compacta de presentar numerosas opciones sin saturar la página.
Cuando se implementa correctamente, un componente de selección es una forma sencilla y accesible de gestionar la entrada de datos del usuario. Use la opción "seleccionar" cuando tenga entre siete y quince opciones. Si dispone de menos de siete opciones, considere la posibilidad de emplear botones de opción, ya que hacen que todas las opciones sean visibles de inmediato. Con más de 15 opciones, la selección puede resultar difícil de navegar. Considere usar un campo de autocompletar en su lugar.
Por qué es importante el componente de selección:
- Ahorra espacio: muestra las opciones solo cuando son necesarias, manteniendo los formularios compactos.
- Organiza las opciones: presenta múltiples opciones de forma clara y estructurada.
- Reduce errores: limita la entrada a opciones válidas predefinidas.
- Simplifica la selección: los usuarios eligen de una lista en lugar de escribir texto libre
IKN Select
Anatomía y especificaciones visuales
El componente seleccionado consta de varias partes clave que trabajan juntas para crear una experiencia intuitiva.
- Etiqueta: texto que describe claramente la información que el usuario debe proporcionar.
- Seleccionar entrada: el campo principal que muestra la opción seleccionada o el texto de marcador de posición. Este es el elemento interactivo principal.
- Ícono desplegable: una flecha que apunta hacia abajo en el lado derecho del campo de entrada. Indica visualmente que el elemento es interactivo y mostrará una lista de opciones.
- Texto de ayuda (opcional): texto complementario que se coloca debajo de la etiqueta para proporcionar contexto o instrucciones adicionales.
- Lista de opciones: el menú de opciones que aparece cuando un usuario hace clic en el campo de selección.
Un estilo coherente garantiza que determinados componentes sean previsibles y fáciles de usar en todo el sitio web.
- Estado predeterminado: el componente tiene un borde gris estable de un pixel. El fondo es blanco y el texto es gris oscuro para facilitar la lectura. El ícono desplegable también es gris oscuro.
- Estado al pasar el cursor: cuando un usuario pasa el cursor del ratón sobre el campo de selección, el color del borde se oscurece ligeramente para indicar que el elemento es interactivo.
- Estado de enfoque: para garantizar la accesibilidad, el campo de selección debe tener un estado de enfoque claramente visible. Cuando un usuario accede al componente mediante el teclado o hace clic en él, aparece un contorno azul sólido de 2 px (#0D76AD) alrededor de todo el componente. Este contorno es un indicador visual fundamental para los usuarios de teclado y lectores de pantalla.
- Estado desactivado: un componente de selección desactivado no es interactivo. Tiene un fondo y un borde de color gris claro. El texto y el ícono presentan un menor contraste de color para indicar su estado inactivo. Los usuarios no pueden seleccionar ni interactuar con un componente de selección desactivado.
- Estado de error: si el selector forma parte de un formulario y la entrada es inválida, entra en estado de error. El borde se vuelve rojo sólido de 2 px. Aparece un mensaje de error debajo del campo que explica el error y cómo corregirlo.
Guía de accesibilidad e implementación
Es obligatorio cumplir con las mejores prácticas de accesibilidad. Las siguientes pautas garantizan que el componente seleccionado sea utilizable por todos, incluidas las personas que dependen de tecnologías de asistencia.
- Use siempre una etiqueta. Cada elemento de selección debe tener un elemento < label > correspondiente. El atributo para de la etiqueta debe coincidir con el identificador id del elemento < select >. Este vínculo programático es esencial para los usuarios de lectores de pantalla, quienes necesitan conocer la finalidad del control del formulario.
- Proporcione instrucciones claras. Si se requiere una selección o si existen reglas de formato específicas, use texto de sugerencia para proporcionar instrucciones claras. No use texto de marcador de posición dentro del campo de selección como etiqueta, ya que desaparece una vez que el usuario realiza una selección. Si se necesita un marcador de posición, use una primera opción deshabilitada como <option value="" disabled selected>Seleccione una< /option >.
- Admite la navegación mediante teclado. Los usuarios deben poder utilizar el componente de selección únicamente con el teclado.
- Tabulador: cambie el enfoque hacia el componente seleccionado.
- Barra espaciadora o Intro: abra o cierre la lista de opciones.
- Teclas de flecha arriba y abajo: navegue por las opciones disponibles cuando la lista esté abierta.
- Escribir una letra: salte a la primera opción de la lista que comienza con esa letra.
- Salir: cierre la lista de opciones sin cambiar la selección actual.
- Comunique los errores con claridad. Cuando se produzca un error de validación, no se fíe únicamente del color para indicar el problema. El estado de error debe incluir un mensaje descriptivo vinculado al campo del selector mediante el atributo aria-describedby. Esto garantiza que los lectores de pantalla anuncien el mensaje de error cuando el usuario se enfoque en el campo inválido.
Especificaciones adicionales
Para obtener información adicional sobre especificaciones, colores, estilos, pautas, accesibilidad y uso, consulte el componente Select en el sitio web de USWDS:
USWDS - Selector