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

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

direction ?

Gautier Barrère / Laurent Denis

Atelier FLUPA1

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

Objectifs de l’atelier

• Ce sont vos objectifs : petit tour de table ?

3

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é »

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

Plan de l’atelier

1. Nos définitions « avant »2. Projet web3. Notre approche « après »

6

Plan de l’atelier

7

1. Nos définitions « avant »2. Projet web3. Notre approche « après »

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

Ergonomie ? Point de vue d’un expert accessibilité

Plan de l’atelier

10

1. Nos définitions « avant »2. Projet web3. 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

CMS,éditeurs

UAAG

Navigateurs,Aides

techniques

WCAG

Contenus

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 ?

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…

Alternatives textuelles

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 faire pour que le site (partie publique) soit accessible ?

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…

Pop…

Up ! Up !

Up !

Up !

Popup !

Up !

Up !

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

Plan de l’atelier

39

1. Nos définitions « avant »2. Projet web3. Notre approche « après »

« 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

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

Ergonomie Accessibilité

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

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 produit de qualité pour l’utilisateur… c’est faire un produit adapté à :

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 »

Certification du processus ?

• ReNo – Référentiel de Normalisation

• Focus sur l’utilisateur avec deux composantes clé : • ergonomie• accessibilité

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

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

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

Conclusion

• On limite souvent l’accessibilité à l’application des WCAG 2.0

• Tests utilisateurs en accessibilité ?

52