1. Ergonomie et Accessibilité sont dans un
bâteau : comment ramer dans la même
direction ?
Gautier Barrère / Laurent Denis
Atelier FLUPA
1

2. Qui sommes-nous ?
• Gautier Barrère
– Ergonome - Web
– Chef de projet – Coordination Présence Internet
– Membre du groupe de normalisation X35E « Ergonomie des
logiciels » (AFNOR)
– Membre du « France – Luxembourg UPA chapter » (www.flupa.eu)
• Laurent Denis
– Expert accessibilité
– Responsable formation et grands comptes Temesis
– Co-auteur RGAA
– Openweb
2

3. Objectifs de l’atelier
• Ce sont vos objectifs : petit tour de table ?
3

4. Objectifs de l’atelier
• Comprendre :
– la frontière entre « Accessibilité » et « Ergonomie »
– toutes les belles choses qu’il nous reste avec ensemble
• Interagir :
– Mises en situation
• Présenter :
– Un exemple démarche qualité « ergonomie et accessibilité »

5. Atelier = Vive l’interaction
• Nos slides sont moches et peu travaillés ?
– C’est fait exprès !
• L’important pour nous c’est d’apprendre ensemble

6. Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »
6

7. Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »
7

8. Accessibilité ? Point de vue d’un l’ergonome

9. Ergonomie ? Point de vue d’un expert accessibilité

10. Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre synthèse « après »
10

11. Prenons le point de vue de l’expert accessibilité

12. Quelques exemples autour d’un cas précis
• Personne déficiente visuelle qui souhaite publier un blog

13. Produire…. des contenus… Accessibles
ATAG WCAG UAAG
CMS, Contenus Navigateurs,
éditeurs Aides
techniques

14. Prenons d’abord le back end
• Cette personne déficiente visuelle va d’abord être
concernée par le back end
• Comment faire que le back-end soit accessible ?
• Comment produire un contenu accessible ?

15. Quelques exemples

16. Un back-end accessible ?
Editeur Dotclear

17. Un back-end qui peut produire de l’accessibilité ?
Editeur wysiwyg Edit-on Pro

18. Supporter les fonctionnalités d’accessibilité
Titres, listes…
Alternatives textuelles

19. L’ergonome intervient également…

20. L’ergonome intervient également…

21. Inciter à utiliser les fonctionnalités d’accessibilité

22. Apporter une aide contextuelle

23. Accessible ? Ergonomique ?

24. Prenons ensuite le frond end
• Cette personne déficiente visuelle va ensuite être
concernée par le frond end
• Comment faire pour que le site (partie publique) soit
accessible ?

25. Prenons ensuite le frond end
• Un contenu :
– Perceptible,
– Compréhensible,
– Utilisable,
– Robuste.

26. Quelques exemples

27. Sur base de vos connaissances des guidelines
d’ergonomie et d’accessibilité… on parle de quoi ?

28. Définir un système de navigation cohérent

29. Proposer un breadcrumb

30. Proposer une recherche

31. Proposer des accès rapides

32. Exploiter la couleur

33. Proposer un contenu scannable

34. Attention : sans les yeux !

35. …mise en forme du contenu

36. …mise en forme du contenu

37. Go
Eviter les fenêtres…
Up !
Up !
Up !
Popup ! Pop…
Up ! Up ! Up !

38. Prévenez-moi avant de me changer de contexte…

39. Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »
39

40. « Guidelines ergo » vs « Guidelines accessibilité »
Guidage
Charge de travail
Contrôle explicite ATAG
Adaptabilité
Gestion des erreurs WCAG 2.0
Homogénéité / Cohérence
Signifiance des codes et dénominations
Compatibilité
Cela n’est pas la même chose néanmoins :
- il y a des correspondances
- c’est complémentaire

41. Accessibilité Ergonomie appliquée
Perception non visuelle
Perception visuelle Ecarts
Perceptible Visual perception
Perception visuelle Contrastes Positionnements
dégradée Lisibilité Formes
Limite de temps Mécanismes Stratégie
Utilisable Indépendance du d’orientation et aides d’accès Behavior
périphérique d’entrée Gestion des erreurs
Photosensibilité Constance et Zones topiques
prévisibilité des actions
Compréhensible Structure
sémantique Brain/Cognitive
Niveau de langage
Abréviations Signifiance
Robuste Conformité
Effort Emotion/Declarative
technique
Interface Satisfaction
spécifique
Source : Eric Gateau

42. Ergonomie Accessibilité

43. Notre approche « après »
• « Ergonomie » et « Accessibilité » : c’est pour le bien de
l’utilisateur n’est-ce pas ?
• A votre avis, est-ce que ce que l’on vous a présenté est
suffisant pour assurer un niveau de qualité optimal pour
l’utilisateur ?
43

44. Notre approche « après »
• On ne vous a présenté que des guidelines concernant le
produit fini…

45. La qualité pour l’utilisateur
• N’est pas qu’une question d’application de guidelines
« orientés produits »
• Faire un produit de qualité pour l’utilisateur… c’est faire
un produit adapté à :

46. La qualité pour l’utilisateur
• C’est surtout une question :
– de démarche orientée utilisateur.
– de guidelines orientés processus,
• « Certification du produit » versus « Certification du
processus »

47. Certification du processus ?
• ReNo – Référentiel de Normalisation
• Focus sur l’utilisateur avec deux composantes clé :
• ergonomie
• accessibilité

48. Méthodologie QUAPITAL - HERMES
Analyse Réalisation
Exemples de livrables : Exemple de livrable :
- Rapport d’analyse - Rapport de réalisation
- Cahier des charges de
conception
Bilan du
projet
Mise en ligne
Concept global
Exemple de livrable
Scope et objectifs - Rapport de conception
Exemples de livrables :
- Proposition de projet
- Manuel de projet
- Plan de projet Application des guidelines « orientés produits » ?
Ok, ça on sait faire… 48

49. Analyse des besoins utilisateurs Réalisation du site
2 Analyse des profils utilisateurs, analyse de Aspects techniques :
la tâche, définition des objectifs de qualité 7 Développements techniques
Aspects graphiques :
5 Design du layout global
6 Maquettes graphiques détaillées
7
8
1 2 3 4 5 6
Bilan du
projet
Idée de projet Mise en ligne
Définition du concept
1 Proposition de projet
3 Architecture de l’information
4 Storyboarding – Maquettes fonctionnelles « Basse fidélité »
Application des guidelines « orientés processus » !
49

51. Certification du processus ?
On a les livrables de base, que faire…
Définir :
1. Livrables intermédiaires,
2. Activités pour produire ces livrables,
3. Techniques (avec les utilisateurs) pour réaliser ces
activités.
Et des métriques clairs (seuils) pour évaluer leur pertinence

52. Conclusion
• On limite souvent l’accessibilité à l’application des
WCAG 2.0
• Tests utilisateurs en accessibilité ?
52