Introduction au développement accessible
Concevez des sites web accessibles
Présentation du cours
Dans ce cours, les participants apprennent à identifier et corriger les erreurs d’accessibilité dans les sites internet, mais aussi à concevoir leurs composants accessibles by design.
Cette formation prendra le parti de ne pas uniquement se concentrer sur la partie développement accessible, mais aussi de prendre part à une session d’entraînement sur l’audit de site.
Les participants acquerront des connaissances sur la réglementation en vigueur pour ensuite les mettre en œuvre sur un site de leur choix ou un site choisi par le formateur.
Objectifs pédagogiques
- Connaître le sujet de l’accessibilité, son intérêt et son historique
- Utiliser les différents référentiels disponibles (WCAG / RGAA) pour leurs intérêts respectifs
- Savoir identifier les principales erreurs d’accessibilité et comment y remédier
- Appliquer au quotidien les bonnes pratiques pour rendre son site utilisable par tous
- Concevoir des sites accessibles avec l’aide du RGAA
- Auditer un site à l’aide de l’outil ARA, l’outil d’audit du gouvernement
Public cible
Développeur.se.s d’applications web souhaitant créer des sites web accessibles conformément aux RGAA.
Prérequis
- Avoir des bases solides en HTML, CSS et JavaScript
- Compétence de base avec les outils de ligne de commande et npm
Programme
Jour 1
Module 1 : Introduction aux concepts liés à l’accessibilité
- Comprendre les enjeux de l’accessibilité
- Définition de l’accessibilité et sa vocation universelle
- Historique législatif de l’accessibilité dans le monde et en France
- Apprendre à utiliser les outils courants (lecteur d’écran, masquage accessible …)
- Présentation des référentiels
- Courte explication d’ARIA
- Passage en revue des erreurs les plus fréquentes
Atelier :
- Questionnaire sur les connaissances des concepts liés à l’accessibilité
Module 2 : Les images
- Passage en revue des principaux critères du RGAA sur les images avec exemples et contre-exemples
- Présentation des différents types d’images
- Savoir identifier les images non accessibles
- Apprendre comment les rendre accessibles (notamment via le WCAG decision tree)
Atelier :
- Corriger les erreurs d’accessibilité sur les images du site
Module 3 : Les Liens
- Passage en revue des principaux critères du RGAA sur les liens avec exemples et contre exemples
- Présentation des différents types de liens
- Savoir identifier les liens non accessibles
- Apprendre comment les rendre accessibles
Atelier :
- Corriger les erreurs d’accessibilités sur les liens du site
Module 4 : Les Couleurs
- Passage en revue des principaux critères du RGAA sur les liens avec exemples et contre-exemples
- Présentation des outils aidant à choisir de bons contrastes pour votre application
- Présentation des différents types de liens
- Apprendre comment les rendre accessibles
Atelier :
- Corriger les erreurs d’accessibilité sur les liens du site
Module 5 : Les Focus
- Passage en revue des principaux critères du RGAA sur le focus et la navigation aux travers des différents thématiques abordées dans le référentiel
- Exemple par différents cas pratiques possible
- Apprendre à guider la navigation de l’utilisateur de manière fluide
- Présentation du tabindex et du trap focus
Atelier :
- Corriger les erreurs de focus du site
Module 6 : La structuration de l’information
- Passage en revue des principaux critères du RGAA sur la structuration de l’information
- Montrer comment bien construire un HTML ainsi que les pièges à éviter
Atelier :
- Correction du HTML du site vitrine
Module 7 : Synthèse Jour 1
- Reprise de ce qui à été vu lors du jour 1
- Questions/Réponses
Jour 2
Module 8 : Les Formulaires
- Passage en revue des principaux critères du RGAA sur les formulaires
- Montrer comment bien construire un formulaire HTML
- Regrouper les informations avec des labels pertinents
Atelier :
- Rendre le formulaire du site accessible
Module 9 : Les Tableaux
- Passage en revue des principaux critères du RGAA sur les tableaux
- Exemple et méthodes de corrections
Ateliers :
- Rendre les tableaux du site accessible
Module 10 : Pour aller plus loin
- Présentation d’outils de CI
- Partages des connaissances et bonnes pratiques
- Conclusion de la partie Développement accessible
Ateliers :
- Questionnaire
Module 11 : L’audit
- Présentation des concepts clefs pour auditer un site
- Présentation de ARA, l’outil d’audit du gouvernement
- Exemple et méthodes de corrections
Atelier
- Audit
Module 6 : Synthèse Jour 2
- Reprise de ce qui à été vu lors du jour 2
- Questions/Réponses