wcag 2.0, flash, pdf, javascript sont dans un bateau

38
WCAG2.0, Flash, PDF, Javascript sont dans un bateau... Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Upload: sebastien-delorme

Post on 04-Dec-2014

4.086 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

WCAG2.0, Flash, PDF, Javascriptsont dans un bateau...

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 2: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

PrésentationsSébastien Delorme

Atalan

Aurélien Levy

Temesis

Page 3: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

WCAG 2.0 – introduction

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 4: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

WCAG 2.0 – 4 principesPerceptibleUtilisaBlECompréhensiblERobuste

Fondations garantissant l'accessibilité !

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 5: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

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

Page 6: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Wcag 2.0 – Flash, PDF, js, …

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 7: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

4 principes 12 recommandations12 règles

56 critères de succès A, Aa ou aaa

Techniquessuffisantes Déclaration de conformité

(partielle ?)

Techniques recommandées

Wcag 2.0Comment ça, complexe ???

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 8: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

WCAG 2.0 – les documentsflash, pdfJavascript ?

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 9: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Flash

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 10: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Flash mais pourquoi ?

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 11: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Flash pas accessible ?Flash player 6Script jawsComposants natifs

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 12: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

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

Page 13: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

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 focusTabenabled, tabchildren! Tous les éléments G2.1/WCAG2.0

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 14: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

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

Page 15: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

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!

ZoomTaille du texteCouleur, typo, etc… G1.4/WCAG2.0

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 16: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

pdf

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 17: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Pdf - exempleséquivalents textuels

G1.1/WCAG2.0

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 18: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Pdf - exemplesstructure et relations (balisage)

s.c1.3.1/WCAG2.0

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 19: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Pdf - exemplesordre de lecture

s.c1.3.2/WCAG2.0

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 20: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Pdf - exemplesentêtes de sectionlangue principale

et langue de passagesS.C2.4.10/WCAG2.0S.C3.1.1/wcag2.0S.C3.1.2/wcag2.0

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 21: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Pdf - démonstration

Adobe Acrobat pro 9

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 22: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Pdf – balisagedepuis vos outils de création :

Open-office, ms officeinDesign, xpress, …API

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 23: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

javascript ange ou démon ?

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 24: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

ARIARole (ex: role="button" )

Etats (ex: aria-pressed="true" )

propriété (ex: aria-labelledby)

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 25: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Librairies javascript

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 26: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Et les autres ?

Innovation !

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 27: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Et les autres ?

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 28: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Aller plus loin

- 09 octobre 2009Sébastien Delorme - Aurélien Levy

Page 29: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

0/20Des questions ?

Sébastien Delorme

Atalan

Aurélien Levy

Temesis

Page 30: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

créditsPhotos, 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 Marihttp://www.dafont.com/arsenale-white.font

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 31: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Tout plein de ressources,et C'est cadeau !

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 32: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Ressources – WCAG 2.0WCAG 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/wcag20Migrate 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

Page 33: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Ressources – flashGuide des bonnes pratiques Flash : http://www.adobe.com/resources/accessibility/best_practices/best_practices_acc_flash.pdfGuide des bonnes pratiques Flex : http://www.adobe.com/accessibility/products/flex/best_practices.htmlTutoriaux : 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.htmlComposants natifs accessibles : http://www.adobe.com/accessibility/products/flex/components.htmlScripts Jaws : http://www.adobe.com/accessibility/products/flex/jaws.htmlAnimations Flash accessibles : http://www.doodledoo.com/accessibility.htmBlog sur Flash et accessibilité : http://niquimerret.com/

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 34: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Ressources – flash (démos)Basic Flash accessibility example : http://www.paciellogroup.com/blog/misc/adobe/flash/samples/basic_sample.htmlAccessible 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_switcher/news_storyLink.htmlAds with sign language : http://www.creaturediscomforts.org/play/?v=8Clavier virtuel BNP Paribas : https://www.secure.bnpparibas.net/banque/portail/particulier/HomeConnexion?type=homeconnex&identifiant=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#grade1Animal babies matching game : http://www.doodledoo.com/accessibility/games/Matching.html

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 35: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Ressources – pdfAccessibility Webinar on Flash and PDF : http://blogs.adobe.com/accessibility/2009/03/accessibility_webinars_on_flas_1.htmlAdobe Acrobat Pro 9, accessibilité, balises et redistribution : http://help.adobe.com/fr_FR/Acrobat/9.0/3D/WS58a04a822e3e50102bd615109794195ff-7d32.w.htmlInDesign accessibility best practices : http://blogs.adobe.com/accessibility/2009/07/indesign_accessibility_best_pr.htmlBonnes pratiques pour l'accessibilité des documents PDF : http://www.accessiweb.org/_repository/files/AccessiWeb_bonnes_pratiques_pdf_accessibles_5mars2009.pdfCré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

Page 36: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

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.pdfCahier développement durable SFR 2008 : http://www.sfr.com/fileadmin/mes_documents/pdf/publications/SFR_CahierDD2008_accessible.pdf

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 37: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Ressources – javascriptCode Talks : http://wiki.codetalks.org/wiki/index.php/Main_PageWAI ARIA : http://www.w3.org/TR/wai-aria/

Démonstrations :Menu déroulant : http://www.vie-publique.frAccessible Twitter : http://www.accessibletwitter.comCurrency converter Yahoo! : http://finance.yahoo.com/currency-converter#from=USD;to=EUR;amt=1Search Yahoo! : http://search.yahoo.com/Site modules pour Firefox : https://addons.mozilla.org/fr/firefox

Sébastien Delorme - Aurélien Levy - 09 octobre 2009

Page 38: WCAG 2.0, Flash, PDF, Javascript sont dans un bateau

Ressources - autresHTML 5Experiment with video accessible : http://www.annodex.net/~silvia/itext/elephant_with_skin.html

SilverlightDigital 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