Description
Objectif général de la formation : À l’issue de la formation, les participants seront capables de développer des interfaces web accessibles en intégrant les normes d’accessibilité numérique et les bonnes pratiques de conception. Modalité : Toutes les modalités (présentiel, classe virtuelle et hybride) sont possibles Lieu possible de réalisation : Locaux du bénéficiaire ou locaux d’Ascent Formation, en France métropolitaine et dans les DROM-COM Nombre maximal de participants : 20 Niveau SAME visé : Application (A) Compétences visées : Développer des interfaces web accessibles en respectant les normes (WCAG, RGAA). Intégrer des éléments interactifs compatibles avec les technologies d’assistance. Tester et valider l’accessibilité des développements réalisés.
Objectifs pédagogiques
- Maîtriser la sémantique HTML pour améliorer l’accessibilité.
- Intégrer des fonctionnalités interactives tout en respectant les critères d’accessibilité.
- Tester les interfaces avec des outils et technologies d’assistance pour garantir leur conformité.
Public concerné
Prérequis
Déroulé du programme
Jour 1 : Fondamentaux du développement web accessible (6 heures)
- Introduction aux normes d’accessibilité web (1 heure)
Présentation des référentiels WCAG 2.1 et RGAA.
Les bénéfices de l’accessibilité pour les utilisateurs et les entreprises.
Étude d’exemples d’interfaces accessibles/non accessibles.
- Structuration sémantique avec HTML5 (2 heures)
Utilisation des balises sémantiques : <header>, <nav>, <main>, <article>, etc.
Optimisation des formulaires : labels, champs obligatoires et messages d’erreurs accessibles.
Utilisation des attributs ARIA pour renforcer l’accessibilité.
Travaux pratiques : Structurer une page web avec une sémantique HTML5 respectueuse des normes.
- Accessibilité visuelle avec CSS (2 heures)
Contrôle des contrastes et des couleurs (ratios requis).
Styles adaptés pour les utilisateurs en situation de handicap (zoom, police lisible).
Gestion des focus visibles pour la navigation clavier.
Travaux pratiques : Mettre en œuvre une feuille de style accessible pour améliorer la lisibilité et la navigation.
- Introduction aux outils de tests automatisés (1 heure)
Découverte des outils de vérification : Lighthouse, Wave, RGAA outils en ligne.
Analyse des rapports et correction des erreurs courantes.
Jour 2 : Développement interactif et inclusif (6 heures)
- Composants interactifs accessibles avec JavaScript (2 heures)
Gestion des événements accessibles (clavier et souris).
Assurer l’interactivité avec ARIA (accordéons, modals, carrousels).
Travaux pratiques : Créer un composant interactif respectant les normes d’accessibilité.
- Accessibilité des médias intégrés (2 heures)
Ajouter des alternatives pour les médias : texte, sous-titres et descriptions audio.
Gestion des lecteurs vidéo/audio pour l’accessibilité.
Travaux pratiques : Intégrer un lecteur vidéo avec des sous-titres et une navigation clavier.
- Test et validation d’une interface web (2 heures)
Utilisation des technologies d’assistance : lecteurs d’écran (NVDA, VoiceOver).
Tests manuels avec des outils comme Wave et contrast checker.
Travaux pratiques : Tester une page web sur plusieurs outils et apporter les corrections nécessaires.
Jour 3 : Mise en pratique et synthèse (6 heures)
- Optimisation finale d’une interface accessible (2 heures)
Audit complet d’un projet existant et corrections des défauts.
Validation des critères WCAG 2.1 (AA).
- Déploiement et maintenance (1,5 heure)
Bonnes pratiques pour maintenir l’accessibilité dans un projet.
Documentation et tests continus.
- Projet final : réalisation d’une page web accessible (2,5 heures)
Réalisation d’une page web conforme aux normes d’accessibilité.
Présentation et validation collective avec les pairs.
Informations
Durée
3 jour(s)
18h
Sur demande