^New

Formation Développement de site Web accessible Développement Web et accessible - Niveau avancé

Programme de votre formation

1. #

   M2I START AVANT VOTRE FORMATION

   Contextualisation du projet de formation et prise en compte des besoins de chacun

   • Positionnement initial de l’apprenant par rapport aux objectifs
   • Définition des priorités et des objectifs personnels de l’apprenant
   • Vidéos de mise en situation
   • Accès au Chat interactif myM2i pour interagir avec les membres de son groupe
   
2. #

   M2I LIVE VOTRE FORMATION ANIMÉE PAR NOTRE EXPERT ^¹

   Programme

   Jour 1 - Matin

   Rappels sur l'accessibilité numérique

   • Définition, notion de "situation de handicap"
   • Chiffres clés autour du handicap
   • Les typologies de déficience :
   • Visuelles
   • Auditives
   • Motrices
   • Cognitives
   • Technologies d'assistance

   Exemple de travaux pratiques (à titre indicatif)

   • Exemples d'utilisateurs confrontés à des sites non accessibles

   Les référentiels d'accessibilité en vigueur

   • Définitions, usages, et limites
   • WCAG (Web Content Accessibility Guidelines)
   • RGAA (Référentiel Général d'Amélioration de l'Accessibilité)
   • RAAM (Référentiel d'Accessibilité des Applications Mobiles)
   • Limite des référentiels : différence entre conformité (technique) et accessibilité
   • Rappel du cadre légal

   L'audit RGAA

   • Méthodologie
   • Définition d'un échantillon d'audit
   • Comprendre et utiliser la grille d'audit RGAA
   • Priorisation
   • Déclaration d'accessibilité

   Jour 1 - Après-midi

   Les outils de tests

   • Principe des tests d'accessibilité, limite des outils automatiques
   • Les outils intégrés dans les navigateurs
   • Les outils automatiques
   • Les outils manuels
   • Test au clavier
   • Assistant RGAA : pour identifier les alternatives des images, pour redéfinir les propriétés d'espacement des textes
   • ANDI : pour identifier les alternatives des images, les noms accessibles, les contrastes de couleurs, la visibilité du focus
   • HeadingsMap : pour définir la structure du document (niveaux de titres)

   Exemples de travaux pratiques (à titre indicatif)

   • Présentation et utilisation de quelques outils intégrés dans les navigateurs (recherche de problèmes de contrastes, ordre de tabulation...)
   • Présentation et utilisation de quelques outils automatiques (type Tanaguru Webext RGAA 4)
   • Apprendre à utiliser les outils manuels avec des cas pratiques sur des sites web
   • Cas pratique : tester la navigation au lecteur d'écran

   Concept WAI-ARIA

   • Rappel HTML
   • WAI-ARIA : rôle, statut et propriété
   • Exemples d'utilisation

   Les thématiques du RGAA 4

   • Images
   • Les différents types d'images, et les bonnes pratiques associées (images décoratives, images informatives simples, images complexes, images de texte, images légendées)
   • Les techniques d'implémentation en fonction du type d'image
   • Cadres en ligne : rappels rapides
   • Couleurs : rappels rapides
   • Multimédia : rappels rapides

   Exemple de travaux pratiques (à titre indicatif)

   • Identification des différents types d'image, et détermination des alternatives pertinentes

   Jour 2 - Matin

   Les thématiques du RGAA 4 - Suite

   • Tableaux
   • Tableaux de données : bonnes pratiques associées, techniques d'implémentation
   • Tableaux de présentation
   • Bonnes pratiques associées
   • Techniques d'implémentation
   • Liens
   • Les différents types de liens
   • Notion de lien explicite; notion de contexte de lien
   • Liens vides
   • Scripts
   • Compatibilité avec les technologies d'assistance
   • Pistes de conception
   • Nom
   • Rôle
   • Valeur
   • Paramétrage et changements d'état
   • Design patterns
   • Les alternatives aux scripts

   Exemples de travaux pratiques (à titre indicatif)

   • Analyse de tableaux présents sur des pages web; propositions de corrections
   • Rendre un tableau accessible via le code
   • Analyse de pages Web, et vérification du caractère explicite des liens qu'elles contiennent
   • Analyse de pages Web, et détection des liens vides qu'elles contiennent
   • Sur la base de la documentation fournie, développer un système d'onglets accessible
   • Analyse de scripts présents dans des pages Web, et détermination d'alternatives possibles

   Jour 2 - Après-midi

   Les thématiques du RGAA 4 - Suite

   • Scripts - Suite
   • La gestion des interactions clavier / souris / tactile
   • Les changements de contexte
   • Les messages d'alerte et de statut
   • Eléments obligatoires
   • Validité du code
   • Gestion des changements de langue et de direction de lecture
   • Titres de page
   • Utilisation des éléments de présentation
   • Structuration de l'information
   • Titres de section
   • Structures de document
   • Les différents types de listes
   • Citations

   Exemples de travaux pratiques (à titre indicatif)

   • Implémenter des messages d'alerte accessible et compatible avec les technologies d'assistance
   • Analyse de pages web, et vérification de la pertinence du titre. Propositions de correction
   • Analyse de différentes pages Web, et détermination des titres de section pertinents
   • Analyse de différentes pages Web, et détermination des structure de document pertinentes
   • Analyse de différentes pages Web, et détermination des types de listes pertinents

   Jour 3 - Matin

   Les thématiques du RGAA 4 - Suite

   • Présentation de l'information
   • Utilisation des styles
   • Caractères agrandis
   • Gestion des couleurs
   • Contenu caché
   • Réorganisation du contenu
   • Propriétés d'espacement des textes
   • Gestion des contenus additionnels
   • Formulaires
   • Etiquettes de champs : présence, pertinence, cohérence
   • Position des étiquettes
   • Regroupement de champs
   • Regroupement des options de listes
   • Boutons de formulaire
   • Contrôles de saisie, champs obligatoires, champs en erreur
   • Reprise des données
   • Attributs pour le remplissage automatique
   • Navigation
   • Mécanismes de navigation interne
   • Liens d'évitement
   • Ordre de tabulation
   • Piège au clavier
   • Raccourcis clavier
   • Gestion du clavier pour les contenus additionnels
   • Consultation
   • Limites de temps
   • Orientations
   • Gestes complexes
   • Annulation des interactions
   • Interactions par le mouvement

   Exemples de travaux pratiques (à titre indicatif)

   • Détermination des techniques de masquage appropriées pour différentes situations
   • Analyse de différents formulaires Web, et vérification de la pertinence des attributs pour le remplissage automatique
   • Implémenter les liens d'évitement sur un site Web

   Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

   
3. #

   M2I BOOST APRÈS VOTRE FORMATION

   Réactivation et consolidation des acquis en situation de travail

   • 30 jours d’accompagnement personnalisé sur myM2i inclus ^²
   • Ressources Boosters (Abonnement au M2i’Mag Soft Skills, formations offertes, invitations aux conférences d’actualité…)
   

1. ^¹ Les actions et les outils présentés dans ce programme le sont à titre indicatif et peuvent faire l’objet d'adaptation selon les niveaux, prérequis et besoins des apprenants. Les compétences clés de ce programme sont traitées à raison d'une compétence par demi-journée de formation.
2. ^² Sur myM2i, pendant 30 jours post-fin de formation, les apprenants disposent d’une messagerie sécurisée pour échanger, dans la limite de 4 sollicitations, avec leur formateur.