Plan du site
Module 1 - Principes fondamentaux de l'accessilité
Module 1 - Principes fondamentaux de l'accessilité
- Accessibilité du Web
- Types de handicaps
- Lignes directrices sur l’accessibilité
- Lois et normes gouvernementales
Module 2 - Structure et sémantique des pages
Module 2 - Structure et sémantique des pages
- Points de repère
- En-têtes
- Structure du contenu
- Langue
- Listes
- iFrames
- Analyse syntaxique et validité
- Pratique exemplaire - Module 2
Module 3 - Liens et navigation
Module 3 - Liens et navigation
-
Liens
-
Fonction du lien
- Lien et bouton
- Mauvais exemple : Texte vague du lien
- Bon exemple : Texte de lien descriptif
- Bon exemple : Utilisation d'aria-label pour la fonction du lien
- Bon exemple : Utilisation d’aria-labelledby pour la fonction du lien
- Bon exemple : Utilisation de texte visuellement masqué pour la fonction du lien
- Ressources WCAG connexes (Fonction du lien)
- Activation du lien
- Indicateur visuel de la cible
- Distinguer les liens du texte
- Liens qui s’ouvrent dans une nouvelle fenêtre
-
Fonction du lien
-
Navigation
- Blocs de navigation
- Liens de saut de navigation
- Accès multiples
- Table des matières
- Ordre séquentiel logique
- Cible et ordre de cible
- Raccourcis clavier de caractères
- Changement de contexte
- Cohérence
- Pratique exemplaire - Module 3
Module 4 - Tableaux
Module 4 - Tableaux
- Concept des tableaux
- Un seul en-tête
- Deux en-têtes
- En-têtes irréguliers
- En-têtes à plusieurs niveaux
- Légende et sommaire
- Conseils et astuces supplémentaires
- Ressources des tableaux dans la boîte à outils de l'expérience Web (BOEW)
-
Pratiques exemplaire - Module 4
- Concept des tableaux (pratique exemplaire)
- Guide de style pour le contenu du site Canada.ca (pratique exemplaire)
- Tableaux irréguliers (pratique exemplaire)
- Tableaux comportant des en-têtes à plusieurs niveaux (pratique exemplaire)
- Légendes et sommaire (pratique exemplaire)
- Conseils et astuces supplémentaires (pratique exemplaire)
Module 5 – Images
Module 5 – Images
- Équivalents textuels
- Images informatives
- Images décoratives ou redondantes
- Images fonctionnelles
- Images de texte
- Images animées
-
Images complexes
- Aperçu - Images complexes
- Lignes directrices pour la rédaction des descriptions longues
-
Stratégies à adopter pour fournir des descriptions courtes et longues
- Stratégie 1 : Un lien texte vers la description longue à côté de l’image
- Stratégie 2 : Bloc détaillé ou sommaire pour la description longue à côté de l’image
- Stratégie 3 : Association structurelle de l’image et de sa description longue adjacente (HTML5)
- Stratégie 4 : Fournir un lien menant à la description longue via longdesc
- Ressources WCAG connexes (Images complexes)
- Figure et figcaption
- Groupes d’images
- Images cliquables
- Arbre décisionnel en texte de remplacement
-
Images de SVG
- Conception avec images SVG
- Technique 1 : Utiliser l’élément <img> pour faire référence au moyen de l’attribut src
- Technique 2 : Utiliser l’élément <svg> pour intégrer le SVG directement (en ligne)
- SVG décoratif
- Texte dans SVG
- Contraste de couleurs SVG
- Animation SVG
- SVG interactif
- Ressources WCAG connexes (Images de SVG)
- CAPTCHA
- Conseils et astuces supplémentaires concernant les images
-
Pratique exemplaire - Module 5
- Images informatives (pratique exemplaire)
- Images décoratives ou redondantes (pratique exemplaire)
- Images fonctionnelles (pratique exemplaire)
- Images de texte (pratique exemplaire)
- Images liées (pratique exemplaire)
- Images animées (pratique exemplaire)
- Images complexes (pratique exemplaire)
- Groupes d’images (pratique exemplaire)
- Images cliquables (pratique exemplaire)
- Figure et figcaption (pratique exemplaire)
- Images de SVG (pratique exemplaire)
- CAPTCHA (pratique exemplaire)
- Conseils et astuces supplémentaires concernant les images (pratique exemplaire)
Module 6 - Formulaires
Module 6 - Formulaires
- Concepts des formulaires
-
Commandes d’étiquetage
- Pratiques exemplaires pour les contrôles d’étiquetage
- Bon exemple : Associer explicitement les étiquettes en utilisant les attributs for/id
- Bon exemple : Masquer visuellement l’élément d’étiquette
- Bon exemple : Utiliser aria-label
- Bon exemple : Utilisation d’aria-labelledby pour concaténer une étiquette provenant de plusieurs sources
- Bon exemple : Utilisation d’aria-labelledby pour concaténer une étiquette provenant de plusieurs sources
- Bon exemple : Boutons d’étiquetage
- Bon exemple : Bouton d’étiquetage des images utilisant l’attribut aria-label
- Ressources WCAG connexes (Commandes d’étiquetage)
-
Regroupement des commandes
- Regroupement de contrôles de formulaires
- Bon exemple : Regrouper les commandes de cases connexes avec fieldset et legend
- Bon exemple : Regrouper les éléments de formulaire connexes avec ARIA
- Bon exemple : Regrouper les options connexes avec optgroup
- Ressources WCAG connexes (Regroupement des commandes)
-
Instructions du formulaire
- Aperçu : Instructions du formulaire
- Instructions générales
- Instructions incluse
- Les instructions relatives aux groupes
- Ressources WCAG connexes (Instructions du formulaire)
- Déterminer l’objet de la saisie
-
Validation des saisies
- Aperçu : Validation des saisies
- Validation des saisies requises
- Validation des types de saisie communs
- Validation des saisies structurées
- Validation de la longueur des saisies
- Tenir compte des différents formats de saisie
- Avantages de la validation côté client
- Validation par l’utilisateur
- Ressources WCAG connexes (Validation des saisies)
-
Avis à l’utilisateur
- Conception de la notification aux utilisateurs
- Bon exemple 1 : Utilisation de l’en-tête principal
- Bon exemple 2 : Utilisation de l’élément du titre
- Bon exemple 3 : Liste des erreurs avant le formulaire
- Bon exemple 4 : Rétroaction en ligne
- Avis aux utilisateurs de la validation des formulaires de la BOEW
- Bon exemple: Rétroaction en ligne sur la BOEW
- Ressources WCAG connexes (Avis à l’utilisateur)
- Formulaires à étapes multiples
-
Commandes personnalisées
- Conception de contrôles personnalisés
- Dans la mesure du possible, utiliser un élément de formulaire HTML natif plutôt qu’une commande personnalisée
- Modéliser le comportement d’après les éléments de formulaire HTML natifs
- Ajouter le bon ARIA name, role, and values
- Communiquer des mises à jour et des changements d’état par l’entremise de messages en direct sur ARIA lorsqu’ils ne peuvent pas être communiqués par l’entremise de méthodes HTML ou ARIA
- Bon exemple : Un bouton Partager personnalisé
- Ressources WCAG connexes (Commandes personnalisées)
- Pratique exemplaire - Module 6
Module 7 - Conception visuelle et couleurs
Module 7 - Conception visuelle et couleurs
- Introduction : Conception visuelle et couleurs
-
Couleur
-
Aperçu : Couleur
-
Information transmise au moyen de couleurs
- Mauvais exemple : Données de tableau en couleur sans étiquette de texte
- Bon exemple : Données de tableau en couleur avec étiquettes de texte
- Mauvais exemple : Champ d’erreur indiqué seulement par une couleur
- Bon exemple : Erreur de champ du formulaire surlignée avec texte explicatif
- Mauvais exemple : Seule la couleur communique l’information
- Bon exemple : Information communiquée par la couleur et le motif
- Mauvais exemple : Information codée par couleur non communiquée par un texte de remplacement
-
Distinguer les liens et les contrôles du texte
- Bon exemple: Texte de l’hyperlien souligné
- Bon exemple : Contraste élevé avec un effet visuel en cas de survol ou de sélection
- Mauvais exemple : Seule la couleur distingue les liens du texte
- Bon exemple : La bordure complète la couleur pour distinguer les liens du texte de base
- Personnalisation de la couleur et du contraste de l’interface
- Bon exemple : Bouton avec CSS
- Mauvais exemple : Bouton utilisant une image de texte
-
Information transmise au moyen de couleurs
- Ressources WCAG connexes (Couleur)
-
Aperçu : Couleur
- Contraste
- Proximité visuelle des étiquettes
- Espacement du texte
- Texte et icônes générés par une CSS
- Masquer ou afficher un contenu
-
Pratiques exemplaire - Module 7
- Couleur (pratique exemplaire)
- Contraste (pratique exemplaire)
- Proximité visuelle des étiquettes (pratique exemplaire)
- Espacement des textes (pratique exemplaire)
- Contenu produit par une CSS (pratique exemplaire)
- Masquer un contenu (pratique exemplaire)
- Affichage d’un contenu lorsqu’on le survole avec le pointeur ou qu’on le sélectionne avec le clavier (pratique exemplaire)
Module 8 - Zoom et conception adaptée
Module 8 - Zoom et conception adaptée
- Introduction : Zoom et conception adaptée
- Zoom
- Conception adaptée
- Formulaires adaptés
-
Images adaptées
-
Concevoir des images adaptées
- Technique 1 : Styliser l’image avec le CSS width:100%
- Technique 2 : Styliser l’image avec le CSS max-width:100%
- Technique 3 : Servir différentes tailles d’image à différentes tailles d’écran en utilisant l’attribut srcset
- Technique 4 : Servir différentes images à différentes tailles d’écran en utilisant l’élément picture.
- Mauvais exemple : Image non adaptée
- Ressources WCAG connexes (Images adaptées)
-
Concevoir des images adaptées
- Texte adapté
- Objets et modules d’extension adaptés
- Tableaux adaptés
- Composantes d’interface utilisateur adaptées
- Vidéo adaptée
- Orientation
-
Pratique exemplaire - Module 8
- Zoom (pratique exemplaire)
- Conception adaptée (pratique exemplaire)
- Formulaires adaptés (pratique exemplaire)
- Images adaptées (pratique exemplaire)
- Texte adapté (pratique exemplaire)
- Objets et modules d’extension adaptés (pratique exemplaire)
- Tableaux adaptés (pratique exemplaire)
- Composantes d’interface utilisateur adaptées (pratique exemplaire)
- Vidéo adaptée (pratique exemplaire)
- Orientation (pratique exemplaire)
Module 9 - Audio, vidéo, etc.
Module 9 - Audio, vidéo, etc.
- Introduction : Audio, vidéo, animations et mouvement
- Matrice des politiques sur le multimédia
-
Sous-titres
- Aperçu – Sous-titres
- Utilisations de l’expression « sous-titres »
- Avez-vous besoin de sous-titres?
- Que comprennent les sous-titres?
- Sous-titres en direct
- Sous-titres automatisés
- Formats de fichier de sous-titrage
- Sous-titres pour vidéo préenregistrée avec audio
- Utilisation de l’élément track
- Ajout de sous-titres sur la plateforme YouTube
- Ajout de sous-titres sur la plateforme Microsoft Stream
- Sous-titres de présentation et de style
- Personnalisation des sous-titres
- Ressources WCAG connexes (Sous-titres)
-
Transcriptions
- Aperçu – Transcriptions
- Avez-vous besoin d’une transcription?
- Que comprend une transcription?
- Trouver la transcription
- Transcriptions de présentation et de style
- Transcriptions interactives
- Ressources WCAG connexes (Transcriptions)
- Transcription de l’audio en texte
- Description de l’information visuelle
- Langue des signes (niveau AAA)
- Accessibilité du lecteur multimédia
- Contenu clignotant
- Animations et mouvements
- Mettre en pause, arrêter ou masquer
- Contrôle du son
-
Pratique exemplaire - Module 9
- Sous-titres (pratique exemplaire)
- Transcriptions (pratique exemplaire)
- Transcription de l’audio en texte (pratique exemplaire)
- Description de l’information visuelle (pratique exemplaire)
- Accessibilité du lecteur multimédia (pratique exemplaire)
- Contenu clignotant (pratique exemplaire)
- Animations et mouvements (pratique exemplaire)
- Mettre en pause, arrêter ou masquer (pratique exemplaire)
- Contrôle du son (pratique exemplaire)
Module 10 - Méthodes de saisie de données
Module 10 - Méthodes de saisie de données
- Introduction : Méthodes de saisie de données
- Saisie avec la souris
-
Saisie avec clavier
- Aperçu : Saisie avec clavier
- Fonctionnalité du clavier
- Piège de clavier
- Gestion de cible avec contenu injecté de JavaScript
- Ressources WCAG connexes (Saisie avec clavier)
- Saisie avec un dispositif de pointage
- Saisie vocale
- Commande par le mouvement
- Pratique exemplaire - Module 10