Selector

Es un elemento de formulario que permite seleccionar una opción de entre un listado de varias. Cuando está plegado, muestra la opción actualmente seleccionada y cuando está expandido muestra una lista desplegable de opciones predefinidas.

Índice de apartados de esta página

• Accesibilidad
• Buenas prácticas
• Diferencias entre componentes

Accesibilidad #

Cómo funciona #

Elemento <select> con varios <option> u <optgroup> anidados.

En el caso del listbox, se construye con un <button> que contiene el parámetro aria-haspup=listbox. Además, los items del desplegable se encuentran en una lista <ul> con role=listox, y cada uno de ellos tiene el role=option. Sólo de esta manera los lectores de pantalla pueden interpretar la información correctamente.

Al tomar el foco, la persona que utiliza el teclado puede accionar el botón y navegar por los items de la lista con las flechas de dirección.

Basado en el patrón listbox de W3C

Más información sobre los inputs en el apartado accesibilidad de formularios.

Buenas prácticas #

• Usa este componente cuando tengas más de 5 opciones a listar. Para menos opciones recomendamos usar casillas de verificación o botones de radio.
• Siempre que sea posible, selecciona una opción por defecto. Si no hay alguna opción que pueda ser seleccionada o si es importante que la persona vea las opciones que se plantean, usa por defecto una opción null con un texto explicativo, por ejemplo seleccionar una opción… o Indicar tipo…. Por lo general, no mostrar el desplegable vacío.
• Ordena las opciones de manera que tenga sentido para el usuario. Por defecto se recomienda ordenarlas por orden alfabético, pero hay algunos campos que es más apropiado ordenarlos según la frecuencia de uso, tipo de acciones o cualquier otro criterio.
• Los items se pueden agrupar.

Diferencias entre componentes #

Existen varios componentes que tienen una apariencia y funcionamiento similar, aunque deben usarse uno u otro dependiendo de la finalidad y el contexto.

1. 1 Selector. Se usa específicamente en formularios, tienen una apariencia y tamaño alineado con los inputs.
2. 2 Desplegable. Es un componente que despliega un contenedor genérico en el que puede incluirse cualquier otro componente.
3. 3 Listado en caja. Se usa para hacer un listado de opciones.
4. 4 Menú de navegación. Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.
5. 5 Barra de menús. Genera cambios en otro sitio de la página, pero no navega a otro sitio diferente. Se pueden seleccionar múltiples opciones y agruparlas de distintas maneras. Por ejemplo para filtros.