Formation Développement Web accessible - Les bases

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)
• Colour Contrast Analyzer : pour tester les contrastes de couleurs

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

Exemples 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

• Cadres en ligne : présence et pertinence du titre
• Couleurs
• Information portée par les couleurs
• Evaluation des contrastes de couleur
• Contraste des textes
• Contraste des éléments non textuels
• Multimédia
• Transcription textuelle
• Audiodescription
• Sous-titres
• Contrôlable au clavier et lecteur d'écran
• 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)

Exemples de travaux pratiques (à titre indicatif)

• Identification des cadres sur une page web et vérification de l'attribution title
• Identification des erreurs d'accessibilité sur des vidéos présents sur une page web
• Analyse de tableaux présents sur des pages web ; propositions de corrections
• Rendre un tableau accessible via le code

Jour 2 - Après-midi

Les thématiques du RGAA 4 - Suite

• 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
• 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

Exemples de travaux pratiques (à titre indicatif)

• 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
• 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

Jour 3 - Matin

Les thématiques du RGAA 4 - suite

• Structuration de l'information
• Titres de section
• Structures de document
• Les différents types de listes
• Citations
• 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

Exemples de travaux pratiques (à titre indicatif)

• 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
• Détermination des techniques de masquage appropriées pour différentes situations

Jour 3 - Après-midi

Les thématiques du RGAA 4 - Suite

• Formulaires
• Étiquettes 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)

• Analyse de différents formulaires Web, et vérification de la pertinence des étiquettes de champs
• 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
• Gestion de l'ordre de tabulation avec le HTML et le CSS