Comparaison comportementale
Tableau vs Vue arborescente
Différence décisive
Le Tableau dispose des lignes et colonnes plates lues dans l’ordre du document ; la Vue arborescente expose des nœuds imbriqués qu’on développe et replie.
Critères de choix, liens et sources
- TableauChoisis Tableau si l’utilisateur compare des valeurs entre lignes et colonnes sans structure parent-enfant.Ouvrir la fiche Tableau
- Vue arborescenteChoisis Vue arborescente si les éléments ont des parents et que l’utilisateur descend de niveau en 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 ?
Tableau
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.
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.
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
Le tableau se lit comme du contenu documentaire et ne gère pas le focus de ses cellules ; la grille de données est un widget composite parcouru avec les flèches, tandis que la vue arborescente organise des nœuds hiérarchiques.
Lequel convient à ton besoin ?
Tableau
Il faut comparer des valeurs entre lignes et colonnes
Vue arborescente
Il faut parcourir une vraie hiérarchie parent-enfant
Différence et sources
Le tableau se lit comme du contenu documentaire et ne gère pas le focus de ses cellules ; la grille de données est un widget composite parcouru avec les flèches, tandis que la vue arborescente organise des nœuds hiérarchiques.
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
Tableau
Il faut comparer des valeurs entre lignes et colonnes
Vue arborescente
Il faut parcourir une vraie hiérarchie parent-enfant
- Interactivité
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.
Vue arborescente
Focus géré, développement/réduction, sélection facultative et activation sont séparés et visuellement distinguables.
- Focus
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é.
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
Tableau
La lecture commence par la légende et les en-têtes ; les contrôles intégrés gardent leur activation normale.
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é
Tableau
Structure de document non modale, pas un widget composite.
Vue arborescente
Widget composite non modal pour une collection hiérarchique.
- Positionnement
Tableau
Dans le flux, avec sa légende et ses en-têtes de colonne ou de ligne alignés sur les données.
Vue arborescente
Une hiérarchie verticale dont l’indentation et l’état de déploiement exposent les relations parent-enfant.
- Interactivité
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.
Vue arborescente
Focus géré, développement/réduction, sélection facultative et activation sont séparés et visuellement distinguables.
- Focus
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é.
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
Tableau
Un tableau appartient au contenu du document et ne se ferme pas.
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
Tableau
table > (thead | tbody) > tr > (th | td)
Vue arborescente
tree > treeitem + group
- Cas d’usage
Tableau
Il faut comparer des valeurs entre lignes et colonnes
Vue arborescente
Il faut parcourir une vraie hiérarchie parent-enfant
- Comportement mobile
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.
Vue arborescente
Utiliser de grandes cibles de déploiement et envisager une navigation progressive si une forte indentation laisse trop peu de place.
| Dimension | TableauTable | Vue arborescenteTree view |
|---|---|---|
| Déclenchement | La lecture commence par la légende et les en-têtes ; les contrôles intégrés gardent leur activation normale. | Tab entre dans l’arborescence ; les flèches déplacent le focus et développent ou réduisent les éléments parents. |
| Modalité | Structure de document non modale, pas un widget composite. | Widget composite non modal pour une collection hiérarchique. |
| Positionnement | Dans le flux, avec sa légende et ses en-têtes de colonne ou de ligne alignés sur les données. | Une hiérarchie verticale dont l’indentation et l’état de déploiement exposent les relations parent-enfant. |
| Interactivité | 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 géré, développement/réduction, sélection facultative et activation sont séparés et visuellement distinguables. |
| Focus | 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é. | Utilise roving tabindex ou aria-activedescendant de façon cohérente et distingue le focus visible de aria-selected ou aria-checked. |
| Fermeture | Un tableau appartient au contenu du document et ne se ferme pas. | L’arborescence ne se ferme pas ; Gauche réduit un parent ouvert et Échap n’est pas une commande obligatoire. |
| Rôle accessible | table > (thead | tbody) > tr > (th | td) | tree > treeitem + group |
| Cas d’usage | Il faut comparer des valeurs entre lignes et colonnes | Il faut parcourir une vraie hiérarchie parent-enfant |
| Comportement mobile | 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. | Utiliser de grandes cibles de déploiement et envisager une navigation progressive si une forte indentation laisse trop peu de place. |