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?

Présentation au sujet: "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?"— Transcription de la présentation:

1 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) 315-5550

2 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 http://creativecommons.org/licenses/by-nc- sa/2.5/ca/deed.fr_CA Des questions? 1 (877) 315-5550

3 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) 315-5550

4 Types de problèmes d’accès sur le Web L’unique responsabilité des développeurs? Des questions? 1 (877) 315-5550 01. 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

5 Problèmes d’accès sur le Web liés au design Rien n’est moins sûr... Des questions? 1 (877) 315-5550 01. 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

6 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) 315-5550

7 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) 315-5550 Accessibilité

8 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) 315-5550

9 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) 315-5550

10 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) 315-5550

11 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) 315-5550

12 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) 315-5550

13 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 2.4.10) Des questions? 1 (877) 315-5550

14 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) 315-5550

15 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) 315-5550

16 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) 315-5550

17 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) 315-5550

18 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) 315-5550

19 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) 315-5550

20 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) 315-5550

21 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) 315-5550

22 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) 315-5550

23 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) 315-5550

24 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) 315-5550

25 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) 315-5550

26 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) 315-5550

27 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) 315-5550

28 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) 315-5550

29 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) 315-5550

30 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) 315-5550

31 Questions et commentaires Merci de votre attention! Des questions? 1 (877) 315-5550

32 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 : info@accessibiliteweb.com Des questions? 1 (877) 315-5550

33 Crédits  Denis Boudreau, Directeur-général  Coopérative AccessibilitéWeb 1751, rue Richardson bureau 6.111 Montréal (Québec) H3K 1G6 Téléphone : 1 (877) 315-5550 Télécopieur : 1 (514) 667-2216 Courriel : dboudreau@accessibiliteweb.com Web : http://www.accessibiliteweb.com/ dboudreau@accessibiliteweb.com http://www.accessibiliteweb.com/  Consultez notre blogue : http://www.accessiblogue.com/ http://www.accessiblogue.com/ Des questions? 1 (877) 315-5550