Du panorama d'exemples d'accessibilité (bons et moins bons) aux actions à mener pour l'accessibilité web: - recopier et s'inspîrer (KBAccess), - mesurer et s'outiller (Tanaguru, Contrast-Finder), - déclarer sa conformité et surtout être sincère ! Accessiday 2014 (Caen, France)

1. Tour du webTour du web e ne n
8080 e x e m p l e s d 'e x e m p l e s d ' accessibilitéaccessibilité
Matthieu FaureMatthieu Faure @mfaure@mfaure

2. Avant-propos
Bénéfices
accessibilité

3. Visibilité
SEO

4. Ergonomie

5. Conformité
Loi 2005

6. Exemples ?

8. Exemple
global

11. Exemples
précis

12. Pertinence des liensPertinence des liens

13. Pertinence des liensPertinence des liens

14. Pertinence des liensPertinence des liens

15. VideoVideo

16. FormulairesFormulaires

17. FormulairesFormulaires

18. Fil d'ArianeFil d'Ariane

19. Navigation clavierNavigation clavier

20. Beaucoup d'exemplesBeaucoup d'exemples

21. Copier ?Copier ?

22. Bien sûr !
Rependre les bons exemples
Observer les moins bons

23. KBAccessKBAccess
Base collaborative d'exemples d'accessibilitéBase collaborative d'exemples d'accessibilité

24. KBAccess mai 2014
+700 exemples archivés
+ 80 contributeurs
Mondial France, Suisse, Canada, USA,
Angleterre, Espagne, Uruguay (!)...
www.KBAccess.org

25. Mesurer l'accessibilitéMesurer l'accessibilité

26. Tout le temps !
1.Choix prestataire

27. Tout le temps !
1.Choix prestataire
2.Recette livrable

28. Tout le temps !
1.Choix prestataire
2.Recette livrable
3.Développement site

29. Tout le temps !
1.Choix prestataire
2.Recette livrable
3.Développement site
4.Maintenance

30. Comment ?

32. Logiciel libre
- 300 000 lignes de code (utiles, source Ohloh)
- GitHub https://github.com/Tanaguru/Tanaguru
- Communauté www.tanaguru.org
- SaaS www.tanaguru.com

35. OK, what else ?

36. ContrasterContraster

37. ContrasteContraste

38. Contraste (bis)Contraste (bis)

39. Contrôler les contrastesContrôler les contrastes

40. Trouver les
bonnes
couleurs ?

41. Contrast-FinderContrast-Finder

42. Contrast-finder.tanaguru.com
logiciel libre
https://github.com/Tanaguru/Contrast-Finder

43. …… depuis Firefoxdepuis Firefox
https://addons.mozilla.org/https://addons.mozilla.org/ → Tanaguru→ Tanaguru

44. Déclaration conformitéDéclaration conformité

45. Soyez sincère !Soyez sincère !

46. Indiquer zones accessibilité moindreIndiquer zones accessibilité moindre

47. Donnez un contactDonnez un contact

48. Matthieu FaureMatthieu Faure
Ta n a g u r u . c o mTa n a g u r u . c o m
m f a u r e @ t a n a g u r u . c o mm f a u r e @ t a n a g u r u . c o m
0 6 7 3 9 6 7 9 5 90 6 7 3 9 6 7 9 5 9
@ m f a u r e@ m f a u r e
Merci !Merci !

49. World's worst website (attention ça pique un peu les yeux!)
Exemple KBAccess n°1250 : CG58 Liens lire la suite
Exemple KBAccess n°1299 : chambres d'agriculture Bonne implémentation des liens pour accéder aux actus
Exemple KBAccess n°1301 : Provaltis Liens
Exemple KBAccess n°1315 : Video Youtube MecaTrouve Video avec transcription
Exemple KBAccess n°583 : Salariance Formulaire problématique
Exemple KBAccess n° 603 : Montreuil Plusieurs boutons OK pour formulaires différents
MeteoFrance Bonne implémentation des liens d'évitements
URLs et exemples utilisésURLs et exemples utilisés

50. Photos sous licence Licence libre
CC-BY-SA JotaCartas https://commons.wikimedia.org/wiki/User:JotaCartas https://commons.wikimedia.org/wiki/File:Ponte_Vasco_da_Gama_25.jpg
CC-BY-SA Luca Galuzzi http://commons.wikimedia.org/wiki/User:Lucag
http://commons.wikimedia.org/wiki/File:Piles_of_Salt_Salar_de_Uyuni_Bolivia_Luca_Galuzzi_2006_a.jpg
CC-BY-SA http://www.flickr.com/photos/hackny/6203292858/
CC-BY-SA Nevit Dilmen http://commons.wikimedia.org/wiki/User:Nevit http://commons.wikimedia.org/wiki/File:Plastic_Protractor_Polarized_05375.jpg
CC-BY-SA Brocken Inaglory https://sites.google.com/site/thebrockeninglory/ http://commons.wikimedia.org/wiki/File:Artcarfest_in_San_Francisco_1.jpg
CC-BY-SA Jonathan McIntosh http://commons.wikimedia.org/wiki/User:Thehero http://commons.wikimedia.org/wiki/File:South_Central_Farm_1.jpg
CC-BY-SA Arild Vågen http://commons.wikimedia.org/wiki/User:ArildV
http://commons.wikimedia.org/wiki/Commons:Featured_pictures/Objects#mediaviewer/File:Golden_Horn_Metro_Bridge_Mars_2013.jpg
CC-BY-SA Berthold Werner http://commons.wikimedia.org/wiki/User:Berthold_Werner
http://commons.wikimedia.org/wiki/File:Telefon_BW_2012-02-18_13-44-32.JPG
CC-BY http://www.flickr.com/photos/wonderlane/4196740256/
CréditsCrédits

51. Ils aiment TanaguruIls aiment Tanaguru