Comparaison comportementale
Grille de données vs Vue arborescente
Différence décisive
La Grille de données parcourt des lignes et des colonnes de cellules avec les flèches ; la Vue arborescente développe et replie des nœuds parent-enfant dans une hiérarchie.
Critères de choix, liens et sources
- Grille de donnéesChoisis Grille de données si les données sont tabulaires et que l’utilisateur édite ou parcourt beaucoup de cellules efficacement.Ouvrir la fiche Grille de données
- Vue arborescenteChoisis Vue arborescente si la structure est une vraie hiérarchie, comme des dossiers, que l’utilisateur développe niveau par niveau.Ouvrir la fiche Vue arborescente
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.
Vue arborescente
Mission
Vue arborescente
Entre une fois, développe Projets avec Droite, atteins Design, sélectionne-le puis reviens au parent et réduis-le.
É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
- Projets est focalisé et réduit ; les enfants masqués sont absents de la navigation.
- Cas limite
- Les feuilles n’exposent jamais aria-expanded et les enfants d’un parent réduit quittent la navigation et le focus.
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
Vue arborescente
Il faut parcourir une vraie hiérarchie parent-enfant
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
Vue arborescente
Il faut parcourir une vraie hiérarchie parent-enfant
- 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.
Vue arborescente
Focus géré, développement/réduction, sélection facultative et activation sont séparés et visuellement distinguables.
- 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.
Vue arborescente
Utilise roving tabindex ou aria-activedescendant de façon cohérente et distingue le focus visible de aria-selected ou aria-checked.
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.
Vue arborescente
Tab entre dans l’arborescence ; les flèches déplacent le focus et développent ou réduisent les éléments parents.
- Modalité
Grille de données
Widget composite non modal avec un modèle de focus interne.
Vue arborescente
Widget composite non modal pour une collection hiérarchique.
- Positionnement
Grille de données
Un espace tabulaire délimité avec des en-têtes persistants et une cellule active visible.
Vue arborescente
Une hiérarchie verticale dont l’indentation et l’état de déploiement exposent les relations parent-enfant.
- 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.
Vue arborescente
Focus géré, développement/réduction, sélection facultative et activation sont séparés et visuellement distinguables.
- 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.
Vue arborescente
Utilise roving tabindex ou aria-activedescendant de façon cohérente et distingue le focus visible de aria-selected ou aria-checked.
- Fermeture
Grille de données
La grille ne se ferme pas ; Échap quitte l’interaction de cellule et restaure la navigation de grille.
Vue arborescente
L’arborescence ne se ferme pas ; Gauche réduit un parent ouvert et Échap n’est pas une commande obligatoire.
- Rôle accessible
Grille de données
grid > row > (columnheader | rowheader | gridcell)
Vue arborescente
tree > treeitem + group
- Cas d’usage
Grille de données
Un grand jeu tabulaire exige une navigation clavier efficace
Vue arborescente
Il faut parcourir une vraie hiérarchie parent-enfant
- 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.
Vue arborescente
Utiliser de grandes cibles de déploiement et envisager une navigation progressive si une forte indentation laisse trop peu de place.
| Dimension | Grille de donnéesData grid | Vue arborescenteTree view |
|---|---|---|
| Déclenchement | Tab entre sur un point de focus géré ; les flèches déplacent ensuite le focus entre les cellules. | Tab entre dans l’arborescence ; les flèches déplacent le focus et développent ou réduisent les éléments parents. |
| Modalité | Widget composite non modal avec un modèle de focus interne. | Widget composite non modal pour une collection hiérarchique. |
| Positionnement | Un espace tabulaire délimité avec des en-têtes persistants et une cellule active visible. | Une hiérarchie verticale dont l’indentation et l’état de déploiement exposent les relations parent-enfant. |
| Interactivité | Focus itinérant, navigation par flèches, tri, sélection et édition sont explicites ; focus et sélection restent distinguables. | Focus géré, développement/réduction, sélection facultative et activation sont séparés et visuellement distinguables. |
| 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. | Utilise roving tabindex ou aria-activedescendant de façon cohérente et distingue le focus visible de aria-selected ou aria-checked. |
| Fermeture | La grille ne se ferme pas ; Échap quitte l’interaction de cellule et restaure la navigation de grille. | L’arborescence ne se ferme pas ; Gauche réduit un parent ouvert et Échap n’est pas une commande obligatoire. |
| Rôle accessible | grid > row > (columnheader | rowheader | gridcell) | tree > treeitem + group |
| Cas d’usage | Un grand jeu tabulaire exige une navigation clavier efficace | Il faut parcourir une vraie hiérarchie parent-enfant |
| Comportement mobile | Fournir un modèle tactile testé ou une alternative en liste/tableau lorsque l’usage bidimensionnel dense est impraticable. | Utiliser de grandes cibles de déploiement et envisager une navigation progressive si une forte indentation laisse trop peu de place. |