Accessibilité : des volontaires ?



   Accessibilité : des volontaires ? Paris Web 2008   1
Écoutez donc




Accessibilité : des volontaires ? Paris Web 2008   2
Plan


       Cécité
       Malvoyance
       Déficiences moteurs
       Déficiences auditives
       Déficiences intellec...
Cécité


Accessibilité : des volontaires ? Paris Web 2008   4
Cécité : Images




                          •Devinez !




Accessibilité : des volontaires ? Paris Web 2008   5
Cécité : Images




Accessibilité : des volontaires ? Paris Web 2008   6
Solutions : images




Faire des textes alternatifs pertinents

•<img src=quot;toto.pngquot; alt=quot;…quot; />




 Acces...
Cécité : Liens




Accessibilité : des volontaires ? Paris Web 2008   8
Solutions : liens




           Faire des liens pertinents
   <a href=quot;a.phpquot;>Cliquez ici</a>
<a href=quot;a.phpq...
Cécité : Formulaires




       •Un formulaire du monde réel




Accessibilité : des volontaires ? Paris Web 2008   10
Solutions : Formulaires




   Associer intitulé et champ
<label for=quot;nomquot;>Nom</label>
<input type=quot;textquot; ...
Cécité : Vidéos




Accessibilité : des volontaires ? Paris Web 2008   12
Solutions : vidéos




      Faire de l’audio-description




Accessibilité : des volontaires ? Paris Web 2008   13
Cécité : langue




Accessibilité : des volontaires ? Paris Web 2008   14
Solutions : langue




   marquer la langue principale
        <html lang=quot;dequot;>


signaler les changements de lang...
Malvoyance : vous et moi



Accessibilité : des volontaires ? Paris Web 2008   16
Malvoyance : Luminosité




 Luminosité des couleurs



Accessibilité : des volontaires ? Paris Web 2008   17
Malvoyance : Contraste




     Contraste de couleurs



Accessibilité : des volontaires ? Paris Web 2008   18
Malvoyance : Contraste




Accessibilité : des volontaires ? Paris Web 2008   19
Solutions : contraste et luminosité




 Éviter certaines combinaisons
 Contrastes de luminosité > 3:1

       Color contr...
Malvoyance : information par la couleur




Accessibilité : des volontaires ? Paris Web 2008   21
Solutions : information par la couleur




  Pas d'information uniquement
  par la couleur
      Sites web                ...
Déficiences motrices



Accessibilité : des volontaires ? Paris Web 2008   23
Déficiences motrices: Un formulaire




Accessibilité : des volontaires ? Paris Web 2008   24
Solutions : Déficiences motrices




   Associer intitulé et champ
<label for=quot;nomquot;>Nom</label>
<input type=quot;t...
Solutions : Déficiences motrices



     Éviter de changer des
     comportements prévus !
     Faire des liens d’évitemen...
Déficiences auditives



Accessibilité : des volontaires ? Paris Web 2008   27
Déficiences auditives : les orateurs parlent




     •ça va ? vous entendez bien tout ?
Accessibilité : des volontaires ?...
Solutions : Déficiences auditives




               Faire du sous-titrage



Accessibilité : des volontaires ? Paris Web ...
Le sous-titrage : les on-dit




« C’est impossible à faire ! »
   « Ça coûte trop cher ! »


Accessibilité : des volontai...
Solutions : Sous-titrage impossible ?


   Magpie
   Composant Flash FLVPlaybackCaptioning
   Interface Dailymotion
   Sol...
Solutions : Sous-titrage trop cher ?



   Diminution des coûts
   par industrialisation
   Utilisation des
   données pré...
Déficiences intellectuelles



Accessibilité : des volontaires ? Paris Web 2008   33
Déficiences intellectuelles : Troubles concentration


                           •Mouvement
                 •Clignotemen...
Déficiences intellectuelles : Troubles concentration




Quel est le chiffre qui est unique ?
                           P...
Déficiences intellectuelles : Troubles concentration




    Accessibilité : des volontaires ? Paris Web 2008   36
Déficiences intellectuelles : Troubles concentration




                           Alors ?

    Accessibilité : des volon...
Déficiences intellectuelles : Troubles concentration




    Accessibilité : des volontaires ? Paris Web 2008   38
Solutions : troubles concentration




                   Laisser le contrôle

           Lecture                    Pause...
Solutions : troubles concentration




  Limiter la durée et la quantité




Accessibilité : des volontaires ? Paris Web 2...
Déficiences intellectuelles : Apprentissage




•精神いっとう何事か奈
   良ならざらん

 Accessibilité : des volontaires ? Paris Web 2008  ...
Solutions : Apprentissage




   Traductions, phonétique,
   définition, version audio
•seishin ittô nanigoto ka narazaran...
Déficiences intellectuelles : Compréhension


Potentiellement il est possible de dire
qu'avec un effort non négligeable et...
Solutions Compréhension




                        Phrases simples

 Information principale au début

Accessibilité : des...
Déficiences techniques



Accessibilité : des volontaires ? Paris Web 2008   45
Déficiences techniques : Javascript




Accessibilité : des volontaires ? Paris Web 2008   46
Solutions : Javascript




                noscript
        Javascript non obstrusif ☺
          Script côté serveur ☺

Ac...
Déficiences techniques : Fond et couleur




Accessibilité : des volontaires ? Paris Web 2008   48
Solutions : Fond et couleur




   Image de fond -> Couleur de
               fond
    Satanas : display:none, text-
     ...
Grand numéro d’hypnose !




                               http://www.flickr.com/photos/malavoda/2789900768/

Accessibili...
Conclusion


Accessibilité : des volontaires ? Paris Web 2008   51
Crédits



•Ornements :
•- Nela Dunato http://inobscuro.com/
•- Obsidian Dawn http://www.obsidiandawn.com
•Police :
•- Die...
Des questions ?




•Stéphane Deschamps                                    •Aurélien Levy

•stephane.deschamps            ...
Prochain SlideShare
Chargement dans…5
×

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

3 282 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 282
Sur SlideShare
0
Issues des intégrations
0
Intégrations
161
Actions
Partages
0
Téléchargements
34
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×