WCAG 2.0, Flash, PDF, Javascript sont dans un bateau...

3 263 vues

Publié le

Publié dans : Technologie
1 commentaire
8 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
3 263
Sur SlideShare
0
Issues des intégrations
0
Intégrations
26
Actions
Partages
0
Téléchargements
28
Commentaires
1
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Penser à présenter rapidement Temesis et Atalan
  • Lors de la précédente édition de Paris Web, les WCAG 1.0 étaient encore la recommandation officielle. Depuis, le 11 décembre 2008, c'est désormais la seconde version de ce référentiel qui fait office de recommandation officielle. Plusieurs mois se sont écoulés, j'espère que vous en avez profitez pour vous renseigner sur le sujet, les WCAG ont été traduits en français, les articles sur le Web sont nombreux...
  • Présentation des WCAG. 4 principes, 13 recommandations, 56 critères Perceptible (perçu par les sens), utilisable (utilisé et simplement), compréhensible (qui peut être compris, langue, jargon, ...), robuste (compatible avec les technos présentes et futures). = fondations garantissant l'accessibilité
  • Concepts ouverts pour répondre aux besoins d'accessibilité sans être spécifique à une technologie (comme seulement HTML/CSS). Référentiel applicable à de nombreuses technologies existantes ou futures. C'est un des grands changements avec les WCAG 1.0.
  • C'est cet aspect que nous allons traiter, notamment en vous parlant de l'accessibilité des technos Flash, PDF, Javascript, AJAX et rapidement quelques autres.
  • Critique : cela en fait un document très complexe à appréhender, surtout pour un technicien dans le document principalement ne traite pas de technos.
  • Heureusement beaucoup de documents, appelés documents d'accompagnement : présentation rapide de la structure ? Principes (document principal) - Règles (idem) – Critères de succès (accompagnement) – techniques suffisantes et techniques recommandées (accompagnement) – Glossaire Nous ne traiterons pas dans le détail les WCAGs, nous n'aurions pas le temps. Nous vous conseillons de nombreuses ressources, que vous trouverez dans notre support de présentation.
  • c'est ce que veut mon client, c'est ce que je connais, parce que je peux pas le faire avec autre chose, parce que comme le dirait Adobe Flash c'est trop IN web 2.0, rich media, RIA, tout ça
  • Accessible depuis flash player 6, utilisable au clavier, compatible aides techniques (rôle, name, state) , composant natif plus ou moins accessible si accessibilité activé dans flex, travail avec nvda
  • Dans Flash professionnal -> panneau accessibilité pour alternative texte aux boutons, clip, etc, contrôle de l'ordre de tabulation, étiquettage automatique -> tout faisable par script aussi (guideline 1,1) this.mon_btn.accessibilityProperties= new AccessibilityProperties(); this.mon_btn.accessibilityProperties.name = “votre alternative texte”; http://www.paciellogroup.com/blog/misc/adobe/flash/samples/basic_sample.html
  • Composant par défaut utilisable au clavier sinon faisable à la main et tabindex (tabenabled, tabchildren) (tout les élément sur la scene) (guideline 2,1) http://www.paciellogroup.com/blog/misc/adobe/flash/samples/basic_sample.html
  • Pour soutitrage il y a FLVPlayback et FLVPlaybackCaptionning component, support format DFXP(guideline 1,2) http://www.paciellogroup.com/blog/misc/adobe/flash/samples/accessiblevideo/index.html#/0:00.00/
  • Capacité vectorielle de flash permet de satisfaire personnalisé l'interface (zoom, contraste, taille texte, couleur, etc) et contrôle du son (guideline 1,4) http://www.paciellogroup.com/blog/misc/adobe/flash/samples/flash_css_switcher/news_storyLink.html http://www.creaturediscomforts.org/play/?v=8 https://www.secure.bnpparibas.net/banque/portail/particulier/HomeConnexion?type=homeconnex&identifiant=secure_bnpparibas_net_20021206152735&typeIdent=accessible&typeFlashAccessible=2 http://www.eduplace.com/kids/sv/books/content/wordsort/?g=1#grade1 http://www.doodledoo.com/accessibility/games/Matching.html
  • Javascript a été souvent présenté comme enemi de l’accessibilité, wcag 2.0 change la donne, autorise désormais à ne pas avoir d’alternative si les scripts employés sont accessible cf script non obstrusif et fait également partie des techniques permettant de satisfaire certain critère de succès (cf agrandissement caractère via js qui modifie taille) exemple de menu déroulant accessible http://www.vie-publique.fr/ et non accessible, exemple de fenetre modale pas accessible qd navigation clavier
  • Aria est une spec en working draft qui permet de rajouter une couche d’information utile voir indispensable aux personnes handicapés qu’il n’était pas possible d’avoir jusqu’alors. Il y a 3 trucs principaux des roles -> fonction cf xhtml2 role, des états (donne info sur la statue d’une élément cliqué ou pas, désactivé ou pas, qui peut varier dans le temps) et des propriétés = infos. Ça permet de corriger ou améliorer des application existante cd Social Accessibility Project IBM, http://www.accessibletwitter.com/, Bien géré par ie8, FF, safari et opéra T en cours. Permet notamment d’avertir l’utilisateur en cas de mis à jour d’une zone de la page
  • (discussion salle emploi des librairies, lesquelles, pourquoi ?) Les librairies javascript prennent de plus en plus en compte l’accessibilité nativement dans leur composants tout fait : Glow, jquery 1.7UI, ExtJs, GWT, Dojo, Fluid, YUI http://finance.yahoo.com/currency-converter#from=USD;to=EUR;amt=1,
  • Les technologies de l'info sont là pour faciliter la vie de l'internaute, pour expérimenter, découvrir, créer, apprendre, s'amuser. L'accessibilité n'est pas un frein à tout cela, c'est une opportunité, une opportunité de se creuser les méninges (icône cerveau, telecommande, escalator) de concevoir de nouvelles solutions au bénéfices multiples.
  • Ils ne font pas exception car ils ne peuvent plus faire exception Silverlight, HTML5, les librairies JS (dojo, jquery,etc) intègre tous nativement des composant accessibles, ouverture sur exemple bookreader daisy silverlight, tag video http://www.annodex.net/~silvia/itext/elephant_with_skin.html http://www.buttercupreader.net/ http://betalabs.nokia.com/apps/nokia-braille-reader
  • Ils ne font pas exception car ils ne peuvent plus faire exception Silverlight, HTML5, les librairies JS (dojo, jquery,etc) intègre tous nativement des composant accessibles, ouverture sur exemple bookreader daisy silverlight, tag video http://www.annodex.net/~silvia/itext/elephant_with_skin.html http://www.buttercupreader.net/ http://betalabs.nokia.com/apps/nokia-braille-reader
  • WCAG 2.0, Flash, PDF, Javascript sont dans un bateau...

    1. 1. WCAG2.0, Flash, PDF, Javascript sont dans un bateau... Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    2. 2. Présentations Sébastien Delorme Aurélien Levy Atalan Temesis
    3. 3. WCAG 2.0 – introduction Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    4. 4. WCAG 2.0 – 4 principes Perceptible Fondations garantissant l'accessibilité ! UtilisaBlE CompréhensiblE Robuste Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    5. 5. WCAG 2.0 – Règles et critères Répondre aux besoins de l'accessibilité sans être spécifique à une technologie Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    6. 6. Wcag 2.0 – Flash, PDF, js, … Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    7. 7. Comment ça, complexe ??? Wcag 2.0 12 recommandations 4 principes 12 règles Techniques suffisantes Déclaration de conformité (partielle ?) 56 critères de succès A, Aa ou aaa Techniques recommandées Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    8. 8. WCAG 2.0 – les documents flash, pdf Javascript ? Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    9. 9. Flash Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    10. 10. Flash mais pourquoi ? Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    11. 11. Flash pas accessible ? Flash player 6 Script jaws Composants natifs Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    12. 12. Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! G1.1/WCAG2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    13. 13. Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! gestion du focus Tabenabled, tabchildren ! Tous les éléments G2.1/WCAG2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    14. 14. Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! G1.2/WCAG2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    15. 15. Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Flash c’est accessible! Zoom Taille du texte Couleur, typo, etc… G1.4/WCAG2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    16. 16. pdf Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    17. 17. Pdf - exemples équivalents textuels G1.1/WCAG2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    18. 18. Pdf - exemples structure et relations (balisage) s.c1.3.1/WCAG2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    19. 19. Pdf - exemples ordre de lecture s.c1.3.2/WCAG2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    20. 20. Pdf - exemples entêtes de section langue principale S.C2.4.10/WCAG2.0 et langue de passages S.C3.1.1/wcag2.0 S.C3.1.2/wcag2.0 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    21. 21. Pdf - démonstration Adobe Acrobat pro 9 Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    22. 22. Pdf – balisage depuis vos outils de création : Open-office, ms office inDesign, xpress, … API Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    23. 23. javascript ange ou démon ? Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    24. 24. ARIA Role (ex: role="button" ) Etats (ex: aria-pressed="true" ) propriété (ex: aria-labelledby) Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    25. 25. Librairies javascript Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    26. 26. Et les autres ? Innovation ! Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    27. 27. Et les autres ? Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    28. 28. Aller plus loin Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    29. 29. Des questions ? 0/20 Sébastien Delorme Aurélien Levy Atalan Temesis
    30. 30. crédits Photos, merci à : Vix B http://www.flickr.com/photos/vix_b/ Boltron http://www.flickr.com/photos/boltron/ Mathieu Drouet http://www.takeasip.net/ Police d'écriture Arsenale White : Jonathan Calugi, Francesco Canovaro, Cosimo Lorenzo Pancini, Andrea Mi, Debora Manetti, Katiuscia Mari http://www.dafont.com/arsenale-white.font Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    31. 31. Tout plein de ressources, et C'est cadeau ! Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    32. 32. Ressources – WCAG 2.0 WCAG 2.0 (en anglais) : http://www.w3.org/TR/WCAG/ WCAG 2.0 (en français) : http://www.w3.org/Translations/WCAG20-fr/ The WCAG 2.0 documents : http://www.w3.org/WAI/intro/wcag20 Migrate from WCAG 1.0 to WCAG 2.0 : http://wipa.org.au/papers/wcag- migration.htm Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    33. 33. Ressources – flash Guide des bonnes pratiques Flash : http://www.adobe.com/resources/accessibility/best_practices/best_practices_ acc_flash.pdf Guide des bonnes pratiques Flex : http://www.adobe.com/accessibility/products/flex/best_practices.html Tutoriaux : http://www.adobe.com/accessibility/products/flash/tutorial/ Focus sur un flash dans Firefox (blog accessibilité Adobe) : http://blogs.adobe.com/accessibility/2009/04/firefox_focus_and_actual_links_ 1.html Composants natifs accessibles : http://www.adobe.com/accessibility/products/flex/components.html Scripts Jaws : http://www.adobe.com/accessibility/products/flex/jaws.html Animations Flash accessibles : http://www.doodledoo.com/accessibility.htm Blog sur Flash et accessibilité : http://niquimerret.com/ Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    34. 34. Ressources – flash (démos) Basic Flash accessibility example : http://www.paciellogroup.com/blog/misc/adobe/flash/samples/basic_sample.h tml Accessible Flash video example : http://www.paciellogroup.com/blog/misc/adobe/flash/samples/accessiblevideo /index.html#/0:00.00/ Flash CSS switching example : http://www.paciellogroup.com/blog/misc/adobe/flash/samples/flash_css_switc her/news_storyLink.html Ads with sign language : http://www.creaturediscomforts.org/play/?v=8 Clavier virtuel BNP Paribas : https://www.secure.bnpparibas.net/banque/portail/particulier/HomeConnexion?type=homeconnex&i dentifiant=secure_bnpparibas_net_20021206152735&typeIdent=accessible&typeFlashAccessible=2 Houghton Mifflin Spelling and Vocabulary > Word Sort : http://www.eduplace.com/kids/sv/books/content/wordsort/?g=1#grade1 Animal babies matching game : http://www.doodledoo.com/accessibility/games/Matching.html Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    35. 35. Ressources – pdf Accessibility Webinar on Flash and PDF : http://blogs.adobe.com/accessibility/2009/03/accessibility_webinars_on_flas_ 1.html Adobe Acrobat Pro 9, accessibilité, balises et redistribution : http://help.adobe.com/fr_FR/Acrobat/9.0/3D/WS58a04a822e3e50102bd6151 09794195ff-7d32.w.html InDesign accessibility best practices : http://blogs.adobe.com/accessibility/2009/07/indesign_accessibility_best_pr.h tml Bonnes pratiques pour l'accessibilité des documents PDF : http://www.accessiweb.org/_repository/files/AccessiWeb_bonnes_pratiques_p df_accessibles_5mars2009.pdf Créer des documents Word accessibles (puis générer des PDF accessibles) : http://www.microsoft.com/downloads/details.aspx?FamilyID=cabba7da-4e34- 4ffc-ac3b-596110cf9bc9&DisplayLang=fr Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    36. 36. Ressources – pdf (démos) Rapport d'activités SFR 2008 : http://www.sfr.com/fileadmin/mes_documents/pdf/publications/090721_RADD _2008_accessible_newpages51_76.pdf Cahier développement durable SFR 2008 : http://www.sfr.com/fileadmin/mes_documents/pdf/publications/SFR_CahierD D2008_accessible.pdf Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    37. 37. Ressources – javascript Code Talks : http://wiki.codetalks.org/wiki/index.php/Main_Page WAI ARIA : http://www.w3.org/TR/wai-aria/ Démonstrations : Menu déroulant : http://www.vie-publique.fr Accessible Twitter : http://www.accessibletwitter.com Currency converter Yahoo! : http://finance.yahoo.com/currency- converter#from=USD;to=EUR;amt=1 Search Yahoo! : http://search.yahoo.com/ Site modules pour Firefox : https://addons.mozilla.org/fr/firefox Sébastien Delorme - Aurélien Levy - 09 octobre 2009
    38. 38. Ressources - autres HTML 5 Experiment with video accessible : http://www.annodex.net/~silvia/itext/elephant_with_skin.html Silverlight Digital talking book reader : http://www.buttercupreader.net/ Autres Nokia Braille Reader : http://betalabs.nokia.com/apps/nokia-braille-reader Sébastien Delorme - Aurélien Levy - 09 octobre 2009

    ×