Cours Accessibilité numérique

Comprendre pour qui et pourquoi rendre le web accessible

Facile 00:04:16

Identifier les situations de handicap face au web

Facile 00:02:25

Voir l'accessibilité invisible : aria-label et lecteurs d'écran

Facile 00:03:42

Définir l'accessibilité numérique et les types de handicap

Facile 00:03:52

Mesurer l'ampleur du handicap invisible avec une vidéo DesignGouv

Facile 00:02:43

Naviguer uniquement au clavier : vidéo W3C et sélecteur de date

Facile 00:05:04

Découvrir la navigation avec un lecteur d'écran et une plage braille

Facile 00:04:25

Présenter le W3C et son rôle de standardisation du web

Facile 00:03:46

Présenter la WAI et ses ressources, et les limites de Lighthouse

Facile 00:03:43

Comprendre les WCAG : versions et quatre principes

Facile 00:05:13

Comprendre critères de succès et niveaux A, AA, AAA des WCAG

Facile 00:05:13

Connaître la Convention de l'ONU et la loi handicap de 2005

Facile 00:05:11

Appliquer les seuils de l'European Accessibility Act de 2025

Facile 00:02:07

Comparer les obligations en Europe et les délais de mise en conformité

Facile 00:04:55

Présenter le RGAA, référentiel français d'accessibilité

Moyen 00:03:05

Définir l'échantillon de pages d'un audit RGAA

Moyen 00:02:42

Renseigner critères non applicables et dérogations dans un audit RGAA

Moyen 00:03:15

Calculer le taux de conformité RGAA et mettre à jour la déclaration

Moyen 00:02:45

Retracer l'histoire d'AccessiWeb et trouver les ressources RGAA

Moyen 00:03:56

Passer en revue les grands principes du RGAA et des WCAG

Moyen 00:04:19

Rédiger une déclaration d'accessibilité : contenu obligatoire

Moyen 00:04:32

Analyser des déclarations d'accessibilité existantes

Moyen 00:04:15

Présenter l'atelier de découverte des outils d'accessibilité

Facile 00:04:41

Analyser une page web avec l'extension WAVE

Facile 00:02:47

Tester la navigation au clavier : touche Tab et focus visible

Facile 00:01:48

Tester une page locale avec WAVE grâce à un serveur local

Facile 00:02:13

Consigne : palette contrastée, tests au clavier et au Narrateur

Facile 00:03:12

Générer une palette de couleurs accessible avec un outil en ligne

Facile 00:01:57

Comparer WAVE, un validateur par code et Lighthouse

Facile 00:02:34

Repérer des zones tactiles trop petites avec Lighthouse

Facile 00:03:01

Configurer NVDA et écouter une navigation structurée

Facile 00:03:49

Lire les descriptions et l'objet focalisé avec NVDA

Facile 00:03:55

Activer la mise en évidence visuelle de NVDA pour tester un site

Facile 00:02:07

Intégrer l'accessibilité dans un projet en cascade

Moyen 00:03:06

Intégrer l'accessibilité dans un cycle en V

Moyen 00:02:23

Traiter l'accessibilité comme un risque dans le modèle en spirale

Moyen 00:02:33

Intégrer l'accessibilité dans les sprints agiles

Moyen 00:05:29

Distinguer Kanban et Scrum : backlog et tickets

Moyen 00:05:23

Comprendre les rôles Scrum : Product Owner et Scrum Master

Moyen 00:04:04

Dérouler un sprint : exécution, revue et rétrospective

Moyen 00:04:25

Intégrer l'accessibilité à chaque étape d'un projet web

Moyen 00:02:34

Cadrer un projet accessible : former l'équipe et planifier le temps

Moyen 00:02:55

Choisir des templates, thèmes et bibliothèques accessibles

Moyen 00:04:19

Tester, accompagner les contributeurs et pérenniser l'accessibilité

Moyen 00:04:36

Éviter les pièges : tests tardifs, templates et formats inaccessibles

Moyen 00:02:21

Partager la responsabilité et recueillir les retours utilisateurs

Moyen 00:03:50

Adapter la typographie et sous-titrer les vidéos pour tous

Moyen 00:02:25

Ne pas transmettre l'information par la seule couleur

Moyen 00:03:23

Mesurer les bénéfices de l'accessibilité : publics, image et SEO

Moyen 00:04:58

Penser la navigation et l'architecture d'un site avant la maquette

Moyen 00:02:56

Structurer une page : hero section, recherche, menu et footer

Moyen 00:03:16

Concevoir une maquette lisible : titres, police, mobile et boutons

Moyen 00:05:13

Générer le code d'une maquette Figma et importer un site existant

Moyen 00:03:28

Annoter une maquette Figma : erreurs, liens d'évitement, tabulation

Moyen 00:02:39

Utiliser un kit Figma et annoter l'ordre de tabulation

Moyen 00:04:25

Appliquer l'affordance et signaler les erreurs de formulaire

Moyen 00:03:40

Éviter le jargon et vérifier les contrastes d'une maquette

Moyen 00:04:25

Commencer par un wireframe avant la maquette

Moyen 00:02:31

Indiquer une nouvelle page et le niveau de titre dans Figma

Moyen 00:05:03

Distinguer wireframe, maquette et prototype

Moyen 00:03:35

Nommer correctement les fichiers d'images

Moyen 00:02:35

Décrire les images, hiérarchiser les titres et expliciter les liens

Moyen 00:03:57

Ne pas reposer sur la couleur et limiter les animations

Moyen 00:04:51

Prévoir zones cliquables, labels, balises et boutons explicites

Moyen 00:03:04

Faciliter la saisie, les erreurs et les contenus multimédias

Moyen 00:04:08

Récapituler les bonnes pratiques de conception accessible

Moyen 00:02:16

Atelier : concevoir la maquette d'une page d'accueil accessible

Moyen 00:06:30

Atelier maquette : points de contrôle et formats d'écran

Moyen 00:04:06

Préparer le projet de démonstration et un serveur local

Moyen 00:04:46

Renseigner l'en-tête HTML : lang, charset, viewport et title

Moyen 00:04:07

Structurer header et nav, puis écouter la page avec NVDA

Moyen 00:05:19

Comprendre l'arbre d'accessibilité dans les DevTools

Moyen 00:04:22

Structurer une navigation avec nav et ul dans l'arbre d'accessibilité

Moyen 00:04:09

Imbriquer des listes et parcourir la navigation avec NVDA

Moyen 00:03:18

Charger des icônes Material Symbols et limiter la largeur du contenu

Moyen 00:05:55

Insérer un logo en SVG dans la navigation

Moyen 00:03:58

Transformer les éléments du menu en liens et ouvrir un nouvel onglet

Moyen 00:03:14

Découvrir les attributs ARIA et le guide APG du W3C

Moyen 00:03:47

Donner un nom accessible à un logo SVG avec aria-label et title

Moyen 00:04:40

Comparer aria-description, aria-label et title et écouter NVDA

Moyen 00:06:19

Annoncer l'ouverture d'un lien dans un nouvel onglet avec ARIA

Moyen 00:03:47

Nommer la navigation avec aria-label et la passer en flex

Moyen 00:05:04

Aligner les éléments du menu avec flexbox dans les DevTools

Moyen 00:06:33

Nommer des icônes avec aria-label et distinguer margin et padding

Moyen 00:03:12

Regrouper des éléments dans une div et ajuster l'alignement flex

Moyen 00:05:36

Masquer une icône décorative de la navigation avec aria-hidden

Moyen 00:04:25

Tester les liens de navigation au clavier avec NVDA

Moyen 00:02:28

Donner un nom accessible aux icônes de lien avec aria-label

Moyen 00:02:52

Comparer aria-label, aria-description et title sur une icône

Moyen 00:03:43

Rendre une div tabulable avec tabindex="0" et la décrire avec ARIA

Moyen 00:03:50

Vérifier la priorité entre title et aria-description avec NVDA

Moyen 00:03:51

Utiliser section et les titres h1 à h6 avec leur rôle heading

Moyen 00:04:30

Écouter les titres, article et aside (rôle complementary) avec NVDA

Moyen 00:05:25

Donner un nom accessible à un bouton « X » avec aria-label

Moyen 00:04:48

Associer un label à une case à cocher avec for et id

Moyen 00:04:16

Tester une case à cocher étiquetée avec NVDA

Moyen 00:04:09

Légender une image avec figure et figcaption en plus de l'attribut alt

Moyen 00:05:04

Décrire une image SVG pour les lecteurs d'écran

Moyen 00:04:13

Choisir entre title et aria-label pour nommer un SVG

Moyen 00:02:50

Combiner alt et title sur une image img

Moyen 00:03:40

Repérer les erreurs d'un formulaire construit avec des div

Moyen 00:05:41

Tester au lecteur d'écran un formulaire sans balise form

Moyen 00:04:30

Structurer un formulaire avec la balise form et le type email

Moyen 00:03:56

Annoncer les messages d'erreur avec aria-live assertive ou polite

Moyen 00:02:10

Construire une modale de succès accessible avec role dialog

Moyen 00:05:39

Sélectionner des éléments du DOM avec getElementById et querySelector

Difficile 00:04:36

Distinguer querySelector, querySelectorAll, classes et identifiants

Difficile 00:04:31

Parcourir une NodeList par index et avec une boucle

Difficile 00:03:50

Récupérer le bouton d'envoi et vérifier la sélection dans la console

Difficile 00:02:13

Ouvrir et fermer la modale en déplaçant le focus

Difficile 00:06:05

Intercepter l'envoi du formulaire et vérifier le champ nom

Difficile 00:04:52

Valider le nom et l'adresse e-mail avec des expressions régulières

Difficile 00:05:42

Fermer la modale avec Échap et piéger le focus avec Tab

Difficile 00:05:54

Tester le formulaire complet avec NVDA et aria-live

Moyen 00:05:39

Regrouper des boutons radio avec fieldset et legend

Moyen 00:06:00

Naviguer dans un groupe de boutons radio au lecteur d'écran

Moyen 00:02:22

Structurer des listes ordonnées et des listes de description

Moyen 00:05:04

Rendre un tableau de données accessible avec caption, thead et th

Moyen 00:04:37

Réutiliser un composant interrupteur accessible avec aria-checked

Difficile 00:06:31

Lire et modifier un attribut ARIA en JavaScript

Difficile 00:04:45

Décrire un élément avec aria-describedby et aria-description

Difficile 00:06:33

Comprendre la priorité entre aria-labelledby, aria-label et le texte

Difficile 00:04:25

Masquer un élément avec display: none pour tous les utilisateurs

Difficile 00:06:53

Masquer visuellement un texte avec la propriété CSS clip

Difficile 00:04:19

Vérifier au lecteur d'écran un texte masqué visuellement

Difficile 00:03:54

Masquer un élément au seul lecteur d'écran avec aria-hidden

Difficile 00:04:37

Placer un texte hors écran mais lisible par le lecteur d'écran

Difficile 00:03:38

Rendre accessible un nuage de mots avec aria-label

Difficile 00:03:13

Contrôler l'ordre de tabulation avec tabindex

Moyen 00:03:01

Créer un lien d'évitement vers le contenu principal

Moyen 00:03:58

Révéler un lien d'évitement au focus avec les événements focus et blur

Moyen 00:05:06

Présenter Pa11y pour auditer l'accessibilité en ligne de commande

Difficile 00:03:08

Automatiser les tests d'accessibilité dans une chaîne CI avec Selenium

Difficile 00:02:10

Présenter l'atelier de mise en conformité d'un projet web

Difficile 00:02:18

Installer les dépendances Node.js de l'atelier avec npm install

Difficile 00:03:47

Lancer le test Pa11y sur les versions non conforme et conforme

Difficile 00:04:03

Générer des rapports HTML d'accessibilité avec npm run

Difficile 00:02:54

Mettre à jour ChromeDriver pour lancer les tests Selenium

Difficile 00:03:58

Analyser les erreurs signalées et repérer les faux positifs

Difficile 00:04:19

Personnaliser le style du focus en CSS avec :focus et outline-offset

Difficile 00:04:08

Compléter les outils automatiques par une vérification manuelle

Difficile 00:05:02