Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008

3,179 views

Published on

Aurélien Levy et Stéphane Deschamps vous proposent de vous mettre en situation de handicap pour vous permettre de mieux comprendre les blocages liés à l’inaccessibilité des sites Web. Nous verrons par la suite comment éliminer simplement les défauts les plus fréquents et améliorer grandement l’accessibilité de vos services.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,179
On SlideShare
0
From Embeds
0
Number of Embeds
161
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008

  1. 1. Accessibilité : des volontaires ? Accessibilité : des volontaires ? Paris Web 2008 1
  2. 2. Écoutez donc Accessibilité : des volontaires ? Paris Web 2008 2
  3. 3. Plan Cécité Malvoyance Déficiences moteurs Déficiences auditives Déficiences intellectuelles Déficiences techniques Accessibilité : des volontaires ? Paris Web 2008 3
  4. 4. Cécité Accessibilité : des volontaires ? Paris Web 2008 4
  5. 5. Cécité : Images •Devinez ! Accessibilité : des volontaires ? Paris Web 2008 5
  6. 6. Cécité : Images Accessibilité : des volontaires ? Paris Web 2008 6
  7. 7. Solutions : images Faire des textes alternatifs pertinents •<img src=quot;toto.pngquot; alt=quot;…quot; /> Accessibilité : des volontaires ? Paris Web 2008 7
  8. 8. Cécité : Liens Accessibilité : des volontaires ? Paris Web 2008 8
  9. 9. Solutions : liens Faire des liens pertinents <a href=quot;a.phpquot;>Cliquez ici</a> <a href=quot;a.phpquot;>Découvez Parisweb</a> Accessibilité : des volontaires ? Paris Web 2008 9
  10. 10. Cécité : Formulaires •Un formulaire du monde réel Accessibilité : des volontaires ? Paris Web 2008 10
  11. 11. Solutions : Formulaires Associer intitulé et champ <label for=quot;nomquot;>Nom</label> <input type=quot;textquot; id=quot;nomquot;>
  12. 12. Cécité : Vidéos Accessibilité : des volontaires ? Paris Web 2008 12
  13. 13. Solutions : vidéos Faire de l’audio-description Accessibilité : des volontaires ? Paris Web 2008 13
  14. 14. Cécité : langue Accessibilité : des volontaires ? Paris Web 2008 14
  15. 15. Solutions : langue marquer la langue principale <html lang=quot;dequot;> signaler les changements de langues <span lang=quot;enquot;>
  16. 16. Malvoyance : vous et moi Accessibilité : des volontaires ? Paris Web 2008 16
  17. 17. Malvoyance : Luminosité Luminosité des couleurs Accessibilité : des volontaires ? Paris Web 2008 17
  18. 18. Malvoyance : Contraste Contraste de couleurs Accessibilité : des volontaires ? Paris Web 2008 18
  19. 19. Malvoyance : Contraste Accessibilité : des volontaires ? Paris Web 2008 19
  20. 20. Solutions : contraste et luminosité Éviter certaines combinaisons Contrastes de luminosité > 3:1 Color contrast analyser Accessibilité : des volontaires ? Paris Web 2008 20
  21. 21. Malvoyance : information par la couleur Accessibilité : des volontaires ? Paris Web 2008 21
  22. 22. Solutions : information par la couleur Pas d'information uniquement par la couleur Sites web <p>Sites web Les bonnes Les bonnes pratiques <span>5€ pratiques <img src=‘…’ alt=‘prix 5€ avec réduction -10%’ /> </span></p> Accessibilité : des volontaires ? Paris Web 2008 22
  23. 23. Déficiences motrices Accessibilité : des volontaires ? Paris Web 2008 23
  24. 24. Déficiences motrices: Un formulaire Accessibilité : des volontaires ? Paris Web 2008 24
  25. 25. Solutions : Déficiences motrices Associer intitulé et champ <label for=quot;nomquot;>Nom</label> <input type=quot;textquot; id=quot;nomquot;> Prévoir une session d’une durée suffisante
  26. 26. Solutions : Déficiences motrices Éviter de changer des comportements prévus ! Faire des liens d’évitement Accessibilité : des volontaires ? Paris Web 2008 26
  27. 27. Déficiences auditives Accessibilité : des volontaires ? Paris Web 2008 27
  28. 28. Déficiences auditives : les orateurs parlent •ça va ? vous entendez bien tout ? Accessibilité : des volontaires ? Paris Web 2008 28
  29. 29. Solutions : Déficiences auditives Faire du sous-titrage Accessibilité : des volontaires ? Paris Web 2008 29
  30. 30. Le sous-titrage : les on-dit « C’est impossible à faire ! » « Ça coûte trop cher ! » Accessibilité : des volontaires ? Paris Web 2008 30
  31. 31. Solutions : Sous-titrage impossible ? Magpie Composant Flash FLVPlaybackCaptioning Interface Dailymotion Solutions professionnelles Communauté de sous-titrage Revenez samedi Accessibilité : des volontaires ? Paris Web 2008 31
  32. 32. Solutions : Sous-titrage trop cher ? Diminution des coûts par industrialisation Utilisation des données préexistantes Accessibilité : des volontaires ? Paris Web 2008 32
  33. 33. Déficiences intellectuelles Accessibilité : des volontaires ? Paris Web 2008 33
  34. 34. Déficiences intellectuelles : Troubles concentration •Mouvement •Clignotement Accessibilité : des volontaires ? Paris Web 2008 34
  35. 35. Déficiences intellectuelles : Troubles concentration Quel est le chiffre qui est unique ? Prêts ? Accessibilité : des volontaires ? Paris Web 2008 35
  36. 36. Déficiences intellectuelles : Troubles concentration Accessibilité : des volontaires ? Paris Web 2008 36
  37. 37. Déficiences intellectuelles : Troubles concentration Alors ? Accessibilité : des volontaires ? Paris Web 2008 37
  38. 38. Déficiences intellectuelles : Troubles concentration Accessibilité : des volontaires ? Paris Web 2008 38
  39. 39. Solutions : troubles concentration Laisser le contrôle Lecture Pause Stop Accessibilité : des volontaires ? Paris Web 2008 39
  40. 40. Solutions : troubles concentration Limiter la durée et la quantité Accessibilité : des volontaires ? Paris Web 2008 40
  41. 41. Déficiences intellectuelles : Apprentissage •精神いっとう何事か奈 良ならざらん Accessibilité : des volontaires ? Paris Web 2008 41
  42. 42. Solutions : Apprentissage Traductions, phonétique, définition, version audio •seishin ittô nanigoto ka narazaran (avec une volonté tenace tout peut être accompli) Accessibilité : des volontaires ? Paris Web 2008 42
  43. 43. Déficiences intellectuelles : Compréhension Potentiellement il est possible de dire qu'avec un effort non négligeable et une attention toute particulière il est envisageable qu'un élément aussi insignifiant que la quantité d'informations dans une phrase et sa simplicité permettent de la comprendre plus facilement. Accessibilité : des volontaires ? Paris Web 2008 43
  44. 44. Solutions Compréhension Phrases simples Information principale au début Accessibilité : des volontaires ? Paris Web 2008 44
  45. 45. Déficiences techniques Accessibilité : des volontaires ? Paris Web 2008 45
  46. 46. Déficiences techniques : Javascript Accessibilité : des volontaires ? Paris Web 2008 46
  47. 47. Solutions : Javascript noscript Javascript non obstrusif ☺ Script côté serveur ☺ Accessibilité : des volontaires ? Paris Web 2008 47
  48. 48. Déficiences techniques : Fond et couleur Accessibilité : des volontaires ? Paris Web 2008 48
  49. 49. Solutions : Fond et couleur Image de fond -> Couleur de fond Satanas : display:none, text- indent:-5000px Accessibilité : des volontaires ? Paris Web 2008 49
  50. 50. Grand numéro d’hypnose ! http://www.flickr.com/photos/malavoda/2789900768/ Accessibilité : des volontaires ? Paris Web 2008 50
  51. 51. Conclusion Accessibilité : des volontaires ? Paris Web 2008 51
  52. 52. Crédits •Ornements : •- Nela Dunato http://inobscuro.com/ •- Obsidian Dawn http://www.obsidiandawn.com •Police : •- Dieter Steffmann http://www.steffmann.de/ •Magie : •- marchanddetrucs.com et Vincent Valentin Accessibilité : des volontaires ? Paris Web 2008 52
  53. 53. Des questions ? •Stéphane Deschamps •Aurélien Levy •stephane.deschamps •aurelien.levy @orange-ftgroup.com @temesis.com Accessibilité : des volontaires ? Paris Web 2008 53

×