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. Wcag 2.0 – Flash, PDF, js, …
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
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. WCAG 2.0 – les documents
flash, pdf
Javascript ?
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
17. Pdf - exemples
équivalents textuels
G1.1/WCAG2.0
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
18. Pdf - exemples
structure et relations (balisage)
s.c1.3.1/WCAG2.0
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
19. Pdf - exemples
ordre de lecture
s.c1.3.2/WCAG2.0
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
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. Pdf - démonstration
Adobe Acrobat
pro 9
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
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. javascript ange ou démon ?
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
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
29. Des questions ?
0/20
Sébastien Delorme Aurélien Levy
Atalan Temesis
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. Tout plein de ressources,
et C'est cadeau !
Sébastien Delorme - Aurélien Levy - 09 octobre 2009
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. 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. 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. 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. 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. 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. 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
Notes de l'éditeur
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
