ergonomie et accessibilité sont dans un bateau : comment ramer dans la même direction ?
Upload: france-luxembourg-user-experience-professionals-association-flupa
Post on 05-Dec-2014
6.445 views
DESCRIPTION
TRANSCRIPT
![Page 1: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/1.jpg)
Ergonomie et Accessibilité sont dans un bâteau : comment ramer dans la même
direction ?
Gautier Barrère / Laurent Denis
Atelier FLUPA1
![Page 2: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/2.jpg)
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
![Page 3: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/3.jpg)
Objectifs de l’atelier
• Ce sont vos objectifs : petit tour de table ?
3
![Page 4: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/4.jpg)
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é »
![Page 5: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/5.jpg)
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
![Page 6: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/6.jpg)
Plan de l’atelier
1. Nos définitions « avant »2. Projet web3. Notre approche « après »
6
![Page 7: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/7.jpg)
Plan de l’atelier
7
1. Nos définitions « avant »2. Projet web3. Notre approche « après »
![Page 8: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/8.jpg)
Accessibilité ? Point de vue d’un l’ergonome
![Page 9: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/9.jpg)
Ergonomie ? Point de vue d’un expert accessibilité
![Page 10: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/10.jpg)
Plan de l’atelier
10
1. Nos définitions « avant »2. Projet web3. Notre synthèse « après »
![Page 11: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/11.jpg)
Prenons le point de vue de l’expert accessibilité
![Page 12: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/12.jpg)
Quelques exemples autour d’un cas précis
• Personne déficiente visuelle qui souhaite publier un blog
![Page 13: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/13.jpg)
Produire…. des contenus… Accessibles
ATAG
CMS,éditeurs
UAAG
Navigateurs,Aides
techniques
WCAG
Contenus
![Page 14: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/14.jpg)
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 ?
![Page 15: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/15.jpg)
Quelques exemples
![Page 16: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/16.jpg)
Un back-end accessible ?
Editeur Dotclear
![Page 17: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/17.jpg)
Un back-end qui peut produire de l’accessibilité ?
Editeur wysiwyg Edit-on Pro
![Page 18: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/18.jpg)
Supporter les fonctionnalités d’accessibilitéTitres, listes…
Alternatives textuelles
![Page 19: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/19.jpg)
L’ergonome intervient également…
![Page 20: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/20.jpg)
L’ergonome intervient également…
![Page 21: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/21.jpg)
Inciter à utiliser les fonctionnalités d’accessibilité
![Page 22: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/22.jpg)
Apporter une aide contextuelle
![Page 23: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/23.jpg)
Accessible ? Ergonomique ?
![Page 24: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/24.jpg)
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 ?
![Page 25: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/25.jpg)
Prenons ensuite le frond end
• Un contenu :– Perceptible,– Compréhensible,– Utilisable,– Robuste.
![Page 26: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/26.jpg)
Quelques exemples
![Page 27: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/27.jpg)
Sur base de vos connaissances des guidelines d’ergonomie et d’accessibilité… on parle de quoi ?
![Page 28: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/28.jpg)
Définir un système de navigation cohérent
![Page 29: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/29.jpg)
Proposer un breadcrumb
![Page 30: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/30.jpg)
Proposer une recherche
![Page 31: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/31.jpg)
Proposer des accès rapides
![Page 32: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/32.jpg)
Exploiter la couleur
![Page 33: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/33.jpg)
Proposer un contenu scannable
![Page 34: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/34.jpg)
Attention : sans les yeux !
![Page 35: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/35.jpg)
…mise en forme du contenu
![Page 36: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/36.jpg)
…mise en forme du contenu
![Page 37: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/37.jpg)
Go
Eviter les fenêtres…
Pop…
Up ! Up !
Up !
Up !
Popup !
Up !
Up !
![Page 38: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/38.jpg)
Prévenez-moi avant de me changer de contexte…
![Page 39: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/39.jpg)
Plan de l’atelier
39
1. Nos définitions « avant »2. Projet web3. Notre approche « après »
![Page 40: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/40.jpg)
« Guidelines ergo » vs « Guidelines accessibilité »
GuidageCharge de travailContrôle expliciteAdaptabilitéGestion des erreursHomogénéité / CohérenceSignifiance des codes et dénominationsCompatibilité
ATAG
WCAG 2.0
Cela n’est pas la même chose néanmoins : - il y a des correspondances- c’est complémentaire
![Page 41: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/41.jpg)
Accessibilité
Perceptible
Utilisable
Compréhensible
Robuste
Ergonomie appliquée
Visual perception
Behavior
Brain/Cognitive
Emotion/Declarative
Perception visuellePerception non visuelle
Perception visuelle dégradée
ContrastesLisibilité
Zones topiques
Structure sémantique
Gestion des erreurs
Stratégie d’accès
Conformitétechnique
Mécanismes d’orientation et aidesIndépendance du
périphérique d’entrée
Photosensibilité
Limite de temps
Niveau de langage
Effort
SatisfactionInterface spécifique
Abréviations
Ecarts
Positionnements
Signifiance
Formes
Constance et prévisibilité des actions
Source : Eric Gateau
![Page 42: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/42.jpg)
Ergonomie Accessibilité
![Page 43: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/43.jpg)
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
![Page 44: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/44.jpg)
Notre approche « après »
• On ne vous a présenté que des guidelines concernant le produit fini…
![Page 45: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/45.jpg)
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é à :
![Page 46: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/46.jpg)
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 »
![Page 47: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/47.jpg)
Certification du processus ?
• ReNo – Référentiel de Normalisation
• Focus sur l’utilisateur avec deux composantes clé : • ergonomie• accessibilité
![Page 48: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/48.jpg)
AnalyseExemples de livrables : - Rapport d’analyse- Cahier des charges de conception
Bilan du projet
Méthodologie QUAPITAL - HERMESRéalisation Exemple de livrable : - Rapport de réalisation
Mise en ligneConcept globalExemple de livrable- Rapport de conception Scope et objectifs
Exemples de livrables :- Proposition de projet - Manuel de projet - Plan de projet Application des guidelines « orientés produits » ?
Ok, ça on sait faire… 48
![Page 49: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/49.jpg)
Analyse des besoins utilisateurs Réalisation du site
Définition du conceptMise en ligne
Bilan du projet
2
2
Analyse des profils utilisateurs, analyse de la tâche, définition des objectifs de qualité
1
Idée de projet1 Proposition de projet
Aspects techniques :
Aspects graphiques :Design du layout global
Maquettes graphiques détaillées
5
6
7
Architecture de l’information
Storyboarding – Maquettes fonctionnelles « Basse fidélité »
3
4
83 4
7
5 6
Développements techniques
Application des guidelines « orientés processus » !49
![Page 50: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/50.jpg)
![Page 51: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/51.jpg)
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
![Page 52: Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?](https://reader033.vdocuments.pub/reader033/viewer/2022051514/548477d6b4af9f910d8b4b3e/html5/thumbnails/52.jpg)
Conclusion
• On limite souvent l’accessibilité à l’application des WCAG 2.0
• Tests utilisateurs en accessibilité ?
52