Dans la peau des utilisateurs
Comprendre l’accessibilité du Web
par l’expérience
Petite mise au point
• Les 3 missions d’un site ou application Web
– Rendre service aux utilisateurs
– Rendre service aux ...
Les outils de l’accessibilité
• Des référentiels
– Ensembles de règles, interdictions et
recommandations
– WCAG, AccessiWe...
Dans la peau des utilisateurs?
• Facile! Il faut:
– Quelques diapos
– Un public
Une diapo type
Blablabli,
blablabla
Ici, les
instructions
Ici,
« l’écran »
Vous allez « cliquer »
sur les boutons en les
d...
Un exemple pour s’échauffer
Cliquez sur:
• Le bouton 2
• Le trapèze
• L’ovale rouge
Prêts?
• C’est parti…
Dans la peau d’un utilisateur aveugle
Cliquez sur:
• Le bouton
bleu
• Le bouton
ovale
Certains utilisateurs ne
perçoivent ...
Dans la peau d’un utilisateur
daltonien
Cliquez sur:
• Le bouton
rouge
Certains utilisateurs
ont une perception
altérée de...
Exemple sur un vrai site
http://www.marmiton.org/magazine/petition-question.aspx
Dans la peau d’un utilisateur
aveugle/malvoyant
Cliquez sur:
• Le bouton en
haut à droite
La position est une notion très
...
Exemple sur un vrai site
http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/texte/
(zoomé plusieurs fois)
La bonne approche
Cliquez sur:
• Le bouton 2
• Le bouton
ovale 3
• Le bouton
jaune 4
Utiliser des références
explicites,
i...
Dans la peau d’un utilisateur aveugle
Lisez tout le texte pour
trouver les instructions. Elles
se situent quelque part dan...
Exemple sur un vrai site
http://www.boursorama.com/
La page est rafraîchie toutes les 10 minutes.
La bonne approche
Laisser à l’utilisateur
l’initiative des
rafraîchissements
Dans la peau d’un utilisateur aveugle
Cliquez sur le
4ème bouton de
la liste suivante:
le rouge celui du
haut à droite le
...
Exemple sur un vrai site (1/2)
http://www.ville-
amboise.fr/c__101_245__Etat_civil_Demarches_administratives.html
Liste
St...
Exemple sur un vrai site (2/2)
http://www.ville-
amboise.fr/c__101_245__Etat_civil_Demarches_administratives.html
Version
...
La bonne approche
Cliquez sur le 4ème
bouton de la liste
suivante:
1. le rouge
2. celui du haut à
droite
3. le bouton à
ga...
Dans la peau d’un utilisateur
malvoyant
Cliquez sur:
• Le bouton
situé en bas à
gauche (3)
• Le trapèze (4)
Certains utili...
Exemple sur un vrai site
http://ameli-direct.ameli.fr/
La bonne approche
Cliquez sur:
• Le bouton
situé en bas à
gauche (3)
• Le trapèze (4)
Utiliser des polices de
caractères l...
Dans la peau d’un utilisateur
malvoyant
Cliquez sur:
• Le
bouto
n de
forme
Les outils de grossissement
peuvent altérer for...
Exemple sur un vrai site
http://airfrance.fr
La bonne approche
Cliquez sur:
•Le bouton
de forme
trapézoïd
ale
Tester les forts
grossissements.
Construire les pages en
...
Dans la peau d’un utilisateur
malentendant
L’animateur va
énoncer les
instructions.
Certains utilisateurs ont des
difficul...
Exemple sur un vrai site
http://www.gouvernement.fr/toutes-les-videos
La bonne approche
Pour les vidéos ou
fichiers sonores,
fournir une
transcription
et/ou des sous-
titres.
Une version en
la...
Dans la peau d’un utilisateur
dyslexique
Cliquer sur:
• Le boutonsitué àl’opposé dutrapèze ensuivant ladiagonale(donc le 1...
Exemple sur un vrai site
http://www.impots.gouv.fr
La bonne approche
Cliquer sur:
• Le bouton situé à
l’opposé du trapèze
en suivant la
diagonale (donc le 1
( losange))
• Le...
Dans la peau d’un utilisateur… fatigué
Cliquer sur le
bouton
diamétralement
opposé à celui qui
est un
quadrilatère
ayant d...
Exemple sur un vrai site
Trouvé sur http://www.tranchesdunet.com/les-pires-captcha-du-
monde/
La bonne approche
Cliquer sur le
bouton n°4.
Privilégier les énoncés
simples et directs
En conclusion
• Vous avez maintenant un aperçu de la vie des
utilisateurs confrontés à l’inaccessibilité
• Vous avez aussi...
Merci, et à bientôt!
• Twitter: @OlivierNourry
• Blog: Accessiblog.fr
• LinkedIn:
http://www.linkedin.com/in/oliviernourry
Prochain SlideShare
Chargement dans…5
×

Sensibiliser à l'accessibilité: Dans la peau des utilisateurs

1 592 vues

Publié le

Les méthodes habituelles de sensibilisation, à base de démonstrations de tehnologies d'assistance, peuvent être trop peu implicantes, ou trop complexes à mettre en oeuvre, ou encore, pas assez exhaustives. Voire les 3 à la fois...
Cette présentation tente de résoudre cette équation, en proposant un dispositif ludique, qui permet aux participants de se mettre symboliquement dans la peau des utilisateurs.
Les animations font partie de la narration. Il est donc nécessaire de télécharger le fichier et de le visionner en mode diaporama pour que cela fonctionne.
Ce document est totalement libre de droits, y compris pour une utilisation commerciale. Je vous encourage à l’utiliser, le modifier, le personnaliser, le triturer, le chambouler, autant qu’il vous plaira. Ça me fera plaisir si vous citez la source, mais c’est même pas obligé.
Tous les détails: http://accessiblog.fr/2014/05/sensibiliser-accessibilite-dans-la-peau-utilisateur

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

Aucun téléchargement
Vues
Nombre de vues
1 592
Sur SlideShare
0
Issues des intégrations
0
Intégrations
135
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Sensibiliser à l'accessibilité: Dans la peau des utilisateurs

  1. 1. Dans la peau des utilisateurs Comprendre l’accessibilité du Web par l’expérience
  2. 2. Petite mise au point • Les 3 missions d’un site ou application Web – Rendre service aux utilisateurs – Rendre service aux utilisateurs – Rendre service aux utilisateurs • L’accessibilité Web, c’est rendre possible pour les utilisateurs en situation de handicap l’utilisation et la compréhension d’un contenu en ligne
  3. 3. Les outils de l’accessibilité • Des référentiels – Ensembles de règles, interdictions et recommandations – WCAG, AccessiWeb, RGAA… • De l’empathie et du bon sens! – Les référentiels sont indispensables, mais parfois trop abstraits – En cas de doute, se mettre dans la peau des utilisateurs
  4. 4. Dans la peau des utilisateurs? • Facile! Il faut: – Quelques diapos – Un public
  5. 5. Une diapo type Blablabli, blablabla Ici, les instructions Ici, « l’écran » Vous allez « cliquer » sur les boutons en les désignant du doigt
  6. 6. Un exemple pour s’échauffer Cliquez sur: • Le bouton 2 • Le trapèze • L’ovale rouge
  7. 7. Prêts? • C’est parti…
  8. 8. Dans la peau d’un utilisateur aveugle Cliquez sur: • Le bouton bleu • Le bouton ovale Certains utilisateurs ne perçoivent ni les formes ni les couleurs
  9. 9. Dans la peau d’un utilisateur daltonien Cliquez sur: • Le bouton rouge Certains utilisateurs ont une perception altérée des couleurs
  10. 10. Exemple sur un vrai site http://www.marmiton.org/magazine/petition-question.aspx
  11. 11. Dans la peau d’un utilisateur aveugle/malvoyant Cliquez sur: • Le bouton en haut à droite La position est une notion très relative…
  12. 12. Exemple sur un vrai site http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/texte/ (zoomé plusieurs fois)
  13. 13. La bonne approche Cliquez sur: • Le bouton 2 • Le bouton ovale 3 • Le bouton jaune 4 Utiliser des références explicites, indépendantes de la position
  14. 14. Dans la peau d’un utilisateur aveugle Lisez tout le texte pour trouver les instructions. Elles se situent quelque part dans le texte, pas forcément à la fin, et visiblement pas au début. Jouez le jeu et vous les trouverez. Je suis d’humeur joueuse, d’ailleurs, pas vous? Bon, allez, je ne vous fais pas languir trop longtemps. C’est pour bientôt. Vous pourriez cliquer le bouton rouge, mais non ce n’est pas ça. C’est le bouton sous le bouton vert. Bon, si vous avez lu jusqu’ici, vous avez bien mérité une petite pause. Respirez.
  15. 15. Exemple sur un vrai site http://www.boursorama.com/ La page est rafraîchie toutes les 10 minutes.
  16. 16. La bonne approche Laisser à l’utilisateur l’initiative des rafraîchissements
  17. 17. Dans la peau d’un utilisateur aveugle Cliquez sur le 4ème bouton de la liste suivante: le rouge celui du haut à droite le bouton à gauche en haut l’ovale le n°4 le vert Certains utilisateurs ont besoin de textes structurés
  18. 18. Exemple sur un vrai site (1/2) http://www.ville- amboise.fr/c__101_245__Etat_civil_Demarches_administratives.html Liste Structuration Version « visuelle »
  19. 19. Exemple sur un vrai site (2/2) http://www.ville- amboise.fr/c__101_245__Etat_civil_Demarches_administratives.html Version « lecteur d’écran » Tout le texte est au même niveau
  20. 20. La bonne approche Cliquez sur le 4ème bouton de la liste suivante: 1. le rouge 2. celui du haut à droite 3. le bouton à gauche en haut 4. l’ovale 5. le n°4 6. le vert Structurer le texte: titres, paragraphes, listes.
  21. 21. Dans la peau d’un utilisateur malvoyant Cliquez sur: • Le bouton situé en bas à gauche (3) • Le trapèze (4) Certains utilisateurs ont des difficultés à lire les textes trop petits ou mal contrastés
  22. 22. Exemple sur un vrai site http://ameli-direct.ameli.fr/
  23. 23. La bonne approche Cliquez sur: • Le bouton situé en bas à gauche (3) • Le trapèze (4) Utiliser des polices de caractères lisibles et bien contrastées
  24. 24. Dans la peau d’un utilisateur malvoyant Cliquez sur: • Le bouto n de forme Les outils de grossissement peuvent altérer fortement l’affichage
  25. 25. Exemple sur un vrai site http://airfrance.fr
  26. 26. La bonne approche Cliquez sur: •Le bouton de forme trapézoïd ale Tester les forts grossissements. Construire les pages en fonction.
  27. 27. Dans la peau d’un utilisateur malentendant L’animateur va énoncer les instructions. Certains utilisateurs ont des difficultés à comprendre les informations sonores
  28. 28. Exemple sur un vrai site http://www.gouvernement.fr/toutes-les-videos
  29. 29. La bonne approche Pour les vidéos ou fichiers sonores, fournir une transcription et/ou des sous- titres. Une version en langue des signes est souhaitable en complément. « Cliquer sur le bouton n° 3 »
  30. 30. Dans la peau d’un utilisateur dyslexique Cliquer sur: • Le boutonsitué àl’opposé dutrapèze ensuivant ladiagonale(donc le 1 (losange)) Certains utilisateurs ont des difficultés avec les textes trop « serrés »
  31. 31. Exemple sur un vrai site http://www.impots.gouv.fr
  32. 32. La bonne approche Cliquer sur: • Le bouton situé à l’opposé du trapèze en suivant la diagonale (donc le 1 ( losange)) • Le bouton de couleur verte (le rectangle, avec un 2 écrit dessus) Interlignes suffisants. Lignes courtes. Ne pas justifier. Il existe des polices optimisées.
  33. 33. Dans la peau d’un utilisateur… fatigué Cliquer sur le bouton diamétralement opposé à celui qui est un quadrilatère ayant des côtés opposés parallèles et se trouvant à bâbord Certains utilisateurs auront des difficultés à comprendre les énoncés complexes
  34. 34. Exemple sur un vrai site Trouvé sur http://www.tranchesdunet.com/les-pires-captcha-du- monde/
  35. 35. La bonne approche Cliquer sur le bouton n°4. Privilégier les énoncés simples et directs
  36. 36. En conclusion • Vous avez maintenant un aperçu de la vie des utilisateurs confrontés à l’inaccessibilité • Vous avez aussi des clés pour éviter ces problèmes • A vous de jouer!
  37. 37. Merci, et à bientôt! • Twitter: @OlivierNourry • Blog: Accessiblog.fr • LinkedIn: http://www.linkedin.com/in/oliviernourry

×