Accordéon Système de conception

Réduisez le contenu tout en facilitant la recherche et la navigation.

6 points de contrôle · 2 groupes de contenu

Contenu de la checklist

Progression de la vérification

Structure et signification

Comparer les informations et la présentation dans le contexte d'utilisation.

Utilisez des titres significatifsLe nom de la section doit décrire le contenu à l'intérieur et la zone de titre entière doit être facile à activer.Utilisez Tab puis Entrée ou Espace pour ouvrir et fermer chaque élément. Le titre doit indiquer le statut ouvert ; Le contenu masqué ne doit pas conserver les contrôles dans l’ordre des tabulations.Exemple Le titre de la question est un bouton avec un état ouvert ou fermé ; Une fois ouverte, la réponse se trouve juste en dessous et est toujours liée à cet élément.Indique s'il est ouvert ou ferméUtilisez des icônes et des statuts clairs, ne changez pas seulement la couleur du texte.La flèche ou la marque d'ouverture doit refléter l'état actuel ; L’effet de rotation ne doit pas être le seul signal lorsque le mouvement est désactivé.Prise en charge du clavierDonnez le focus au titre et ouvrez-le ou fermez-le avec Entrée ou Espace.Le titre doit être un contrôle réel avec un nom clair ; Tabulez dessus et Entrée ou Espace devrait ouvrir le même contenu que le clic de souris.

Interaction et convivialité

Essayez l'opération, modifiez le statut et continuez à travailler.

Lier le titre au contenuFournissez des relations d’état et de contrôle ouvertes pour que les outils de support puissent les comprendre correctement.Associez le bouton de titre à la zone de contenu et à l'état ouvert ; Les titres à plusieurs niveaux doivent toujours maintenir une hiérarchie de lecture raisonnable.Unifier les règles d’ouvertureDécidez si vous souhaitez ouvrir un ou plusieurs éléments et conservez ce comportement tout au long de la liste.Ne serait-ce que pour une seule échéance, préciser la règle de cohérence ; L'ouverture d'un nouvel élément ne doit pas entraîner la perte des données du formulaire dans l'élément qui vient d'être fermé.Maintenir une position de lecture stableLors de l’ouverture d’un contenu long, évitez de couvrir les titres et respectez le choix de réduire le mouvement.Le contenu d'ouverture est long afin qu'il puisse être défilé et lu sans que le titre ne disparaisse de la vue ; Ne créez pas une petite zone de défilement difficile à manœuvrer à l’intérieur.

La progression est enregistrée automatiquement dans ce navigateur.

GUIDE

Comment vérifier

Tester l'ouverture d'éléments avec le clavier

Utilisez Tab puis Entrée ou Espace pour ouvrir et fermer chaque élément. Le titre doit indiquer le statut ouvert ; Le contenu masqué ne doit pas conserver les contrôles dans l’ordre des tabulations.

EXEMPLES

Exemples d’utilisation

Ouvrez la réponse dans la liste FAQ

Le titre de la question est un bouton avec un état ouvert ou fermé ; Une fois ouverte, la réponse se trouve juste en dessous et est toujours liée à cet élément.

Accordéon Système de conception

Structure et signification

Interaction et convivialité

Comment vérifier

Tester l'ouverture d'éléments avec le clavier

Exemples d’utilisation

Ouvrez la réponse dans la liste FAQ

Marques d'ouverture et d'effondrement

Statuts des lignes

Comment diviser les éléments

Trouver une checklist

Aucune checklist trouvée

Accordéon Système de conception

Structure et signification

Interaction et convivialité

Comment vérifier

Tester l'ouverture d'éléments avec le clavier

Exemples d’utilisation

Ouvrez la réponse dans la liste FAQ

Variantes et cas d’usage

Marques d'ouverture et d'effondrement

Statuts des lignes

Comment diviser les éléments