Á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.