Accessibilité : Fondamentaux + Développer et coder des sites accessibles

- Découvrir l'accessibilité L'Initiative d'Accès au Web (Web Accessibility Initiative - WAI) Règles pour l'accessibilité des contenus Web (WCAG) Référentiels disponibles : RGAA, AccessiWeb,... Historique et évolution de la prise en compte de l’accessibilité Atelier : Comprendre les enjeux de l'accessibilité avec des vidéos montrant des utilisateurs en situation d'handicap utilisant le Web (expérience simulée de handicap visuel dans la navigation web , navigation sans la souris,...) - Apprendre le cadre légal Ressources et documents officiels Référentiel général d'accessibilité pour les administrations (RGAA) Référentiel AccessiWeb Découvrir les critères et les thématiques Déclaration de conformité Comprendre l’évolution du cadre légal et des normes Atelier : Étudier les référentiels d'accessibilité - Comprendre le contenu d'une déclaration de conformité. - Mettre en œuvre l'accessibilité web Appréhender l’ergonomie pour l’accessibilité : navigation, images, couleurs, textes,... Organisation de la démarche, gestion de projet Assistants vocaux et lecteurs d’écran Simulation de situations Comprendre l’importance des tests Découvrir des outils d’évaluation de l’accessibilité Atelier : Utiliser les assistants vocaux et la synthèse vocale, essayer la simulation d'handicap visuel - utilisation d’outils de diagnostics simple - Exemple de site avant et après mise en conformité pour l’accessibilité. - Intégrer l'accessibilité dans un projet digital Cycles de développement d’une application web : cascade, V, spirale L’accessibilité numérique dans un projet agile Rappels des règles d’accessibilités et des référentiels disponibles : RGAA, AccessiWeb,... Présentation de la déclaration de conformité Atelier : Analyse de la structure d’une déclaration de conformité. - Prendre en compte l’accessibilité dans la gestion de projets Présentation des actions à mener à chaque étape de conception d’un projet web. Étapes importantes pour un changement de méthodes Management d’équipe, choix des personnes Comment faire une planification Gérer les freins au changement et trouver les solutions Savoir évaluer le coût financier et humain Erreur à éviter Outils et ressources Mettre en place des documents de maintenance Atelier : Bonnes pratiques de prise en compte de l’accessibilité dans un projet digtal. - Rédiger des pages web accessibles Connaître les critères principaux et leur intérêt et impact : -Texte alternative, Liens -Menu, navigation -Structure et présentation, Couleurs Atelier : Rédaction d’un contenu accessible. - Tester les pages web Évaluer l’accessibilité d’une application web Génération de rapports de tests. Atelier : Présentation d’outils de tests et automatisation (pa11y, Selenium). - Comprendre les enjeux d’un contenu accessible Tirer profit de l’accessibilité Comprendre l’importance de l’accessibilité pour le SEO Présentation des évolutions à prendre en compte - Créer une maquette d’un site accessible Créer une bonne structure pour un site web Savoir adapter une présentation et faire le bon choix Déterminer l’ergonomie à mettre en place (UI, UX) Outils de wireframing Atelier : Conception d’une maquette de site web avec choix des couleurs (logiciel de création au choix du stagiaire) - Rédiger du contenu accessible Connaître les critères essentiels : textes alternatifs, liens, menus, navigation Critères de choix des couleurs Savoir adapter le code HTML et CSS, bonnes pratiques et changement d’habitude Structurer un formulaire, erreur à éviter Comprendre le fonctionnement de la synthèse vocale, quand et comment l’utiliser Gérer le contenu multimédia pour l’accessibilité Atelier : rédaction de contenu et analyse des problématiques courantes/solutions : Contact et web-chat, texte et audio. - Concevoir une maquette accessible Rappels des référentiels et recommandations (WCAG, RGAA) Conception graphique et ergonomique Maquette graphique et story-board Critères d’accessibilité HTML5 génériques Éléments obligatoires Atelier : Création d’une page d’accueil d’un site web et choix de la structure et de l’ergonomie. - Intégrer des pages en HTML/CSS et JavaScript Explication des points essentiels à prendre en compte : focus, DOM Order, tabindex, clavier, formulaire, contenu non visible, modal, tableau, Multimédia,… Mise en forme CSS et widgets JavaScript : - comment faire et vérifier le bon choix des Couleurs - quelle Police utiliser et comment définir la taille du texte - quel CAPTCHA utiliser ? - validation de formulaire - comment programmer et afficher la gestion des erreurs - frameworks disponibles Effectuer des requêtes asynchrones : - comment utiliser AJAX et faire les modifications adaptées - gestion du clavier et de ses évènements Atelier : Installation de l’environnement de développement et intégration de plusieurs pages d’un site web. - Passage de la certification (si prévue dans le financement)