Comprendre le design, l’UX et l’accessibilité
Le design organise ce que la personne perçoit et peut faire. Examinez les contenus, les états des composants et les modes d’interaction ensemble. Une maquette utile précise aussi ce qui arrive quand le texte grandit, qu’une erreur survient ou qu’une image ne porte aucune information.
81 notions à explorer avec leurs définitions et conseils pratiques.
Rechercher dans tout le glossaire
Un parcours de lecture
1. Orienter la lecture
La hiérarchie visuelle aide à reconnaître l’objet de la page, les informations décisives et l’action. Les titres et liens doivent garder ce sens dans la structure du document.
2. Décrire les interactions
Un composant possède un état et une fonction. Décrivez libellé, aide et erreur afin que l’intégration puisse conserver le comportement au clavier et sur petit écran.
3. Observer l’expérience
Essayez une tâche concrète avec texte agrandi et contenus réalistes. Les mesures de performance apportent des observations complémentaires ; elles ne remplacent pas la vérification du parcours.
Les distinctions utiles
Texte alternatif / Accessible name
Le texte alternatif correspond au rôle d’une image. Le nom accessible permet d’identifier un contrôle ou un élément auprès des technologies d’assistance. Une image utilisée comme contrôle doit annoncer l’action utile.
Wireframe / Mockup
Un wireframe explore la structure et la place des contenus ; une maquette détaille davantage leur présentation. Ni l’un ni l’autre ne prouve que l’interface fonctionne dans le navigateur.
Utiliser le vocabulaire pour décider
Situation
Un formulaire fonctionne à la souris mais son erreur n’est pas compréhensible au clavier.
Avant de décider
Reliez le message au champ concerné, vérifiez le nom du contrôle et l’ordre de parcours. Le problème ne se corrige pas uniquement par une couleur plus visible.
Un contrôle concret
Refaites l’erreur avec une saisie volontairement invalide et vérifiez comment la personne retrouve le champ à corriger.
Toutes les notions du thème
Les liens ouvrent la définition complète sur sa page alphabétique. Les sigles et synonymes restent recherchables depuis le glossaire général.
- Above the fold
- Accessibility conformance report
- Accessibility tree
- Accessibilité numérique
- Accessible description
- Accessible name
- ARIA
- ARIA live region
- Art direction
- Breakpoint
- Candidature mobile
- Carbon-aware design
- Composant d’interface
- Confirmation de soumission
- Cumulative Layout Shift
- Dark pattern
- Description de graphique
- Drag and drop
- Entrée accessible
- Erreur de champ
- European Accessibility Act
- Favicon
- FID
- Figma
- Fil d’Ariane
- Filtre actif
- First Contentful Paint
- Focal point
- font-display
- Formulaire Web
- Glyphe
- Hamburger menu
- Hero section
- Icône
- Image optimization
- Information architecture
- Interaction to Next Paint
- Jeton de design
- JPEG
- Kebab menu
- Largest Contentful Paint
- Lien de téléchargement
- Lighthouse
- Media query
- Menu mobile
- Miniature vidéo
- Mobile-first
- Mockup
- Navigation
- Navigation principale
- Ordre de lecture
- Ordre de tri
- Overlay
- Page speed
- Pagination
- PDF balisé
- Performance budget
- Pixel
- Police de secours
- Portrait professionnel
- Responsive design
- Résumé des erreurs
- Sous-titres synchronisés
- Tableau de comparaison
- Template
- Texte alternatif
- Typography
- UI
- Usability
- User flow
- UX
- Vector image
- Viewport
- Visual hierarchy
- WCAG
- Web design
- WebP
- Wireframe
- z-index
- État de composant
- État sans résultat
Questions fréquentes
Un bon score prouve-t-il l’accessibilité ?
Non. Un outil automatique couvre certains défauts, dans un contexte donné. Complétez les observations par des contrôles de contenu, de clavier et des parcours représentatifs.
Faut-il décrire toutes les images ?
Choisissez l’alternative selon leur fonction. Une décoration n’a pas la même alternative qu’une image informative, un graphique ou un bouton. Gardez l’information essentielle accessible dans le contexte de la page.
Documents de référence primaires
Ces documents expliquent les notions techniques. Les parcours de lecture et exemples de décision sont des méthodes éditoriales à adapter à votre projet.