Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Conférence Accessibilité web

167 views

Published on

Découvrez les enjeux de la création de sites web accessibles aux​ ​utilisateurs en situation d'handicap (visuel, motrice, cognitif mais aussi pour les séniors).

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Conférence Accessibilité web

  1. 1. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Accessibilité Web : l'objectif du « web pour tous »
  2. 2. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Accessibilité Web 10 et 20 % de la population est concernée *. Les principales défciences sont de trois types : ● Sensorielles ; ● Mentales ; ● Motrices. ● Et les séniors *L'enquête vie quotidienne et santé de l'INSEE de 2007 relève qu'une personne sur 10 déclare avoir un handicap, mais qu'une personne sur 5 est limitée dans ses activités.
  3. 3. LE RGAA Le RGAA a pour objectif d'encadrer l'accessibilité des contenus diffusés sous forme numérique. Dans sa version actuelle il constitue un référentiel de vérifcation du respect des standards internationaux WCAG 2 0. Il a pour objectif de proposer des critères et des tests vérifant que les règles d'accessibilité sont respectées. Il ne constitue pas une nouvelle norme ou un nouveau standard mais offre une méthodologie et un cadre opérationnel pour permettre la vérifcation de la mise en œuvre des standards internationaux d'accessibilité.
  4. 4. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André LE WCAG 2 Des travaux ont été engagés sur le plan international pour améliorer l'accessibilité des contenus web, avec l'initiative du groupe Web Accessibility Initiative - WAI lancée en 1996 par le World Wide Web Consortium (W3C). La WAI a édité les WCAG 1(05/1999) et ensuite 2 (12/2008) un guide des recommandations pour améliorer l'accessibilité des contenus web et utilisées comme référence technique pour le RGAA. Les WCAG 2.0 adoptent une approche thématique proposant 12 règles structurantes selon 4 principes fondamentaux : Principe 1 : Perceptif Principe 2 : Utilisable Principe 3 : Compréhensible Principe 4 : Robuste En savoir +
  5. 5. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 1.IMAGES Donner à chaque  image porteuse d'information  une  alternative textuelle  pertinente et une  description détaillée  si nécessaire. Lier les  légendes  à leurs images. Remplacer les  images textes  par du  texte stylé  lorsque c'est possible. Principe WCAG : Perceptible Mauvais exemple : Gouvernement Des images (nommée Graphique) avec des noms qui ne veulent rien dire. Exemple 23595934_127744127918676_17 383….(bloc Instagram) www.gouvernement.fr Auxiliaires des aveugles à Paris Image porteuse d'information sans texte alternatif, donc, invisible pour les non-voyants ! lesauxiliairesdesaveugles.asso.fr Bon exemple : Le Monde Des images bien commentées ! En plus, elles renvoient au détail de l’article dont le titre est en niveau 1 ! www.lemonde.fr <img class="edgtf-light-logo" src="http://www.polepixel.fr/wp- content/uploads/2016/11/logo-polepixel.png" alt="light logo"> ←  !!!!!
  6. 6. GOUVERNEMENT www.gouvernement.fr <div class="rowInstaFeed"><div class="instaCell"><a class="gallery1 cboxElement" rel="gal1" data="#InstaGouv Drapeaux en berne pour les victimes du terrorisme. #HommageNational #� #France #Matignon #Paris" href="//scontent.cdninstagram.com/vp/dad2636e1f45bd0f1e8d6561f645f8eb/5B58579A/t51.2885- 15/s640x640/sh0.08/e35/29415486_849188095282532_4439199156862451712_n.jpg"><img height="130" width="130" src="//scontent.cdninstagram.com/vp/dad2636e1f45bd0f1e8d6561f645f8eb/5B58579A/t51.2885- 15/s640x640/sh0.08/e35/29415486_849188095282532_4439199156862451712_n.jpg"></a></div><div class="instaCell"><a class="gallery1 cboxElement" rel="gal1" data="#InstaGouv Édouard Philippe et Elisabeth Borne visitent le chantier de la ligne 15 Sud à Champigny-sur-Marne. <!--ETC...--> </div></div>
  7. 7. Auxiliaires des aveugles à Paris http://www.lesauxiliairesdesaveugles.asso.fr <img id="comp-j7ak4p4timgimage" alt="" data-type="image" src="https://static.wixstatic.com/media/fc65ba_a6dda7fcd7504be0a494 2d9a9e735f50~mv2.jpg/v1/fll/w_1175,h_173,al_c,q_80,usm_0.66_1.00_ 0.01/fc65ba_a6dda7fcd7504be0a4942d9a9e735f50~mv2.jpg" style="width: 1175px; height: 173px; object-ft: cover;"> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  8. 8. Le Monde www.lemonde.fr <a href="#"> <h1 class="tt3 "> L’armée syrienne a repris le contrôle de la Ghouta <img width="644" height="322" src="img.jpg" alt="Des soldats syriens à l’est de Douma, dans la province de la Ghouta orientale, le 8 avril 2018." > </div> </a> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  9. 9. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 2. CADRES Donner à chaque  cadre en ligne  un  titre  pertinent. Principe WCAG : Robuste Outil pour augmenter le contraste des couleurs GloogleMaps SNAZZY Maps https://snazzymaps.com
  10. 10. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 3. COULEURS Bon exemple  : HandiTourisme Paca Permet l'utilisateur de modifer le contraste de la page www.handitourismepaca.fr Ne pas donner l'information  uniquement par la couleur et utiliser des  contrastes  de couleurs sufsamment élevés. Principe WCAG : Perceptible
  11. 11. Les couleurs informatives Voir le code Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Exemple de description d'un élément graphique : Les chatons en France ont les couleurs suivantes : 50% des chatons sont tigrés 20% des chatons sont gris 30% des chatons sont marrons
  12. 12. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 4. MULTIMÉDIA Bon exemple  : Ted http://www.ted.comDonner si nécessaire à chaque  média temporel  une  transcription textuelle, des  sous-titres synchronisés  et une  audiodescription  synchronisée pertinents. Donner à chaque  média non temporel  une alternative textuelle pertinente. Rendre possible le  contrôle de la consultation  de chaque  média temporel  et non-temporel au clavier et s'assurer de leur compatibilité avec les technologies d'assistance. Principe WCAG : Perceptible
  13. 13. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Mauvais exemple  : FranceInfo www.francetvinfo.fr Avec la barre d’espace, on peut arrêter la vidéo mais je n’arrive pas à la relancer  (Où trouver l’info) ! var buttonExample = document.getElementById('example- button'); // Exemple d'alternative au clic dans un menu déroulant: « keydown » buttonExample.addEventListener('key down', function(e) { if(e.keyCode && e.keyCode == 13) { toggleMenu(document.getElement ById('example-button-menu')); } }); buttonExample.addEventListener('cli ck', function(e) { toggleMenu(document.getElementById( 'example-button-menu')); });
  14. 14. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 5. TABLEAUX Mauvais exemple : TCL On navigue dans le tableau avec les touches Contrôle plus Alt plus fèches de direction mais, on n’a que les minutes et il faut se déplacer horizontalement pour réussir à entendre l’heure complète  ! www.tcl.fr Bon exemple  : NVDA  Tableau très lisible car on a même les titres des colonnes quand on circule dans ce tableau.  www.nvda-fr.org Donner à chaque  tableau de données complexe, un  résumé  et un  titre  pertinent, identifer clairement les cellules d'en- tête, utiliser un mécanisme pertinent pour lier les cellules de données aux  cellules d'en-tête. Pour chaque  tableau de mise en forme, veiller à sa bonne linéarisation. Principe WCAG : Perceptible
  15. 15. TCL www.tcl.fr Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Critère 5.3 [A] Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ? En savoir +
  16. 16. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 6. LIENS Mauvais exemple : FAAF (Fédération des Aveugles et Amblyopes de France) HAS (Haute Autorité de Santé) Sur la page d’accueil, il n’y a pas de ponctuation entre les liens et la lecture est moins claire. Idem également sur la page Nos action  ! www.aveuglesdefrance.org Bon exemple  : BrailleNet  Titre des liens explicites www.braillenet.org/ Donner des intitulés de lien  explicites, grâce à des informations de contexte  notamment, et utiliser le titre de lien  le moins possible. Principe WCAG : Perceptible
  17. 17. FAAF (Fédération des Aveugles et Amblyopes de France) www.aveuglesdefrance.org Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André La solution <a href="#block-menu" tabindex="1">Aller au menu</a> <a href="#main" tabindex="2">Aller au contenu</a> <a href="/contact" tabindex="3">Nous contacter</a>
  18. 18. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 7. SCRIPTS Mauvais exemple : HAS Il y a des liens «  Lire la suite  »  ! www.has-sante.fr Bon exemple  : Bootstrap On peut facilement faire défler les diapositives dans un sens ou dans l’autre. Voir un exemple Donner si nécessaire à chaque script une alternative pertinente. Rendre possible le contrôle de chaque code script au moins par le clavier et la souris et s'assurer de leur compatibilité avec les technologies d'assistance. Principe WCAG : Perceptible
  19. 19. Haute Autorité de Santé : www.has-sante.fr ERRATA : <li> <img src="hospitalisation_a_domicile.jpg " alt=""> <div class="description"> <p>HAD : La HAS a développé un outil pour les professionnels de santé</p> <a href="#">Lire la suite</a> </div> </li> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André SOLUTION : <li> <img src="hospitalisation_a_domicile.jpg" alt=""> <div class="description"> <a href="#">HAD : La HAS a développé un outil pour les professionnels de santé <span class= "btn">Lire la suite</span></a> </div> </li> Le lecteur d'écran peut naviguer de lien en lien. Un lien que contient uniquement l'information « Lire la suite » n'est pas explicite
  20. 20. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 8. ÉLÉMENTS OBLIGATOIRES Mauvais exemple : Sciences-u  :   <html xmlns="http://www.w3.org/1999/xhtml " xml:lang="fr"> En savoir + www.sciences-u-lyon.fr Bon exemple  : Fonds pour l’insertion des personnes handicapées Site labellisé AAA avec des landmarks (rôle) et balises sémantiques www.fphfp.fr Vérifer que chaque page web a un  code source valide  selon le  type de document, un  titre  pertinent et une indication de  langue par défaut. Vérifer que les balises ne sont pas utilisées  uniquement à des fns de présentation, que les changements de langues et de direction de sens de lecture sont indiqués. Principe WCAG : Perceptible
  21. 21. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 9. STRUCTURATION DE L'INFORMATION Utiliser des  titres, des  listes, des abréviations et des citations pour structurer l'information. S'assurer que la structure du document est cohérente. Principe WCAG : Perceptible Mauvais exemple : Olympique Lyonnais  : Sur la page de garde, il n’y a que des titres de niveaux 1. Cela ne refète pas une structuration de l’information  ! www.olweb.fr Bon exemple  : BLABLACAR L'accueil est bien structuré avec une bonne arborescence des titres, Les boutons sont bien placés. Pas de plan du site (mais quand c’est bien structuré, il n’y en a pas trop besoin !). www.blablacar.fr/
  22. 22. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 10. PRÉSENTATION DE L'INFORMATION Bon exemple  AVH Angoulême L'accueil du site est bien structurée  ! angouleme.avh.asso.fr Mauvais exemple Crédit Agricole Le bandeau cookie est au milieu de la page au niveau de la structure html... ca-centrest.fr Utiliser des  feuilles de styles  pour contrôler la  présentation de l'information. Vérifer l'effet de l'agrandissement des  taille des caractères  sur la lisibilité. S'assurer que les liens sont correctement identifables, que la  prise de focus  est signalée, que l'interlignage est sufsant et donner la possibilité à l'utilisateur de contrôler la justifcation des textes. S'assurer que les textes cachés sont  correctement restitués  et que l'information n'est pas donnée uniquement par la forme ou la position d'un élément. Principe WCAG : Perceptible
  23. 23. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 11. FORMULAIRES Associer pour chaque formulaire chacun de ses  champs  à son  étiquette, grouper les champs dans des  blocs d'informations de même nature, structurer les  listes de choix  de manière pertinente, donner à chaque  bouton  un intitulé explicite. Vérifer la présence d'aide à la saisie, s'assurer que le  contrôle de saisie  est accessible et que l'utilisateur peut contrôler les données à caractère fnancier, juridique ou personnel. Principe WCAG : Perceptible Mauvais exemples  Mon Devis Fenêtre Il s'agit d'un formulaire sans label ou aucune corrélation entre les champs www.mon-devis-fenetres.fr: Bon exemple Les formulaires faits avec Bootstrap Voir un exemple
  24. 24. Devis Fenêtres : https://www.mon-devis-fenetres.fr ERRATA : <form> <input type="hidden" id="INPUT_typedefenetre" name="typedefenetre"> <div id="typedefenetre"> <img class="img- responsive center-block" src="images/pvc.jpg"> </div> </form> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  25. 25. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 12. NAVIGATION Faciliter la navigation dans un  ensemble de pages  par au moins deux  systèmes de navigation  différents ( menu de navigation,  plan du site  ou  moteur de recherche), un fl d'Ariane et l'indication de la page active dans le menu de navigation. Identifer les groupes de liens importants et la  zone de contenu  et donner la possibilité de les  éviter par des liens de navigation interne. S'assurer que l'ordre de tabulation  est cohérent et que la page ne comporte pas de piège au clavier. Principe WCAG : Utilisable Bons exemples Gouvernement Liens rapides en header pour y accéder directement au contenu et menu http://www.gouvernement.fr Gouvernement – Solidarité Leur plan du site est bien fait www.solidarites-sante.gouv.fr
  26. 26. GOUVERNEMENT : www.gouvernement.fr <div id="liens-acces-rapide"> <a href="/accueil-gouvernementfr#content" tabindex="1">Aller au contenu</a> <a href="/accueil-gouvernementfr#search-block-form" tabindex="2">Aller à la recherche</a> <a href="/accueil-gouvernementfr#nav" tabindex="3">Aller au menu</a> </div> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  27. 27. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André 13. CONSULTATION Vérifer que l'utilisateur a le contrôle des  procédés de rafraîchissement, des  changements brusques de luminosité, des ouvertures de nouvelles fenêtres et des  contenus en mouvement ou clignotants. Indiquer lorsqu'un contenu s'ouvre dans une nouvelle fenêtre et donner des informations relatives à la consultation des fchiers en téléchargement. Ne pas faire dépendre l'accomplissement d'une tâche d'une limite de temps sauf si elle est essentielle et s'assurer que les données saisies sont récupérées après une interruption de session authentifée. S'assurer que les expressions inhabituelles et le jargon sont explicités. Proposer des  versions accessibles  ou rendre accessibles les documents en téléchargement. Principe WCAG : Perceptible Les autorités américaines ont interpellé un homme soupçonné d'avoir provoqué la crise d'épilepsie d'un journaliste en lui envoyant un message sur Twitter avec une lumière stroboscopique pour le punir de ses critiques visant Donald Trump. Publié le 18/03/2017 à 22:44 Par Le Figaro.fr avec AFP
  28. 28. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André LES ARIAS ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA) ARIA est une surcouche sémantique à par- dessus un langage existant tel que HTML, SVG, XML, etc. Il se compose de rôles, d’états et de propriétés. EX : une case à cocher pourra avoir un état non coché (aria-checked="false") qui sera modifé ultérieurement via javascript pour être passé à coché (aria-checked="true"). <span id="check" role="checkbox" aria- checked="false">Choix 1</span> Le rôle : affecte une valeur sémantique à un élément afn de décrire son contenu. Les propriétés et les états : Les propriétés et les états correspondent à des attributs comme l’attribut id ou class sur un élément HTML. Ce sont des valeurs que l’on vient appliquer à un élément pour lui permettre de renvoyer des informations spécifques. Liste des ARIAS
  29. 29. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Role En savoir plus <form action="#" method="post"> <div role="search"> <label for="search">Rechercher</label> <input type="search" id="search" aria- describedby="search-help"> <div id="search-help">Recjercher votre produit dans notre magnifque catalogue</div> <button type="submit">Go</button> </div> </form> INCORRECT : <div role="radioGroup">...</div> <div role="RADIOGROUP">...</div> <a href="home/" aria-current="Page">home</a> <form action="#" method="post"> <div role="search"> <label for="search">Rechercher</label> <input type="search" id="search" aria- describedby="search-help"> <div id="search-help">Recjercher votre produit dans notre magnifque catalogue</div> <button type="submit">Go</button> </div> </form> <div role="radiogroup">...</div> <a href="home/" aria- current="page">home</a>
  30. 30. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Les propriétés et les états <img alt="chien" aria-describedby="mydog" src="monchien.jpg" /> <div id="mydog">ici la description complète de mon chien</div> <!--Avant la validation Javascript--> <label for="codepostale">Code postal*</label><input type="text" value="" id="codepostale" aria-required="true" aria-invalid="false"/> <!--Après la validation Javascript--> <label for="codepostale">Code postal*</label><input type="text" value="" id="codepostale" aria-required="true" aria-invalid="true"/> -------- <div id="xxx">description du fonctionnement du menu</div> <ul aria-describedby="xxx" role="menubar" aria-controls="yyy"> <li role="menuitem">ouvrir</li> <li role="menuitem">édition</li> </ul> <div id="yyy">partie du contenu sur lequel s’applique les actions du menu</div>
  31. 31. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Les propriétés et les états <img aria-grabbed="false" alt="Glissez l’image" src="xxx"/> <div aria-dropeffect="copy"></div> <img aria-grabbed="true" alt="Déposez l’image" src="xxx"/> <div aria-dropeffect="copy"></div> <img aria-grabbed="false" alt="Glissez une nouvelle image" src="xxx"/> <div aria-dropeffect="copy"><img aria-grabbed="false" alt="Retirer l’image" src="xxx"/></div>
  32. 32. Références RGAA : Référentiel Général D'accessibilité Pour Les Administrations https://references.modernisation.gouv.fr/rgaa-accessibilite/introduction-RGAA.html https://references.modernisation.gouv.fr/rgaa-accessibilite/ https://references.modernisation.gouv.fr/rgaa-accessibilite/guide-accompagnement-RGAA.html WCAG 2 http://www.w3.org/Translations/WCAG20-fr https://www.w3.org/WAI/WCAG20/quickref/ http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/intro.html Braille Net : http://www.braillenet.org/ Niveaux d'accessibilité - méthodologie de vérifcation https://references.modernisation.gouv.fr/421-niveaux-de-conformite-aux-normes-daccessibilite-0 http://wiki.accede-web.com/notices/graphique-ergonomique/grille-de-correspondances-wcag-accessiweb-rgaa Synthèse des 13 critères du RGAA version 2017 une  méthodologie pas à pas pour faire un audit RGAA  ; un  guide intégrateur  un  guide développeur  un  guide concepteur  un  guide décideur  un  guide contributeur  un  guide lecteur d’écran  : évaluer l’accessibilité à l’aide d’un lecteur d’écran un  guide impacts utilisateurs  : piqûre de rappel sur l’impact utilisateur de chaque critère une  étude de l’accessibilité des principales bibliothèques JavaScript. Il ne s’agit pas juste d’un état des lieux, il y a également les corrections qui sont disponibles Logiciels de lecture d'écran : NVDA (pour PC : http://www.certam-avh.com/content/nvda-0) ou VoiceOver (Pour Mac - aller sur Préférences / Accessibilité / activer VoiceOver) Validateurs : https://validator.w3.org/ http://wave.webaim.org/ magazineduwebdesign.com
  33. 33. Bonus Balise CSS3 Speechs : https://www.w3.org/TR/css3-speech/#css-values Remplace l'ancienne balise CSS2 https://www.w3schools.com/cssref/css_ref_aural.asp Rétablissons l'outline https://openweb.eu.org/articles/retablissons-l-outline Signaler le focus améliore la navigation http://romy.tetue.net/signaler-le-focus-ameliore-la-navigation Funkify | Disability simulator http://www.funkify.org/ Liste de sites labellisés http://accessiweb.org/index.php/galerie.html Exemple de page Aide http://www.handitourismepaca.com/paca/aide.asp
  34. 34. Auxiliaires des aveugles à Lyon http://www.lesauxiliairesdelyon.fr La balise alt parfaite : <img src="logo_auxiliaires.jpg" alt="Logo de l'association sur un fond bleu portant le nom de l'association et, en stylisé les silouettes d'un non-voyant accompagné de son auxiliaires."> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  35. 35. Le Monde www.lemonde.fr Exemple d'un contenu éditorial dans une balise sémantique <figure> : <figure role="group"> <img src="…" alt="Occupation de l'université de Tolbiac. Ici le 5 avril. [photo 1]" /> <figcaption> Photo 1 : Une mobilisation nationale est organisée mardi. Une quinzaine d’universités, sur un total de 70, font l’objet de blocages. </figcaption> </figure> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Le texte de remplacement de l’image (l’alt pour la balise <img>) doit contenir une référence à la légende correspondante (balise <figcaption>). Ex : [photo 1]
  36. 36. Libération – les images svg www.liberation.fr <a href="http://www.liberation.fr/direct/" class="button v-centered js-nav- live-button" (on ajoute un title dans le lien) title= "Lire l'information en direct"> <span class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="26" height="22" viewBox="0 0 26 22"> (ou un <title> à intérieur du svg : ) <title>Lire l'information en direct</title> <path class="stroke-anim" stroke="#000" stroke-width="2" stroke- miterlimit="10" d="M15.5 8c.7-1 2-2 4-2 3 0 5 2.1 5 5s-2.1 5-5 5c-3.3 0-5- 2.1-6.5-5s-3.2-5-6.5-5c-2.9 0-5 2.1-5 5s2 5 5 5c2 0 3.2-.9 4-2" fll="none"></path> </svg> </span> </a> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  37. 37. GOUVERNEMENT www.gouvernement.fr <div class="contenu-social "> L’agenda prévisionnel du Premier ministre @EPhilippePM, mercredi 6 au samedi 9 décembre 2017 est en ligne <a href="https://t.co/RD4fHUGseY">https://t.co/RD4fHUGseY</a> <a href="https://t.co/me0kd267a9">https://t.co/me0kd267a9</a> </div> <div class="tweetImg"> <div class="image-cropper"> <a class="tweet-link" data- href="https://pbs.twimg.com/media/DQTcwt9X4AAlKeV.jpg" href=""> <img class="imgSocial centered" src="https://pbs.twimg.com/media/DQTcwt9X4AAlKeV.jpg" /> </a> </div> </div> NOT OK
  38. 38. TCL : http://www.tcl.fr ERRATA : <div class="desclong-toggle" rel="#descriptionlongue"> <div class="label">&gt; Version texte de l'infographie</div> .desclong-toggle:hover { cursor: pointer; } .desclong-toggle .label:hover { text-decoration: underline; } ERRATA (image redondante) : <img src="/var/tcl/storage/images/media/lib rairie/type-de-ligne/met/9401-11-fre- FR/MET.png" width="30" height="23" alt="Métro"> <img src="/var/tcl/storage/images/me- deplacer/toutes-les-lignes/a/8692-7-fre- FR/A.png" width="23" height="23" alt="Métro ligne A: Perrache.Vaulx-en- Velin La Soie"> SOLUTION : Cacher quelques images avec aria- hidden="true". <img src="/var/tcl/storage/images/media/lib rairie/type-de-ligne/met/9401-11-fre- FR/MET.png" width="30" height="23" alt="Métro" aria-hidden="true">
  39. 39. TCL : http://www.tcl.fr ERRATA : <div class="desclong-toggle" rel="#descriptionlongue"> <div class="label">&gt; Version texte de l'infographie</div> .desclong-toggle:hover { cursor: pointer; } .desclong-toggle .label:hover { text-decoration: underline; } ERRATA (navigation confuse) SOLUTION : 1) Utilisation de la balise tabindex L'attribut universel tabindex est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche Tab). En savoir plus : MDN web docs 2) On vide le alt Exemple : <tr> <td colspan="2" class="COL-5" tabindex= "-1"> <img src="picto-marche.png" alt="" width="24" height="24"> <img src="picto-attendre.png" alt="Attente" width="24" height="24"> <td colspan="2" class="COL-6" tabindex= "1">Marcher 2 min (120m) + Attendre 3 min</td> </tr> Et bonus : Les balises thead, tfoot et tbody peuvent aussi améliorer l'accessibilité de la page, en permettant aux navigateurs non graphiques de restituer les tableaux d'une manière plus facile à lire ou à entendre. Exemple : https://www.nvda-fr.org/doc/keyCommands.html TABINDEX ● Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ; ● 0 : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défni par la plateforme, généralement selon l'ordre des éléments du DOM ; ● Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défni par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant. Source : MDN web docs
  40. 40. GOUVERNEMENT : La politique du handicap, une priorité du quinquennat ERRATA (la version texte n'est pas visible dans une navigation par liens ou titres. Ce type de navigation est très courant pour les utilisateurs de lecteur d'écran – malvoyants, non-voyants) : <div class="desclong-toggle" rel="#descriptionlongue"> <div class="label">&gt; Version texte de l'infographie</div> .desclong-toggle:hover { cursor: pointer; } .desclong-toggle .label:hover { text-decoration: underline; } NOT OK
  41. 41. GOUVERNEMENT : La politique du handicap, une priorité du quinquennat SOLUTION : <div class="desclong-toggle" rel="#descriptionlongue"> <div class="label"><a href= "#" > &gt; Version texte de l'infographie</a></div> OU <div class="label"><h3> &gt; Version texte de l'infographie</h3></div>
  42. 42. Pôle Pixel : www.polepixel.fr/services/ <div class="edgtf-info-card-holder"> <div class="edgtf-info-shader"> <div class="edgtf-image-1" style="background-image: url(http://www.polepixel.fr/wp- content/uploads/2016/11/servicesv3.png)"></div> <div class="edgtf-image-2" style="background-color: #f9668d "></div> </div> <a href="http://www.polepixel.fr/services/services-aux-residents/" target="_blank"></a> <div class="edgtf-info-card-holder-inner"> <div class="edgtf-info-card-icon-holder"> <span class="edgtf-icon-shortcode normal "> <i class="edgtf-icon-font-awesome fa edgtf-icon-element" style=""></i> </span> </div> <div class="edgtf-info-card-title-holder"> <h3 style="color: #000000">Service aux résidents</h3> </div> <div class="edgtf-info-card-text-holder"> <p style="color: #000000">Le Pôle PIXEL propose une large gamme de services pour les entreprises résidentes.</p> </div> </div> </div> NOT OK
  43. 43. Pôle Pixel : www.polepixel.fr/services/ SOLUTION : La navigation avec un lecteur d'écran peut se faire à travers des titres et liens. Un lien doit donc impérativement contenir une information explicite. Un lien vide va être lu en format permalien (ex : services-aux- residents) <h3 style="color: #000000">Service aux résidents</h3> <a href="http://www.polepixel.fr/services/services-aux-residents/" target="_blank"><p style="color: #000000">Le Pôle PIXEL propose une large gamme de services pour les entreprises résidentes.</p></a> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  44. 44. La Redoute, les liens vides sont lus par les lecteurs d'écran ! www.laredoute.fr <li style="position:relative" id="zsa2"> <a style="position:absolute;display:block;left: 885px;top: 590px;width: 295px;height: 30px;z-index:10;" href="/boutique-noel-ah2017.aspx#opeco=hp:zsa2:avant_noel_pap:ah17s49" title="boutique de noel"></a><div class="fnFloat"></div> </li> Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André
  45. 45. Meetup Accessibilité Web : l'objectif du « web pour tous » par François Yon et Vanessa Sant'André Merci !

×