ARIA Grid
Grille ARIA
Une grille ARIA est un ensemble interactif de lignes et de cellules. Les touches fléchées déplacent le focus vers le haut, le bas, la gauche et la droite.
Un autre exemple
Un plan de sièges est une grille de 12 sur 20. Les flèches déplacent d'un siège, Home va au début de la rangée, et Enter choisit un siège. Les sièges indisponibles gardent leurs noms mais sont désactivés ; la page offre également une liste lorsque se déplacer par position est difficile.
Parties principales
- 01Conteneur en grille
- 02Lignes et cellules
- 03Modèle de concentration à deux axes
Utilisez-le lorsque
Utilisez-le lorsque la disposition en lignes et colonnes est importante. Un seul arrêt d'onglet géré peut être plus facile que des centaines de contrôles séparés.
Ne l'utilisez pas lorsque
N'ajoutez pas de rôles de grille à une table que les gens ne font que lire. Une grille nécessite des contrôles de clavier semblables à ceux d'une application.
Nom utilisé dans le code
role=grid/row/gridcell + roving tabindex or aria-activedescendant Avant d'expédier
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 Grille ARIA (ARIA Grid). User context: Un plan de sièges est une grille de 12 sur 20. Les flèches déplacent d'un siège, Home va au début de la rangée, et Enter choisit un siège. Les sièges indisponibles gardent leurs noms mais sont désactivés ; la page offre également une liste lorsque se déplacer par position est difficile. Recommended pattern: Grille ARIA (ARIA Grid). Why it fits: Utilisez-le lorsque la disposition en lignes et colonnes est importante. Un seul arrêt d'onglet géré peut être plus facile que des centaines de contrôles séparés. Do not use it when: N'ajoutez pas de rôles de grille à une table que les gens ne font que lire. Une grille nécessite des contrôles de clavier semblables à ceux d'une application. 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): C'est officiel pour cette source. D'autres plateformes ou équipes peuvent utiliser le terme d'une autre manière. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Grille ARIA (ARIA Grid) is used now. Definition: Une grille ARIA est un ensemble interactif de lignes et de cellules. Les touches fléchées déplacent le focus vers le haut, le bas, la gauche et la droite. 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.