- L’interface de notification toast n’est plus recommandée chez GitHub en raison de problèmes d’accessibilité
- Une structure de notification temporaire qui disparaît automatiquement risque d’enfreindre les critères d’accessibilité visuelle et fonctionnelle (WCAG)
- GitHub propose comme alternatives des méthodes de retour persistantes et accessibles, comme les bannières (banner) et les boîtes de dialogue (dialog)
- Les toasts présentent aussi de nombreux problèmes d’utilisabilité, notamment sur les grands écrans, en multitâche et avec le phénomène d’ignorance des bannières
- Pour l’accessibilité et une expérience utilisateur cohérente, l’usage des toasts est abandonné dans l’ensemble du design system Primer
Présentation des toasts
- Un toast est une petite fenêtre de notification rectangulaire qui apparaît brièvement dans un coin inférieur de l’écran, déclenchée par l’utilisateur ou par une action du système
- Comme il disparaît automatiquement après un certain temps, ce modèle comporte des problèmes d’accessibilité et d’utilisabilité intrinsèques
- Pour cette raison, GitHub recommande des modes de communication plus stables et plus accessibles
Alternatives aux toasts
- Il faut choisir l’interface adaptée selon l’objectif d’usage
- Pour une simple notification de succès, l’écran de résultat lui-même peut suffire sans retour séparé
- Pour les opérations complexes, l’état de réussite peut être communiqué via une bannière ou un affichage progressif du contenu
- En cas d’échec, fournir les informations d’erreur via une bannière ou une boîte de dialogue
- Pour la soumission de formulaire, une confirmation séparée n’est pas nécessaire pour un formulaire simple ; pour un formulaire complexe, utiliser une page de confirmation intermédiaire ou une bannière
- Pour la validation des saisies, utiliser les composants existants de validation de formulaire de Primer
- Pour les tâches de longue durée, communiquer l’état d’achèvement via une bannière ou via d’autres canaux comme l’e-mail ou les notifications push
- En cas de désynchronisation de session, indiquer la nécessité d’actualiser au moyen d’une boîte de dialogue ou d’une bannière
Considérations d’accessibilité (Accessibility Considerations)
- L’interface toast peut enfreindre plusieurs critères de succès WCAG
- 2.2.1 Timing Adjustable (A) : elle doit rester affichée jusqu’à ce que l’utilisateur la ferme lui-même
- 1.3.2 Meaningful Sequence (A) : une divergence entre l’ordre du DOM et l’ordre visuel peut créer de la confusion avec les technologies d’assistance
- 2.1.1 Keyboard (A) : les interactions dans le toast doivent pouvoir être contrôlées au clavier
- 4.1.3 Status Messages (AA) : sa présence doit être annoncée aux technologies d’assistance sans perturber l’utilisateur
- Autres critères susceptibles d’être enfreints
- 1.4.4 Resize text (AA) : le redimensionnement du texte peut masquer l’écran ou provoquer un débordement
- 1.4.10 Reflow (AA) : l’accessibilité au clavier doit être assurée en cas de défilement horizontal
- 2.4.3 Focus Order (A) : l’ordre de focus peut devenir confus
- 3.2.4 Consistent Identification (AA) : il faut préserver la cohérence du code
Considérations d’utilisabilité (Usability Considerations)
- Sur les grands écrans, les toasts peuvent se trouver hors du champ de vision et passer inaperçus
- Avec la disparition automatique, l’utilisateur risque de manquer le message s’il est occupé à autre chose
- Masquage de l’interface : le toast peut recouvrir des éléments importants comme les boutons du bas
- Les utilisateurs qui agrandissent l’écran peuvent ne pas voir les toasts situés hors de la zone agrandie
- Problème de mémoire de travail : la disparition automatique empêche de revérifier l’information
- Ignorance des bannières : un usage excessif pousse les utilisateurs à les ignorer
- Incohérence de position : la distance physique entre l’élément déclencheur et le toast peut brouiller leur relation
- Mauvais comportement de fermeture : la touche
Esc peut fermer en même temps d’autres éléments de l’interface
Ressources complémentaires
Aucun commentaire pour le moment.