Design Web accessible WCAG 2.0 au service du design graphique Denis Boudreau Coopérative AccessibilitéWeb Septembre 2009 – Matériel de formation Des questions? 1 (877)

Propriété intellectuelle Avis L’intégralité de ce document est déposé sous une licence de type Creative Commons Paternité - Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 2.5 Canada sa/2.5/ca/deed.fr_CA Des questions? 1 (877)

Formateur Denis Boudreau  Directeur-général d’AccessibilitéWeb  Expert certifié en accessibilité du Web (2005)  Un des principaux rédacteurs du SGQRI 008 SGQRI : Standard gouvernemental sur les ressources informationnelles en matière d’accessibilité des sites Web, des documents téléchargeables et du multimédia Des questions? 1 (877)

Types de problèmes d’accès sur le Web L’unique responsabilité des développeurs? Des questions? 1 (877) Contenus non textuels15. Utilisabilité au clavier 02. Vidéo avec info transmise par la piste visuelle16. Délai de consultation ou d’interaction 03. Vidéo avec info transmise par la piste sonore17. Effets stroboscopiques 04. En-têtes de sections18. Accès au contenu principal de la page 05. Listes, citations et texte accentué19. Soutien à la navigation 06. Formulaires20. Ordre de tabulation correct 07. Tableaux de données21. Clarification de la fonction des liens 08. Ordre de lecture22. Définition de la langue 09. Caractéristiques sensorielles23. Signification des mots rares et des abréviations 10. Perception des couleurs24. Simplification du langage 11. Perception des contrastes25. Gestion des changements de contexte 12. Contrôle du son26. Proposition de navigation cohérente 13. Texte sous forme d’image27. Prévention des erreurs 14. Présentation visuelle du texte28. Incompatibilité avec les outils d’adaptation

Problèmes d’accès sur le Web liés au design Rien n’est moins sûr... Des questions? 1 (877) Contenus non textuels15. Utilisabilité au clavier 02. Vidéo avec info transmise par la piste visuelle16. Délai de consultation ou d’interaction 03. Vidéo avec info transmise par la piste sonore17. Effets stroboscopiques 04. En-têtes de sections18. Accès au contenu principal de la page 05. Listes, citations et texte accentué19. Soutien à la navigation 06. Formulaires20. Ordre de tabulation correct 07. Tableaux de données21. Clarification de la fonction des liens 08. Ordre de lecture22. Définition de la langue 09. Caractéristiques sensorielles23. Signification des mots rares et des abréviations 10. Perception des couleurs24. Simplification du langage 11. Perception des contrastes25. Gestion des changements de contexte 12. Contrôle du son26. Proposition de navigation cohérente 13. Texte sous forme d’image27. Prévention des erreurs 14. Présentation visuelle du texte28. Incompatibilité avec les outils d’adaptation

Origine des standards d'accessibilité Développés par le World Wide Web Consortium (W3C)  Groupe de travail sur l'accessibilité : WAI (Web Accessibility Initiative) Développer des stratégies, des directives et des ressources pour aider à rendre le Web accessible aux personnes handicapées Adoption des WCAG 1.0 en 1999 Adoption des WCAG 2.0 en 2008 Des questions? 1 (877)

Transversalité de la pratique d'accessibilité Représentation typique de la chaîne de production  Idéation (analyse du besoin, approche et concept)  Analyse (stratégique et fonctionnelle)  Conception (production d'un cahier des charges)  Rédaction (ligne éditoriale et production du contenu)  Création graphique (design et infographie)  Prototypage (installation et maquettage)  Développement (intégration, programmation, alimentation)  Contrôle qualité (tests généraux et évaluation d’accessibilité)  Mise en ligne (tests complémentaires, formation) Des questions? 1 (877) Accessibilité

Sommaire 1.» Navigation et organisation d’un site 2.Contrastes de couleurs 3.Images de texte 4.Liens 5.Paragraphes 6.Formulaires Des questions? 1 (877)

Navigation et organisation d’un site Mécanisme de contournement  Selon les standards WCAG 2.0 du W3C, niveau A : Une page Web devrait posséder un mécanisme permettant de contourner les blocs de contenu se répétant de page en page. (Règle 2.4.1) Des questions? 1 (877)

Navigation et organisation d’un site Cohérence  Selon les standards WCAG 2.0 du W3C, niveau AA : La navigation devrait être cohérente d’une page à l’autre. (Règle 3.2.3) La navigation devrait être similaire d’une page à l’autre. (Règle 3.2.4) Des questions? 1 (877)

Navigation et organisation d’un site Variété  Selon les standards WCAG 2.0 du W3C, niveau AA : Une page Web devrait proposer plus d’une méthode de navigation. (Règle 2.4.5) Des questions? 1 (877)

Navigation et organisation d’un site Repères  Selon les standards WCAG 2.0 du W3C, niveau AAA : Une page Web devrait proposer au moins un moyen évident de se repérer dans le site. (Règle 2.4.8) Des questions? 1 (877)

Navigation et organisation d’un site En-têtes hiérarchisés  Selon les standards WCAG 2.0 du W3C, niveau AAA : Le contenu d’une page Web devrait être structuré à l’aide d’en-têtes descriptifs. (Règle ) Des questions? 1 (877)

Sommaire 1.Navigation et organisation d’un site 2.» Contrastes de couleurs 3.Images de texte 4.Liens 5.Paragraphes 6.Formulaires Des questions? 1 (877)

Contrastes de couleurs Contrastes de luminosité, I  Selon les standards WCAG 2.0 du W3C, niveau AA : Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 4,5 pour 1 avec son arrière-plan. (Règle 1.4.3) Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 3 pour 1 avec son arrière-plan. (Règle 1.4.3) Des questions? 1 (877)

Contrastes de couleurs Contrastes de luminosité, II  Selon les standards WCAG 2.0 du W3C, niveau AAA : Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 7 pour 1 avec son arrière-plan. (Règle 1.4.6) Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 4,5 pour 1 avec son arrière-plan. (Règle 1.4.6) Des questions? 1 (877)

Sommaire 1.Navigation et organisation d’un site 2.Contrastes de couleurs 3.» Images de texte 4.Liens 5.Paragraphes 6.Formulaires Des questions? 1 (877)

Images de texte Présentation visuelle équivalente, I  Selon les standards WCAG 2.0 du W3C, niveau AA : Si la technologie employée permet de réaliser la même présentation visuelle, du texte devrait être utilisé pour communiquer de l’information plutôt que des images de texte, à moins que ces images de texte puissent être modifiées selon les exigences de l’utilisateur. (Règle 1.4.5) Des questions? 1 (877)

Images de texte Présentation visuelle équivalente, II  Selon les standards WCAG 2.0 du W3C, niveau AAA : Du texte devrait toujours être utilisé pour communiquer de l’information plutôt que des images de texte. (Règle 1.4.9) Des questions? 1 (877)

Sommaire 1.Navigation et organisation d’un site 2.Contrastes de couleurs 3.Images de texte 4.» Liens 5.Paragraphes 6.Formulaires Des questions? 1 (877)

Liens Liens distinctifs  Selon les standards WCAG 2.0 du W3C, niveau A : Les liens devraient être visuellement distincts sans la vision des couleurs. (Règle 1.4.1) Des questions? 1 (877)

Liens Détermination de la destination en contexte  Selon les standards WCAG 2.0 du W3C, niveau A : La destination de chaque lien devrait être déterminée à partir de son libellé ou de son contexte. (Règle 2.4.4) Des questions? 1 (877)

Liens Détermination de la destination hors contexte  Selon les standards WCAG 2.0 du W3C, niveau AAA : La destination de chaque lien devrait être déterminée simplement à partir de son libellé ou à l’aide d’une mécanisme permettant d’en spécifier la destination. (Règle 2.4.9) Des questions? 1 (877)

Sommaire 1.Navigation et organisation d’un site 2.Contrastes de couleurs 3.Images de texte 4.Liens 5.» Paragraphes 6.Formulaires Des questions? 1 (877)

Paragraphes Largeur  Selon les standards WCAG 2.0 du W3C, niveau AAA : Un bloc de texte devrait posséder une largeur maximale de 80 caractères (ou 40 si CJK). (Règle 1.4.8) Des questions? 1 (877)

Paragraphes Interlignes  Selon les standards WCAG 2.0 du W3C, niveau AAA : L’interligne d’un paragraphe devrait être ajustée à une valeur d’au moins 1,5 fois la taille du texte. (Règle 1.4.8) L’espace entre les paragraphes devrait être ajusté à une valeur d’au moins 1,5 fois la valeur de l’interligne. (Règle 1.4.8) Des questions? 1 (877)

Sommaire 1.Navigation et organisation d’un site 2.Contrastes de couleurs 3.Images de texte 4.Liens 5.Paragraphes 6.» Formulaires Des questions? 1 (877)

Formulaires Regroupement de champs  Selon les standards WCAG 2.0 du W3C, niveau A : Dans un formulaire, les blocs similaires devraient être regroupés. (Règle 3.3.2) Dans un formulaire, les cases à cocher ou les boutons radio devraient être regroupés. (Règle 1.3.1) Dans un formulaire, les groupes devraient être décrits. (Règle 1.3.1) Des questions? 1 (877)

Formulaires Libellés  Selon les standards WCAG 2.0 du W3C, niveau A : Dans un formulaire, les champs devraient avoir un libellé. (Règle 3.3.2) Dans un formulaire, les libellés des champs devraient être près de ceux-ci, de manière à ce qu’ils soient identifiables. (Règle 1.3.1) Des questions? 1 (877)

Formulaires Champs obligatoires  Selon les standards WCAG 2.0 du W3C, niveau A : Dans un formulaire, les champs obligatoires devraient être identifiés sous forme de texte (Règle 1.4.1) Des questions? 1 (877)

Questions et commentaires Merci de votre attention! Des questions? 1 (877)

Merci de votre attention! Pour toute information complémentaire au sujet de l’accessibilité des sites Web pour les personnes handicapées ou autres sujets connexes, n’hésitez pas à nous contacter directement au : Des questions? 1 (877)

Crédits  Denis Boudreau, Directeur-général  Coopérative AccessibilitéWeb 1751, rue Richardson bureau Montréal (Québec) H3K 1G6 Téléphone : 1 (877) Télécopieur : 1 (514) Courriel : Web :  Consultez notre blogue : Des questions? 1 (877)