Ergonomie et Accessibilité sont dans un
 bâteau : comment ramer dans la même
              direction ?


     Gautier Barr...
Qui sommes-nous ?
• Gautier Barrère
   – Ergonome - Web
   – Chef de projet – Coordination Présence Internet
   – Membre d...
Objectifs de l’atelier
• Ce sont vos objectifs : petit tour de table ?




                                               ...
Objectifs de l’atelier
• Comprendre :
   – la frontière entre « Accessibilité » et « Ergonomie »
   – toutes les belles ch...
Atelier = Vive l’interaction
• Nos slides sont moches et peu travaillés ?
   – C’est fait exprès !


• L’important pour no...
Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »




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




                             ...
Accessibilité ? Point de vue d’un l’ergonome
Ergonomie ? Point de vue d’un expert accessibilité
Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre synthèse « après »




                             ...
Prenons le point de vue de l’expert accessibilité
Quelques exemples autour d’un cas précis
• Personne déficiente visuelle qui souhaite publier un blog
Produire….   des contenus…   Accessibles



ATAG            WCAG            UAAG

 CMS,          Contenus       Navigateur...
Prenons d’abord le back end
• Cette personne déficiente visuelle va d’abord être
  concernée par le back end

• Comment fa...
Quelques exemples
Un back-end accessible ?

                           Editeur Dotclear
Un back-end qui peut produire de l’accessibilité ?


                            Editeur wysiwyg Edit-on Pro
Supporter les fonctionnalités d’accessibilité
                  Titres, listes…




                                    Al...
L’ergonome intervient également…
L’ergonome intervient également…
Inciter à utiliser les fonctionnalités d’accessibilité
Apporter une aide contextuelle
Accessible ? Ergonomique ?
Prenons ensuite le frond end
• Cette personne déficiente visuelle va ensuite être
  concernée par le frond end

• Comment ...
Prenons ensuite le frond end
• Un contenu :
   –   Perceptible,
   –   Compréhensible,
   –   Utilisable,
   –   Robuste.
Quelques exemples
Sur base de vos connaissances des guidelines
d’ergonomie et d’accessibilité… on parle de quoi ?
Définir un système de navigation cohérent
Proposer un breadcrumb
Proposer une recherche
Proposer des accès rapides
Exploiter la couleur
Proposer un contenu scannable
Attention : sans les yeux !
…mise en forme du contenu
…mise en forme du contenu
Go




Eviter les fenêtres…
         Up !
                       Up !
                                 Up !

      Popup !...
Prévenez-moi avant de me changer de contexte…
Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »




                             ...
« Guidelines ergo » vs « Guidelines accessibilité »



Guidage
Charge de travail
Contrôle explicite                       ...
Accessibilité                                                                               Ergonomie appliquée

         ...
Ergonomie   Accessibilité
Notre approche « après »
• « Ergonomie » et « Accessibilité » : c’est pour le bien de
  l’utilisateur n’est-ce pas ?

• A ...
Notre approche « après »
• On ne vous a présenté que des guidelines concernant le
  produit fini…
La qualité pour l’utilisateur
• N’est pas qu’une question d’application de guidelines
  « orientés produits »

• Faire un ...
La qualité pour l’utilisateur
• C’est surtout une question :
   – de démarche orientée utilisateur.
   – de guidelines ori...
Certification du processus ?
• ReNo – Référentiel de Normalisation

• Focus sur l’utilisateur avec deux composantes clé :
...
Méthodologie QUAPITAL - HERMES
             Analyse                                         Réalisation
             Exemp...
Analyse des besoins utilisateurs                                   Réalisation du site
    2 Analyse des profils utilisate...
Certification du processus ?
On a les livrables de base, que faire…

Définir :
1. Livrables intermédiaires,
2. Activités p...
Conclusion
• On limite souvent l’accessibilité à l’application des
  WCAG 2.0

• Tests utilisateurs en accessibilité ?



...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?
Prochain SlideShare
Chargement dans…5
×

Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?

4 777 vues

Publié le

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

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

Aucune remarque pour cette diapositive

Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?

  1. 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. 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. 3. Objectifs de l’atelier • Ce sont vos objectifs : petit tour de table ? 3
  4. 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. 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. 6. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre approche « après » 6
  7. 7. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre approche « après » 7
  8. 8. Accessibilité ? Point de vue d’un l’ergonome
  9. 9. Ergonomie ? Point de vue d’un expert accessibilité
  10. 10. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre synthèse « après » 10
  11. 11. Prenons le point de vue de l’expert accessibilité
  12. 12. Quelques exemples autour d’un cas précis • Personne déficiente visuelle qui souhaite publier un blog
  13. 13. Produire…. des contenus… Accessibles ATAG WCAG UAAG CMS, Contenus Navigateurs, éditeurs Aides techniques
  14. 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. 15. Quelques exemples
  16. 16. Un back-end accessible ? Editeur Dotclear
  17. 17. Un back-end qui peut produire de l’accessibilité ? Editeur wysiwyg Edit-on Pro
  18. 18. Supporter les fonctionnalités d’accessibilité Titres, listes… Alternatives textuelles
  19. 19. L’ergonome intervient également…
  20. 20. L’ergonome intervient également…
  21. 21. Inciter à utiliser les fonctionnalités d’accessibilité
  22. 22. Apporter une aide contextuelle
  23. 23. Accessible ? Ergonomique ?
  24. 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. 25. Prenons ensuite le frond end • Un contenu : – Perceptible, – Compréhensible, – Utilisable, – Robuste.
  26. 26. Quelques exemples
  27. 27. Sur base de vos connaissances des guidelines d’ergonomie et d’accessibilité… on parle de quoi ?
  28. 28. Définir un système de navigation cohérent
  29. 29. Proposer un breadcrumb
  30. 30. Proposer une recherche
  31. 31. Proposer des accès rapides
  32. 32. Exploiter la couleur
  33. 33. Proposer un contenu scannable
  34. 34. Attention : sans les yeux !
  35. 35. …mise en forme du contenu
  36. 36. …mise en forme du contenu
  37. 37. Go Eviter les fenêtres… Up ! Up ! Up ! Popup ! Pop… Up ! Up ! Up !
  38. 38. Prévenez-moi avant de me changer de contexte…
  39. 39. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre approche « après » 39
  40. 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. 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. 42. Ergonomie Accessibilité
  43. 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. 44. Notre approche « après » • On ne vous a présenté que des guidelines concernant le produit fini…
  45. 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. 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. 47. Certification du processus ? • ReNo – Référentiel de Normalisation • Focus sur l’utilisateur avec deux composantes clé : • ergonomie • accessibilité
  48. 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. 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
  50. 50. 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
  51. 51. Conclusion • On limite souvent l’accessibilité à l’application des WCAG 2.0 • Tests utilisateurs en accessibilité ? 52

×