Comparaison comportementale
Grille de données vs Tableau
Différence décisive
La Grille de données est un widget qui déplace le focus de cellule en cellule avec les flèches ; le Tableau est un contenu statique lu dans l’ordre du document.
Critères de choix, liens et sources
- Grille de donnéesChoisis Grille de données si l’utilisateur édite, sélectionne ou parcourt beaucoup de cellules au clavier.Ouvrir la fiche Grille de données
- TableauChoisis Tableau si les données se lisent et se comparent sans interaction dans les cellules.Ouvrir la fiche Tableau
Voir les neuf dimensionsVoir les sources
Structurer et explorer des données
Essayer
Faut-il lire des données tabulaires, interagir cellule par cellule ou développer une hiérarchie ?
Grille de données
Contexte commun aux essais
Un espace de travail présente un grand ensemble d’informations dont la structure et le modèle d’interaction déterminent comment les personnes le parcourent, le modifient ou le développent.
Grille de données
Mission
Grille de données
Entre dans la grille avec Tab, atteins État avec les flèches, modifie la valeur, reviens à la navigation et sélectionne la ligne.
Tab entre une fois · Flèches déplacent le focus · Entrée édite État · Maj+Espace sélectionne la ligne
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Une seule cellule est active et aucune ligne n’est sélectionnée.
- Cas limite
- Un éditeur de cellule consomme temporairement les flèches, puis Échap restaure la navigation de grille sur la même cellule.
Tableau
Mission
Tableau
Trie Nom par ordre croissant puis décroissant en confirmant que le focus et le contexte des en-têtes restent intacts.
| État | Responsable | |
|---|---|---|
| Beacon | À vérifier | Léo |
| Atlas | Prêt | Amina |
| Comet | Brouillon | Marta |
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- L’ordre source est affiché avec une légende et des en-têtes à portée correcte.
- Cas limite
- Les longues valeurs utilisent un débordement horizontal sans convertir les lignes en cartes inaccessibles ni casser les associations d’en-tête.
Ce que cet essai montre
La grille de données gère le déplacement du focus comme un widget composite ; le tableau laisse les cellules statiques dans l’ordre de lecture du document, tandis que la vue arborescente développe des relations parent-enfant plutôt que des lignes et colonnes.
Lequel convient à ton besoin ?
Grille de données
Un grand jeu tabulaire exige une navigation clavier efficace
Tableau
Il faut comparer des valeurs entre lignes et colonnes
Différence et sources
La grille de données gère le déplacement du focus comme un widget composite ; le tableau laisse les cellules statiques dans l’ordre de lecture du document, tandis que la vue arborescente développe des relations parent-enfant plutôt que des lignes et colonnes.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Tableau
Le conteneur tabulaire qui préserve les relations entre lignes et colonnes.
Décision
Question de famille
Faut-il lire des données tabulaires, interagir cellule par cellule ou développer une hiérarchie ?
Trois critères pour choisir
- Cas d’usage
Grille de données
Un grand jeu tabulaire exige une navigation clavier efficace
Tableau
Il faut comparer des valeurs entre lignes et colonnes
- Interactivité
Grille de données
Focus itinérant, navigation par flèches, tri, sélection et édition sont explicites ; focus et sélection restent distinguables.
Tableau
Les cellules se lisent dans la structure native du tableau ; chaque lien, bouton ou contrôle de tri est un arrêt de tabulation distinct.
- Focus
Grille de données
Utilise une seule stratégie cohérente de roving tabindex ou aria-activedescendant, garde la cellule active visible et ne place jamais toutes les cellules dans l’ordre de tabulation.
Tableau
Le focus reste sur le bouton de tri activé quand les lignes se réordonnent ; les cellules de lecture ne reçoivent jamais de focus de widget géré.
Neuf dimensions
- Déclenchement
Grille de données
Tab entre sur un point de focus géré ; les flèches déplacent ensuite le focus entre les cellules.
Tableau
La lecture commence par la légende et les en-têtes ; les contrôles intégrés gardent leur activation normale.
- Modalité
Grille de données
Widget composite non modal avec un modèle de focus interne.
Tableau
Structure de document non modale, pas un widget composite.
- Positionnement
Grille de données
Un espace tabulaire délimité avec des en-têtes persistants et une cellule active visible.
Tableau
Dans le flux, avec sa légende et ses en-têtes de colonne ou de ligne alignés sur les données.
- Interactivité
Grille de données
Focus itinérant, navigation par flèches, tri, sélection et édition sont explicites ; focus et sélection restent distinguables.
Tableau
Les cellules se lisent dans la structure native du tableau ; chaque lien, bouton ou contrôle de tri est un arrêt de tabulation distinct.
- Focus
Grille de données
Utilise une seule stratégie cohérente de roving tabindex ou aria-activedescendant, garde la cellule active visible et ne place jamais toutes les cellules dans l’ordre de tabulation.
Tableau
Le focus reste sur le bouton de tri activé quand les lignes se réordonnent ; les cellules de lecture ne reçoivent jamais de focus de widget géré.
- Fermeture
Grille de données
La grille ne se ferme pas ; Échap quitte l’interaction de cellule et restaure la navigation de grille.
Tableau
Un tableau appartient au contenu du document et ne se ferme pas.
- Rôle accessible
Grille de données
grid > row > (columnheader | rowheader | gridcell)
Tableau
table > (thead | tbody) > tr > (th | td)
- Cas d’usage
Grille de données
Un grand jeu tabulaire exige une navigation clavier efficace
Tableau
Il faut comparer des valeurs entre lignes et colonnes
- Comportement mobile
Grille de données
Fournir un modèle tactile testé ou une alternative en liste/tableau lorsque l’usage bidimensionnel dense est impraticable.
Tableau
Préserver les relations avec les en-têtes et proposer un débordement ou une mise en page alternative plutôt que de réordonner visuellement les cellules.
| Dimension | Grille de donnéesData grid | TableauTable |
|---|---|---|
| Déclenchement | Tab entre sur un point de focus géré ; les flèches déplacent ensuite le focus entre les cellules. | La lecture commence par la légende et les en-têtes ; les contrôles intégrés gardent leur activation normale. |
| Modalité | Widget composite non modal avec un modèle de focus interne. | Structure de document non modale, pas un widget composite. |
| Positionnement | Un espace tabulaire délimité avec des en-têtes persistants et une cellule active visible. | Dans le flux, avec sa légende et ses en-têtes de colonne ou de ligne alignés sur les données. |
| Interactivité | Focus itinérant, navigation par flèches, tri, sélection et édition sont explicites ; focus et sélection restent distinguables. | Les cellules se lisent dans la structure native du tableau ; chaque lien, bouton ou contrôle de tri est un arrêt de tabulation distinct. |
| Focus | Utilise une seule stratégie cohérente de roving tabindex ou aria-activedescendant, garde la cellule active visible et ne place jamais toutes les cellules dans l’ordre de tabulation. | Le focus reste sur le bouton de tri activé quand les lignes se réordonnent ; les cellules de lecture ne reçoivent jamais de focus de widget géré. |
| Fermeture | La grille ne se ferme pas ; Échap quitte l’interaction de cellule et restaure la navigation de grille. | Un tableau appartient au contenu du document et ne se ferme pas. |
| Rôle accessible | grid > row > (columnheader | rowheader | gridcell) | table > (thead | tbody) > tr > (th | td) |
| Cas d’usage | Un grand jeu tabulaire exige une navigation clavier efficace | Il faut comparer des valeurs entre lignes et colonnes |
| Comportement mobile | Fournir un modèle tactile testé ou une alternative en liste/tableau lorsque l’usage bidimensionnel dense est impraticable. | Préserver les relations avec les en-têtes et proposer un débordement ou une mise en page alternative plutôt que de réordonner visuellement les cellules. |