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

Accessibilité : des volontaires ?

1Accessibilité : des volontaires ? Paris Web 2008

Écoutez donc


Plan

CécitéMalvoyanceDéficiences moteursDéficiences auditivesDéficiences intellectuellesDéficiences techniques

Accessibilité : des volontaires ? Paris Web 2008 3

Cécité


Accessibilité : des volontaires ? Paris Web 2008

Cécité : Images

•Devinez !

5


Cécité : Images

6


Solutions : images

Faire des textes alternatifs pertinents

•<img src="toto.png" alt="…" />

7


Cécité : Liens

8


Solutions : liens

Faire des liens pertinents

<a href="a.php">Cliquez ici</a><a href="a.php">Découvez Parisweb</a>

9


Cécité : Formulaires

•Un formulaire du monde réel

10

Solutions : Formulaires

Associer intitulé et champ<label for="nom">Nom</label>

<input type="text" id="nom">


Cécité : Vidéos

12


Solutions : vidéos

Faire de l’audio-description

13


Cécité : langue

14

Solutions : langue

marquer la langue principale<html lang="de">

signaler les changements de langues<span lang="en">

Malvoyance : vous et moi



Malvoyance : Luminosité

Luminosité des couleurs

17


Malvoyance : Contraste

Contraste de couleurs

18


Malvoyance : Contraste

19


Solutions : contraste et luminosité

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

Color contrast analyser

20


Malvoyance : information par la couleur

21


Solutions : information par la couleur

Pas d'information uniquementpar la couleurSites webLes bonnes pratiques

5€<p>Sites web Les bonnes pratiques <span>5€<img src=‘…’ alt=‘prix avec réduction -10%’ /></span></p>

22

Déficiences motrices



Déficiences motrices: Un formulaire

24

Solutions : Déficiences motrices

Associer intitulé et champ<label for="nom">Nom</label><input type="text" id="nom">

Prévoir une sessiond’une durée suffisante


Solutions : Déficiences motrices

Éviter de changer descomportements prévus !Faire des liens d’évitement

26

Déficiences auditives



•ça va ? vous entendez bien tout ?

Déficiences auditives : les orateurs parlent

28


Solutions : Déficiences auditives

Faire du sous-titrage

29


Le sous-titrage : les on-dit

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

30


Solutions : Sous-titrage impossible ?

MagpieComposant Flash FLVPlaybackCaptioningInterface DailymotionSolutions professionnellesCommunauté de sous-titrage

31

Revenez samediRevenez samedi


Solutions : Sous-titrage trop cher ?

Diminution des coûts par industrialisationUtilisation des données préexistantes

32

Déficiences intellectuelles



Déficiences intellectuelles : Troubles concentration

•Mouvement

34

•Clignotement



Quel est le chiffre qui est unique ?

Prêts ?

35



36



Alors ?

37



38


Solutions : troubles concentration

Laisser le contrôle

Lecture Pause Stop

39


Solutions : troubles concentration

Limiter la durée et la quantité

40


Déficiences intellectuelles : Apprentissage

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

41


Solutions : Apprentissage

Traductions, phonétique,définition, version audio

•seishin ittô nanigoto ka narazaran(avec une volonté tenace tout peut être accompli)

42


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.

43


Solutions Compréhension

Phrases simples

Information principale au début

44

Déficiences techniques



Déficiences techniques : Javascript

46


Solutions : Javascript

47

noscriptJavascript non obstrusif ☺

Script côté serveur ☺


Déficiences techniques : Fond et couleur

48


Solutions : Fond et couleur

49

Image de fond -> Couleur de fond

Satanas : display:none, text-indent:-5000px

Grand numéro d’hypnose !

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


Conclusion



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

52


Des questions ?

•Stéphane Deschamps

•[email protected]

•Aurélien Levy

•[email protected]

53

Technology

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