Toolbar
Barre d’outils
Une barre d'outils est un groupe nommé de contrôles que les gens utilisent souvent. Tab entre dans le groupe une fois, puis les touches fléchées permettent de se déplacer à l'intérieur.
Un vrai exemple
Un éditeur de graphique place Annuler, Rétablir, Gras et alignement dans une barre d'outils « Formatage du graphique ». Tabulation entre une fois, les flèches se déplacent entre les contrôles disponibles, et Accueil va au premier. Annuler désactivé peut toujours être trouvé mais ne peut pas s'exécuter.
Parties principales
- 01Étiquette de la barre d'outils
- 02Contrôles groupés
- 03Focus itinérant
Utilisez-le lorsque
Utilisez-le pour trois contrôles liés ou plus que les gens utilisent souvent. Il est le plus utile lorsque moins de Tabulations font le travail plus rapidement.
Ne l'utilisez pas lorsque
Une rangée de contrôles n’est pas une barre d’outils à moins qu’elle n’ait également le comportement attendu des touches fléchées.
Nom utilisé dans le code
role=toolbar + accessible label + roving tabindex 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 Barre d’outils (Toolbar). User context: Un éditeur de graphique place Annuler, Rétablir, Gras et alignement dans une barre d'outils « Formatage du graphique ». Tabulation entre une fois, les flèches se déplacent entre les contrôles disponibles, et Accueil va au premier. Annuler désactivé peut toujours être trouvé mais ne peut pas s'exécuter. Recommended pattern: Barre d’outils (Toolbar). Why it fits: Utilisez-le pour trois contrôles liés ou plus que les gens utilisent souvent. Il est le plus utile lorsque moins de Tabulations font le travail plus rapidement. Do not use it when: Une rangée de contrôles n’est pas une barre d’outils à moins qu’elle n’ait également le comportement attendu des touches fléchées. 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 Barre d’outils (Toolbar) is used now. Definition: Une barre d'outils est un groupe nommé de contrôles que les gens utilisent souvent. Tab entre dans le groupe une fois, puis les touches fléchées permettent de se déplacer à l'intérieur. 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.