Le bouton déclenche une action. Le lien change de destination. Leur apparence ne doit pas masquer cette différence. Dans un groupe, la priorité visuelle reflète la conséquence et la fréquence de l’action.
Démonstration locale · aucune donnée envoyée.
- Primaire : une action de progression par panneau ou dialogue. Secondaire : alternative de même contexte. Tertiaire : action moins prioritaire.
- Le libellé décrit le résultat : « Enregistrer », « Télécharger le guide », « Fermer ».
- Une action destructive est nommée et contextualisée ; la couleur seule n’indique pas sa portée.
- Pendant une opération, garder le libellé compréhensible et empêcher les doubles déclenchements.
- Un bouton uniquement iconographique possède un nom accessible et une cible de 44 px.
Un champ a un libellé visible, une valeur, une indication facultative et un message d’erreur lorsqu’il est invalide. Le placeholder donne un exemple ; il ne remplace pas le libellé.
- Associer le libellé au champ et l’erreur avec
aria-describedby. - Annoncer une validation après action ou changement pertinent, sans interrompre chaque frappe.
- Conserver les valeurs après une erreur et expliquer comment la corriger.
- Ne pas désactiver un bouton sans indiquer la condition manquante.
- Le champ actif est distingué par un focus visible, pas seulement par une ombre.
Un onglet change de panneau au même niveau. Un filtre réduit un ensemble. Un sélecteur segmenté choisit une valeur exclusive. Employer la bonne sémantique évite les comportements imprévisibles au clavier.
Le curseur agit réellement sur cet aplat, pas sur une photo.
- Un groupe exclusif comporte un seul élément sélectionné.
- Un filtre actif reste lisible dans les deux thèmes, avec un mot ou un indicateur de sélection.
- Les longues listes de filtres peuvent défiler localement ; leur début et leur fin restent repérables.
- Les curseurs affichent leur valeur réelle, leurs bornes et un nom. Une intensité à 20 % ne doit pas afficher la même valeur pour un autre paramètre.
Une notification confirme une action terminée. Une erreur qui demande une décision reste à proximité de son contexte. Un dialogue modal ne s’ouvre que lorsqu’une interaction doit réellement suspendre le reste de la page.
- Annoncer les retours avec une région de statut appropriée, sans déplacer systématiquement le focus.
- Un dialogue possède un titre, une fermeture identifiable et une gestion de focus.
- À la fermeture, restaurer le focus sur le déclencheur.
- Une notification importante ne disparaît pas avant d’avoir pu être lue ; elle peut être fermée manuellement.
- Ne pas inventer un succès : « demandé », « en cours », « enregistré » et « vérifié » sont des états distincts.
La carte regroupe une unité d’information. Le tableau compare des valeurs. Éviter de transformer chaque cellule en carte ou chaque phrase en panneau arrondi.
- Une table possède un titre ou une légende, des en-têtes et des unités visibles.
- Un tri indique la colonne et le sens ; les chiffres restent alignés et tabulaires.
- L’état vide explique l’absence et propose une action pertinente.
- L’état « non mesuré » reste distinct de « opérationnel » et d’une valeur zéro.
- Une donnée datée expose son horodatage ; une mesure ancienne est présentée comme ancienne.
Les proportions des vignettes sont maîtrisées et leur contenu n’est pas déformé. Une prévisualisation peut recadrer ; un affichage de contrôle doit permettre de voir le fichier entier.
La lumière, au calme.
Une forme abstraite pour montrer les marges, la légende et le rapport d’image.
Illustration de composition · aucun lecteur audio simulé.- Définir le ratio de la vignette et la règle de recadrage ; conserver le ratio original au téléchargement.
- Rendre explicites le type, le poids, le nom et l’état d’un fichier.
- Les contrôles de lecture vidéo ne reposent pas uniquement sur le survol.
- Distinguer l’ouverture, la sélection et le menu contextuel d’une vignette.
- Une sélection multiple expose le nombre d’éléments et la portée des actions.