ARIA Grid
Cuadrícula ARIA
Una cuadrícula ARIA es un conjunto interactivo de filas y celdas. Las teclas de flecha mueven el foco hacia arriba, abajo, izquierda y derecha.
Otro ejemplo
Un mapa de asientos es una cuadrícula de 12 por 20. Las flechas mueven un asiento, Home va al inicio de la fila y Enter selecciona un asiento. Los asientos no disponibles conservan sus nombres pero están deshabilitados; la página también ofrece una lista cuando moverse por posición es difícil.
Partes principales
- 01contenedor de cuadrícula
- 02Filas y celdas
- 03Modelo de enfoque de dos ejes
Úsalo cuando
Úselo cuando el diseño de filas y columnas sea importante. Un solo punto de tabulación gestionado puede ser más fácil que cientos de controles separados.
No lo uses cuando
No agregues roles de cuadrícula a una tabla que la gente solo lee. Una cuadrícula requiere controles de teclado tipo aplicación.
Nombre usado en código
role=grid/row/gridcell + roving tabindex or aria-activedescendant Antes de lanzarlo
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Cuadrícula ARIA (ARIA Grid). User context: Un mapa de asientos es una cuadrícula de 12 por 20. Las flechas mueven un asiento, Home va al inicio de la fila y Enter selecciona un asiento. Los asientos no disponibles conservan sus nombres pero están deshabilitados; la página también ofrece una lista cuando moverse por posición es difícil. Recommended pattern: Cuadrícula ARIA (ARIA Grid). Why it fits: Úselo cuando el diseño de filas y columnas sea importante. Un solo punto de tabulación gestionado puede ser más fácil que cientos de controles separados. Do not use it when: No agregues roles de cuadrícula a una tabla que la gente solo lee. Una cuadrícula requiere controles de teclado tipo aplicación. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Cuadrícula ARIA (ARIA Grid) is used now. Definition: Una cuadrícula ARIA es un conjunto interactivo de filas y celdas. Las teclas de flecha mueven el foco hacia arriba, abajo, izquierda y derecha. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.