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 FaureMatthie...
Avant-propos
Bénéfices
accessibilité
Visibilité
SEO
Ergonomie
Conformité
Loi 2005
Exemples ?
Exemple
global
Exemples
précis
Pertinence des liensPertinence des liens
Pertinence des liensPertinence des liens
Pertinence des liensPertinence des liens
VideoVideo
FormulairesFormulaires
FormulairesFormulaires
Fil d'ArianeFil d'Ariane
Navigation clavierNavigation clavier
Beaucoup d'exemplesBeaucoup d'exemples
Copier ?Copier ?
Bien sûr !
Rependre les bons exemples
Observer les moins bons
KBAccessKBAccess
Base collaborative d'exemples d'accessibilitéBase collaborative d'exemples d'accessibilité
KBAccess mai 2014
+700 exemples archivés
+ 80 contributeurs
Mondial France, Suisse, Canada, USA,
Angleterre, Espagne, Urug...
Mesurer l'accessibilitéMesurer l'accessibilité
Tout le temps !
1.Choix prestataire
Tout le temps !
1.Choix prestataire
2.Recette livrable
Tout le temps !
1.Choix prestataire
2.Recette livrable
3.Développement site
Tout le temps !
1.Choix prestataire
2.Recette livrable
3.Développement site
4.Maintenance
Comment ?
Logiciel libre
- 300 000 lignes de code (utiles, source Ohloh)
- GitHub https://github.com/Tanaguru/Tanaguru
- Communauté ...
OK, what else ?
ContrasterContraster
ContrasteContraste
Contraste (bis)Contraste (bis)
Contrôler les contrastesContrôler les contrastes
Trouver les
bonnes
couleurs ?
Contrast-FinderContrast-Finder
Contrast-finder.tanaguru.com
logiciel libre
https://github.com/Tanaguru/Contrast-Finder
…… depuis Firefoxdepuis Firefox
https://addons.mozilla.org/https://addons.mozilla.org/ → Tanaguru→ Tanaguru
Déclaration conformitéDéclaration conformité
Soyez sincère !Soyez sincère !
Indiquer zones accessibilité moindreIndiquer zones accessibilité moindre
Donnez un contactDonnez un contact
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...
World's worst website (attention ça pique un peu les yeux!)
Exemple KBAccess n°1250 : CG58 Liens lire la suite
Exemple KBA...
Photos sous licence Licence libre
CC-BY-SA JotaCartas https://commons.wikimedia.org/wiki/User:JotaCartas https://commons.w...
Ils aiment TanaguruIls aiment Tanaguru
Accessiday 2014 Tour du web en 80 exemples d'accessibilite
Accessiday 2014 Tour du web en 80 exemples d'accessibilite
Accessiday 2014 Tour du web en 80 exemples d'accessibilite
Accessiday 2014 Tour du web en 80 exemples d'accessibilite
Accessiday 2014 Tour du web en 80 exemples d'accessibilite
Accessiday 2014 Tour du web en 80 exemples d'accessibilite
Prochain SlideShare
Chargement dans…5
×

Accessiday 2014 Tour du web en 80 exemples d'accessibilite

2 117 vues

Publié le

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)

Publié dans : Internet
1 commentaire
3 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 117
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 076
Actions
Partages
0
Téléchargements
7
Commentaires
1
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Accessiday 2014 Tour du web en 80 exemples d'accessibilite

  1. 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. 2. Avant-propos Bénéfices accessibilité
  3. 3. Visibilité SEO
  4. 4. Ergonomie
  5. 5. Conformité Loi 2005
  6. 6. Exemples ?
  7. 7. Exemple global
  8. 8. Exemples précis
  9. 9. Pertinence des liensPertinence des liens
  10. 10. Pertinence des liensPertinence des liens
  11. 11. Pertinence des liensPertinence des liens
  12. 12. VideoVideo
  13. 13. FormulairesFormulaires
  14. 14. FormulairesFormulaires
  15. 15. Fil d'ArianeFil d'Ariane
  16. 16. Navigation clavierNavigation clavier
  17. 17. Beaucoup d'exemplesBeaucoup d'exemples
  18. 18. Copier ?Copier ?
  19. 19. Bien sûr ! Rependre les bons exemples Observer les moins bons
  20. 20. KBAccessKBAccess Base collaborative d'exemples d'accessibilitéBase collaborative d'exemples d'accessibilité
  21. 21. KBAccess mai 2014 +700 exemples archivés + 80 contributeurs Mondial France, Suisse, Canada, USA, Angleterre, Espagne, Uruguay (!)... www.KBAccess.org
  22. 22. Mesurer l'accessibilitéMesurer l'accessibilité
  23. 23. Tout le temps ! 1.Choix prestataire
  24. 24. Tout le temps ! 1.Choix prestataire 2.Recette livrable
  25. 25. Tout le temps ! 1.Choix prestataire 2.Recette livrable 3.Développement site
  26. 26. Tout le temps ! 1.Choix prestataire 2.Recette livrable 3.Développement site 4.Maintenance
  27. 27. Comment ?
  28. 28. Logiciel libre - 300 000 lignes de code (utiles, source Ohloh) - GitHub https://github.com/Tanaguru/Tanaguru - Communauté www.tanaguru.org - SaaS www.tanaguru.com
  29. 29. OK, what else ?
  30. 30. ContrasterContraster
  31. 31. ContrasteContraste
  32. 32. Contraste (bis)Contraste (bis)
  33. 33. Contrôler les contrastesContrôler les contrastes
  34. 34. Trouver les bonnes couleurs ?
  35. 35. Contrast-FinderContrast-Finder
  36. 36. Contrast-finder.tanaguru.com logiciel libre https://github.com/Tanaguru/Contrast-Finder
  37. 37. …… depuis Firefoxdepuis Firefox https://addons.mozilla.org/https://addons.mozilla.org/ → Tanaguru→ Tanaguru
  38. 38. Déclaration conformitéDéclaration conformité
  39. 39. Soyez sincère !Soyez sincère !
  40. 40. Indiquer zones accessibilité moindreIndiquer zones accessibilité moindre
  41. 41. Donnez un contactDonnez un contact
  42. 42. 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 !
  43. 43. 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
  44. 44. 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
  45. 45. Ils aiment TanaguruIls aiment Tanaguru

×