Formation Figma & accessibilité numérique : concevoir des interfaces conformes au RGAA.

Programme de formation Figma & accessibilité numérique : concevoir des interfaces conformes au RGAA.

Fondamentaux de l’accessibilité numérique

– Accessibilité numérique : définition, enjeux et bénéfices pour l’ensemble des utilisateurs
– Situations de handicap : panorama des différents types de handicaps et de leurs besoins
– Technologies d’assistance : lecteurs d’écran et outils utilisés par les personnes en situation de handicap
– Principes du WCAG : les 4 fondements du référentiel international d’accessibilité du W3C
– Cadre réglementaire français : obligations légales et périmètre du RGAA
– Accessibilité et expérience utilisateur : dépasser la contrainte légale pour améliorer l’UX

**Exemples d’activités pratiques :**

– Mise en situation sur un produit web avec le lecteur d’écran NVDA

Concevoir une interface perceptible

– Principe de perceptibilité : rendre l’information disponible quels que soient les sens mobilisés
– Images accessibles : distinction porteuse d’information / décorative, nom, description et alternative textuelle
– Annotations d’accessibilité : documenter les intentions d’accessibilité directement dans Figma
– Perception des couleurs : prise en compte du daltonisme dans les choix graphiques
– Transmission de l’information : ne pas reposer uniquement sur la couleur, la forme, la taille ou la position
– Contrastes de couleurs : lisibilité des textes, des éléments graphiques porteurs d’information et des liens
– Vérification des contrastes dans Figma : outil intégré et plugins dédiés
– Modes de variables : construire un thème accessible et déclinable
– Tableaux accessibles : structurer des tableaux exploitables avec Figma

**Exemples d’activités pratiques :**

– Utilisation du plugin Stark pour traiter la thématique Images du RGAA
– Évaluation des contrastes sur une page web

Concevoir une interface opérable

– Principe d’opérabilité : garantir que tous les éléments d’interface sont manipulables
– Navigation au clavier : gestion du focus et de l’ordre de tabulation
– Variant Focused : matérialiser le focus sur les composants interactifs dans Figma
– Ordre de tabulation : définition et vérification avec le plugin Stark
– Cibles interactives : surface et dimensions minimales des éléments cliquables
– Responsive design : indépendance vis-à-vis de l’orientation de l’écran
– Animations : bonnes pratiques pour préserver le confort et la sécurité des utilisateurs
– Formulaires accessibles : étiquettes de champ, aide à la saisie, nom accessible, étiquette et champ accolés, regroupement de champs
– Contrôles de saisie : champs obligatoires et gestion des erreurs

**Exemples d’activités pratiques :**

– Conception d’un mur de cartes ou d’un carrousel accessible
– Création d’un composant de champ de saisie accessible

Concevoir une interface compréhensible

– Principe de prévisibilité et de compréhensibilité : rendre l’interface prévisible et lisible
– Pièges d’accessibilité : identifier des UI peu compatibles avec les lecteurs d’écran
– Architecture des contenus : hiérarchie visuelle et styles de texte
– Boutons et liens : liens explicites, liens texte et image, liens d’accès rapide / d’évitement, nom accessible et nom visible
– Annotation des contenus textuels : changement de langue, liens internes, listes, citations
– Éléments multimédia : transcription textuelle des vidéos, sous-titres et lecteurs vidéo accessibles
– Systèmes de navigation : menu, plan du site et moteur de recherche
– Structure d’une page HTML5 dans Figma : header, footer et contenu principal
– Navigation dans la page : menu principal, fil d’Ariane et onglets

**Exemples d’activités pratiques :**

– Réalisation d’un template de page pour une page d’accueil