WCAG               et     l’Accessibilité du WebConférence Romande sur l’Accessibilité du Web – Genève – Avril 2012
Avant–propos       1989                2009                 2011Invention du Web        Le Web 2.0       L’internet Mobile...
Avant–propos                 Comme dans laLes handicapés       vie réelle  Les séniors    Les PDA      L’accessibilité duL...
Avant–propos  Depuis le début de linternet, lAccessibilité est          Accessibilité         au cœur des spécifications w...
Le handicap et le Web
Le Handicap et le Web                            Selon une étude de                            Forrester Research         ...
Le Handicap et le WebProblèmes rencontrésHandicapés visuels : image, vidéo, signalétique           AccéderHandicapés audit...
L A c c e s s i b i l i t é du w e b Comment surfe les handicapés                           Loupe d’écransLecteur d’écran ...
WCAGWeb Content Accessibility Guidelines
WCAG avant-propos  Pour WCAG un utilisateur c’est un       ensemble compliqué : Personne                                  ...
WCAG
WCAG                                           Les actions de WAI                                           se situent dan...
WCAG                                                          Les                                                    recom...
WCAGWeb Content Accessibility GuidelinesEnsemble de recommandations destinées à                                           ...
WCAG           Exemple de           complexité          La règle 1.1       couvre notamment:           Les images         ...
WCAGWCAG est complet, complexe et demande                                                En europeun bon niveau préalable ...
Un site accessible… (Bases fondamentales)
1. les alternatives- S’assurer de la présence d’une alternative (ALT)- S’assurer que les images porteuses d’information on...
1. les alternatives- S’assurer de la présence d’une transcription textuelle aux  vidéos et aux animations flash- S’assurer...
1. les alternatives- S’assurer qu’une information ne dépend pas de l’activation de  javascript                            ...
1. les alternatives- Indiquer la nature de l’image, par exemple « code captcha à  recopier pour envoyer le formulaire »- F...
2. navigation et aides à la navigation- S’assurer que les liens sont explicite via    - L’intitulé seul    - Un title (att...
2. navigation et aides à la navigation- S’assurer que toutes les pages ont un titre- S’assurer que dans les collections de...
2. navigation et aides à la navigation- Proposer un plan du site ou un moteur de recherche- Proposer des liens d’accès rap...
3. les formulaires et les tableaux- Associer un label aux champs de formulaire- Utiliser des libellés de bouton pertinents...
3. les formulaires et les tableaux-   Donner un titre et un résumé aux tableaux de données-   Utiliser de vraies en-tête (...
4. structure, présentation, compréhension- Utiliser des titres de contenus (H1-H6) pour structurer  l’information- Utilise...
4. structure, présentation, compréhension- Utiliser exclusivement CSS pour la présentation- S’assurer que le contenu reste...
4. structure, présentation, compréhension- Ne pas faire dépendre une information de la seule perception  de la couleur, po...
4. structure, présentation, compréhension- S’assurer que l’utilisateur peut arrêter ou masquer les  contenus en mouvements...
5. compatibilité avec l’accessibilité- Utiliser un doctype et s’assurer que le code ne contient pas  d’erreur- Respecter l...
5. compatibilité avec l’accessibilité- S’assurer que les interfaces en Flash sont utilisables au clavier  et correctement ...
5. compatibilité avec l’accessibilité                               HTML                            Flash, PDF…           ...
5. compatibilité avec l’accessibilité                               HTML                            Flash, PDF…           ...
5. compatibilité avec l’accessibilitéPour HTML tout est défini dans les spécifications                                    ...
5. compatibilité avec l’accessibilité                               HTML     Avec Javascript                            Fl...
5. compatibilité avec l’accessibilité       Problème pour l’utilisateur                                                   ...
5. compatibilité avec l’accessibilité                                                                   HTML              ...
5. compatibilité avec l’accessibilité                               HTML                            Flash, PDF…           ...
5. compatibilité avec l’accessibilité                               HTML                            Flash, PDF…           ...
5. compatibilité avec l’accessibilité                                                                           HTMLSi l’u...
Merci de votre attentionQelios – Accessibilité Numérique         http://qelios.net         04 68 85 25 42
Prochain SlideShare
Chargement dans…5
×

WCAG et l’accessibilité du Web

22 469 vues

Publié le

Versions accessibles aux formats ODT, DOC et PDF: http://qelios.net/presentations/CRAW_2012/

Notre présentation à la Conférence Romande de l'accessibilité du Web 2012.
Description des préconisations des WCAG 2.0 pour rendre un site Web accessible. Présentation de la spécification WAI-ARIA pour l'accessibilité des interfaces riches, avec des exemples concrets d'application.

Publié dans : Technologie
2 commentaires
5 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
22 469
Sur SlideShare
0
Issues des intégrations
0
Intégrations
164
Actions
Partages
0
Téléchargements
48
Commentaires
2
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

WCAG et l’accessibilité du Web

  1. 1. WCAG et l’Accessibilité du WebConférence Romande sur l’Accessibilité du Web – Genève – Avril 2012
  2. 2. Avant–propos 1989 2009 2011Invention du Web Le Web 2.0 L’internet Mobile TB Lee Les réseaux sociaux Google JF Caillaux Facebook Apple
  3. 3. Avant–propos Comme dans laLes handicapés vie réelle Les séniors Les PDA L’accessibilité duLes connexions web bas débit …. Bénéficie à Tous
  4. 4. Avant–propos Depuis le début de linternet, lAccessibilité est Accessibilité au cœur des spécifications web.Définition officielle de lAccessibilité :" Mettre le Web et ses services à la disposition detous les individus, quels que soient leurmatériel ou logiciel, leur infrastructure Universalitéréseau, leur langue maternelle, leur culture, leurlocalisation géographique, ou leurs aptitudesphysiques ou mentales. "" Le pouvoir du web est dans son universalité. Enjeu majeurUn aspect essentiel est quil soit accessible àtout le monde quel que soit le handicap " pour le web actuel Tim Berners Lee, directeur du W3C
  5. 5. Le handicap et le Web
  6. 6. Le Handicap et le Web Selon une étude de Forrester Research 57% de la population active pourrait bénéficier de technologies Source: Google d’assistance.
  7. 7. Le Handicap et le WebProblèmes rencontrésHandicapés visuels : image, vidéo, signalétique AccéderHandicapés auditifs : son ( paroles , musique ) PercevoirHandicapés moteurs : difficultés dutilisation dessouris et clavier traditionnels. UtiliserHandicapés cognitifs : sens et compréhension ComprendreSeniors : difficultés cumulées ( vision, difficultésdapprentissage, atteintes neuro-motrices ) Pour tous, la visite dun site web est Accessibilité difficile voire impossible.
  8. 8. L A c c e s s i b i l i t é du w e b Comment surfe les handicapés Loupe d’écransLecteur d’écran Les logiciels et les outils Tablette Braille sont prêts Les sites et les applications Non Stick Clavier adapté Périphérique adapté
  9. 9. WCAGWeb Content Accessibility Guidelines
  10. 10. WCAG avant-propos Pour WCAG un utilisateur c’est un ensemble compliqué : Personne WCAG + L’objectif Navigateur principal est + Technologie essentiellement de s’assurer que lorsque l’on met d’assistance à disposition des + contenus dans cet ensemble Système complexed’exploitation « tout marche » + API(s)d’Accessibilité
  11. 11. WCAG
  12. 12. WCAG Les actions de WAI se situent dans cinq domaines : Les technologies du Web Les recommandationsWeb Accessibility Initiative Les OutilsDiffuse des recommandations largementrépandues et reconnues par la communauté L’informationinternationale La R&D
  13. 13. WCAG Les recommandations: UAAG Agents Utilisateurs ATAG Outils d’édition WCAG Accessibilité du contenu ARIA Accessibilité deWAI édite et maintient 4 corps de recommandations Javascript
  14. 14. WCAGWeb Content Accessibility GuidelinesEnsemble de recommandations destinées à Les techniquesrendre les contenus Web accessibles auxpersonnes en situation de handicap, notamment. sont généralement liées à des 4 principes technologies Général 12 règles Html Css 61 critères de succès Serveur Text PDF 570 techniques Flash Silverligth Javascript …Un critère de succès est passé lorsqu’une techniqueréférente au moins est utilisée
  15. 15. WCAG Exemple de complexité La règle 1.1 couvre notamment: Les images Les vidéos Le Flash Les PDF Les contenus cryptiques Les scripts (20 références dans AccessiWeb 2.1)
  16. 16. WCAGWCAG est complet, complexe et demande En europeun bon niveau préalable pour être utilisé. Dés 2003, des méthodes d’application et des référentiels ont été imaginés pour : Simplifier Guider Vérifier Former Utilisez les !
  17. 17. Un site accessible… (Bases fondamentales)
  18. 18. 1. les alternatives- S’assurer de la présence d’une alternative (ALT)- S’assurer que les images porteuses d’information ont une alternative pertinente- S’assurer que les images de décoration ont une alternative nulle Les images Les vidéos et les animations flash Le javascript ALT=‘’ ’’
  19. 19. 1. les alternatives- S’assurer de la présence d’une transcription textuelle aux vidéos et aux animations flash- S’assurer de la présence d’un sous-titrage synchronisé et d’une audio-description dans les vidéos Les images Les vidéos et les animations flash Le javascriptSi je ne peux pas avoir accès à la vidéo comment avoir accès àl’information ?Si je suis sourd comment entendre ?Si je suis aveugle comment voir ?
  20. 20. 1. les alternatives- S’assurer qu’une information ne dépend pas de l’activation de javascript Les images Les vidéos et les animations flash Le javascript Sans Javascript pas de brèves
  21. 21. 1. les alternatives- Indiquer la nature de l’image, par exemple « code captcha à recopier pour envoyer le formulaire »- Fournir une solution alternative : - Captcha sonore - Jeton par SMS - Accès sécurisé personnalisé Un cas - Accès par opérateur téléphonique particulier Les Captchas Ici une alternative reprenant le code du captcha est impossible
  22. 22. 2. navigation et aides à la navigation- S’assurer que les liens sont explicite via - L’intitulé seul - Un title (attentions aux titles inutiles) - Un contexte explicite (titre précédent, contenu du paragraphe…) Les liens- S’assurer que les liens images ont une alternative !! Les titres de pages Les aides à la navigation ALT=‘’ ’’ Le lien « en savoir plus » Ce lien image avec est explicite via le titre une alternative nulle précédent est un lien vide !
  23. 23. 2. navigation et aides à la navigation- S’assurer que toutes les pages ont un titre- S’assurer que dans les collections de pages on indique au moins le numéro de page dans le titre. Les liens Les titres de pages Les aides à la navigation
  24. 24. 2. navigation et aides à la navigation- Proposer un plan du site ou un moteur de recherche- Proposer des liens d’accès rapide à la zone de contenu Les liens Les titres de pages Les aides à la navigation Sans liens d’accès rapide Avec un lien d’accès rapide 800 tabulations pour 160 tabulations pour effectuer une commande effectuer une commande
  25. 25. 3. les formulaires et les tableaux- Associer un label aux champs de formulaire- Utiliser des libellés de bouton pertinents- Placer les instructions de saisie obligatoire et les messages d’erreur avant les formulaires- Structurer les différentes parties du formulaire avec des fieldset et des légendes Les formulaires- Indiquer « erreur sur le formulaire » dans le titre de la page de retour Les tableaux Si vous devez conserver des boutons OK ou envoyer, utiliser un title pour rendre le bouton compréhensible
  26. 26. 3. les formulaires et les tableaux- Donner un titre et un résumé aux tableaux de données- Utiliser de vraies en-tête (TH)- Utiliser scope pour lier les en-têtes aux cellules de données- S’assurer de la bonne linéarisation des tableaux de mise en forme Les formulaires Les tableaux Ce tableau de mise en forme ne se linéarise pas correctement Ce tableau de données est correctement structuré
  27. 27. 4. structure, présentation, compréhension- Utiliser des titres de contenus (H1-H6) pour structurer l’information- Utiliser des listes lorsque c’est nécessaire Titres de- Indiquer la langue de la page et la langue des passages de contenus, listes, in texte en langue étrangère dication de langue Utilisation de CSS et agrandissement des tailles de police Indication donnée par la couleur, contraste et focus Contenu en mouvement Un titre absent chez Yahoo Une liste correctement structurée
  28. 28. 4. structure, présentation, compréhension- Utiliser exclusivement CSS pour la présentation- S’assurer que le contenu reste lisible lorsque les tailles de police sont agrandies à 200% Titres de contenus et listes Utilisation de CSS et agrandissement des tailles de police Indication donnée par la couleur, contraste et focus Contenu en mouvement Commander un billet d’avion avec un zoom à 200%
  29. 29. 4. structure, présentation, compréhension- Ne pas faire dépendre une information de la seule perception de la couleur, position ou forme. Titres de contenus- S’assurer d’un contraste suffisant pour les contenus ou fournir et listes un contenu alternatif suffisamment contrasté- Ne pas supprimer l’indication visuelle du focus (outline) ! Utilisation de CSS et agrandissement des tailles de police Nom Indication donnée par la Prénom couleur, contraste et focus Contenu en Indication donnée par la Tout savoir sur quoi ? mouvement couleur dans un menu et un formulaire
  30. 30. 4. structure, présentation, compréhension- S’assurer que l’utilisateur peut arrêter ou masquer les contenus en mouvements ou clignotants. Titres de contenus et listes Utilisation de CSS et agrandissement des tailles de police Indication donnée par la couleur, contraste et focus Contenu en mouvement Un diaporama automatiques doit pouvoir être arrêté
  31. 31. 5. compatibilité avec l’accessibilité- Utiliser un doctype et s’assurer que le code ne contient pas d’erreur- Respecter la sémantique du balisage HTML Flash, PDF… Javascript et ARIA Utilisation inapproprié d’un élément caption pour faire un texte d’aide dans unLe graal de l’intégrateur formulaire
  32. 32. 5. compatibilité avec l’accessibilité- S’assurer que les interfaces en Flash sont utilisables au clavier et correctement décrites aux technologies d’assistance- S’assurer que les documents PDF, Word, Open Office… HTML contiennent des contenus accessibles ou fournir une version alternative. Flash, PDF… Javascript et ARIA
  33. 33. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et Javascript et ARIA ARIA Brève introduction
  34. 34. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIA
  35. 35. 5. compatibilité avec l’accessibilitéPour HTML tout est défini dans les spécifications HTMLLe lecteur d’écran dispose de toutes les informations renvoyées parle navigateur et les adapte comme il le souhaite : Flash, PDF… Javascript et ARIA<a href=‘’> C’est super </a> Lien, c’est super<h1> C’est super </h1> Titre de niveau 1, c’est super<img src=‘’ alt=‘C’est super’ /> Graphique, c’est super<input type=‘submit’ Bouton, c’est supervalue=‘C’est super’ /> Case à cocher, cochée, c’est super
  36. 36. 5. compatibilité avec l’accessibilité HTML Avec Javascript Flash, PDF… Javascript et ARIA
  37. 37. 5. compatibilité avec l’accessibilité Problème pour l’utilisateur HTML Identifier – Utiliser - Comprendre Flash, PDF… Javascript et <div><span>0%</span>Volume 0% ARIA <div><a></a> </div></div> C’est quoi ce truc ? <div><span>0%</span>Volume 0% <div> <a></a> </div></div> Heu … <div><span> 48% </span>Volume 48% <div> <a></a> </div></div> Ha! bon …
  38. 38. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIAARIA utilise :1. Des attributs comme l’attribut role qui annonce le type du composant2. Des attributs comme valuenow qui permettent de communiquer l’état du composant3. Des modèles de conception (« Design pattern ») pour uniformiser le comportement et l’utilisation au clavier
  39. 39. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIA
  40. 40. 5. compatibilité avec l’accessibilité HTML Flash, PDF… Javascript et ARIA
  41. 41. 5. compatibilité avec l’accessibilité HTMLSi l’utilisation combiné de HTML, Javascript et ARIA donne lapossibilité de concevoir des interfaces très accessibles à l’image de Flash, PDF…ce qui peut se faire pour les logiciels cela nécessite néanmoins : Javascript et1. Que tout le monde fasse la même chose (design pattern) ARIA2. De stabiliser l’écosystème Web (la guerre des navigateurs actuelle n’est pas profitable au développement d’ARIA)3. De trouver les moyens d’informer l’utilisateur du fonctionnement des composants complexes4. De développer des méthodes de tests utilisateurs qui sont le seul moyen de s’assurer qu’une implémentation ARIA est réellement fonctionnelle. Source des démonstrations http://qelios.net/demo_aria/index.php
  42. 42. Merci de votre attentionQelios – Accessibilité Numérique http://qelios.net 04 68 85 25 42

×