Árbol

Este elemento ofrece la posibilidad de seleccionar una o varias opciones organizadas jerárquicamente.

Índice de apartados de esta página

• Anatomía
• Tamaños
• Accesibilidad

Anatomía #

• Etiqueta: Indica la información a incluir en el campo, siempre tiene que estar. En caso de que se quiera ocultar deberá tener la clase sr-only, para que sea legible por los lectores de pantalla.
• Pista: Es opcional y es una descripción del dato a introducir.
• Buscador: Cuando el listado sea muy extenso, se puede incluir una barra de búsqueda que ayude a la parsona a encontrar los items que busca.
• Error: En caso de que el campo requiera validación o sea obligatorio, puede aparecer un error indicando el problema con el dato introducido.
• Item: Pueden ser botones de selección múltiple o selección única, con todas las variantes que ellos conllevan. Los items que albergan subitems contienen un botón en forma de más + que los muestra al ser pulsado. Una vez desplegado este botón toma la apariencia de un menos - pudiendo ser accionado de nuevo para ocultar los subitems.

Tamaños #

Tamaño base #

Utilizar por defecto para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.

Tamaño pequeño #

Se recomienda su uso cuando el elemento estándar sea demasiado grande para el espacio donde debe de encajar.

Accesibilidad #

Cómo funciona #

El componente está rodeado con un <fieldset>. Se trata de una lista <ul> con role=tree que contiene otras listas anidadas. Cada lista anidada tiene un role=group y cada item tiene un role=treeitem, un <input> y un <label>. El aria-expanded de cada item padre indica al lector de pantalla si está contraído o no.

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

Basado en el patrón tree de W3C

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