Treegrid y otros patrones avanzados
Aborde con confianza los widgets compuestos más complejos.
Treegrid y otros patrones avanzados es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Entrar en el modo difícil
Algunos widgets son realmente complejos: los treegrids, las cuadrículas y los árboles combinan filas, columnas y nodos expandibles al mismo tiempo. 🌳
Qué es un treegrid
Un treegrid es una cuadrícula cuyas filas pueden expandirse y contraerse como un árbol, ideal para un explorador de archivos con carpetas anidadas y columnas de detalles.
Los roles principales
Use role="treegrid" en el contenedor, role="row" en cada fila y role="gridcell" en las celdas. La estructura imita la de una cuadrícula real.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Filas expandibles
Una fila que puede abrirse lleva aria-expanded, con true cuando se muestran sus elementos secundarios y false cuando está contraída. Las filas hoja lo omiten por completo.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Profundidad con aria-level
Use aria-level para indicar a los usuarios a qué profundidad se encuentra una fila en el árbol. El nivel 1 es el superior y cada fila anidada aumenta uno.
Movimiento en dos ejes
En un treegrid, las teclas de flecha se mueven en ambos ejes: Arriba y Abajo cambian de fila, mientras que Izquierda y Derecha se desplazan entre celdas o contraen y expanden.
Teclas para expandir y contraer
En una fila principal, Flecha derecha la expande y Flecha izquierda la contrae. Esto coincide con el funcionamiento tradicional de los árboles de archivos de escritorio.
Un solo punto de tabulación
Todo el treegrid es un único punto de tabulación. Roving tabindex mueve el foco real entre las celdas para que el widget se comporte como un solo control compuesto.
Establezca el tamaño y la posición
Para filas dinámicas o virtualizadas, utilice aria-setsize y aria-posinset para que los usuarios escuchen la posición y el total, aunque no se representen todas las filas.
Inicio, Fin y saltos
Las cuadrículas avanzadas añaden Inicio y Fin para saltar a la primera o la última celda, y Ctrl junto con Inicio o Fin para ir directamente al principio o al final de los datos.
Consulte el APG
Estos patrones no admiten errores, así que siga de cerca el ejemplo del APG y haga pruebas con un lector de pantalla real. Los pequeños errores pueden romper todo el componente.
Comprobación rápida
Está creando un explorador de archivos cuyas filas se abren para mostrar filas anidadas dentro de una cuadrícula. ¿Qué rol corresponde?
Recapitulación
Un treegrid combina una cuadrícula y un árbol: filas con aria-expanded y aria-level, teclas de flecha en dos ejes y un único punto de tabulación mediante tabindex itinerante. Apóyese en el APG y haga pruebas exhaustivas. ✅
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Treegrid y otros patrones avanzados» es gratis?
Sí — el texto completo de «Treegrid y otros patrones avanzados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Treegrid y otros patrones avanzados»?
Aborde con confianza los widgets compuestos más complejos. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Treegrid y otros patrones avanzados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Lectura de la APG: patrones, teclas y ejemplos
- Combobox y autocompletado bien implementados
- Menu, Menubar y el botón de menú
- Treegrid y otros patrones avanzados