22/06/2012 slide 1 v1.0

Ergonomie & accessibilité web

> L’accès au contenu web

21 juin 2012

Laetitia Giannettini

giannettini@telono.com Telono SA telono.com

22/06/2012 slide 2 v1.0

Ergonomie

Etude scientifique de la relation entre l'homme et ses moyens, méthodes et milieux de travail

et l'application de ces connaissances à la conception de systèmes qui puissent être utilisés avec le

maximum de confort, de sécurité et d'efficacité par le plus grand nombre

22/06/2012 slide 3 v1.0

Evolution vers l’ergonomie du web

Historique

Existe depuis le début du XXe siècle

Ergonomie et physiologie

Ergonomie et psychologie

Ergonomie cognitive

Ergonomie informatique ou ergonomie de l’Interaction Homme-Machine (IHM)

Ergonomie des sites et applications web

22/06/2012 slide 4 v1.0

Ergonomie web

Adapter l’interface utilisateur web aux caractéristiques des personnes qui l’utilisent :

• rechercher l’adéquation entre les utilisateurs (logique,

besoin, modèle mental) et celle du système (contexte d’utilisation)

• diminuer l’écart entre le prescrit (procédures,

fonctionnements officiels) et l’activité réelle (stratégies réellement mise en œuvre par les gens pour réaliser la tâche demandée)

22/06/2012 slide 5 v1.0

Accessibilité

L’accessibilité est un terme principalement relatif au monde du handicap utilisé pour désigner l'accès aux domaines :

Physique

Educatif

Civique

Culturel

Travail

Numérique : accès aux outils/services informatiques

Accessibilité du contenu web

22/06/2012 slide 6 v1.0

Accessibilité web

« Mettre le web et ses services à la disposition de

tous les individus quel que soit leur matériel ou

logiciel, leur infrastructure réseau, leur langue

maternelle, leur culture, leur localisation

géographique, ou leurs aptitudes physiques ou

mentales. »

Tim Berner-Lee (Fondateur du W3C)

22/06/2012 slide 7 v1.0

Accessibilité et ergonomie web

2 disciplines différentes qui font appel à des connaissances et compétences distinctes mais qui convergent et partagent une philosophie commune :

Faciliter l’accès à l’information et aux services rendus par le web pour les différents profils d’utilisateurs potentiels

22/06/2012 slide 8 v1.0

Catastrophe ergonomique et/ou d’accessibilité sur le web

Quelques illustrations de non adéquation entre les caractéristiques des utilisateurs et celles du système

22/06/2012 slide 9 v1.0

Acheter un billet de train

22/06/2012 slide 10 v1.0

Accéder aux informations contenues dans une vidéo

http://www.youtube.com/watch?v=EgSrZ-s3MTY

22/06/2012 slide 11 v1.0

Accéder aux informations contenues dans une vidéo

Exemple des conférence TED : philosophie d’accés à l’information et à la connaissance par tous dans le monde entier

22/06/2012 slide 12 v1.0

Accéder aux informations contenues dans une vidéo

Exemple des conférence TED : philosophie de l’accés à l’information et à la connaissance par tous dans le monde entier

22/06/2012 slide 13 v1.0

Surfer sans souris

La navigation au clavier peut s’avérer fastidieuse

L’ajout de liens type “accéder directement au contenu”, “Aller au menu principal” facilite la navigation pour les personnes qui naviguent avec leur clavier :

22/06/2012 slide 14 v1.0

Surfer avec un lecteur d’écran ou synthèse vocale

L’indication dans le code html des différents niveaux de titres dans une page web permet aux utilisateurs d’un lecteur d’écran de pouvoir eux aussi “voir” la structure de la page

22/06/2012 slide 15 v1.0

Surfer avec un lecteur d’écran ou synthèse vocale

CAPTCHA : accès au débat interdit aux non-voyants

Exemple de solutions alternatives: • ajout de Captcha

sonore

22/06/2012 slide 16 v1.0

Surfer avec un lecteur d’écran ou synthèse vocale

Pour rendre un formulaire “visible” :

lier dans la structure html le libellé du champ avec le champ de saisie

Donner le rôle de bouton au bouton !

Situation

voyant

Situation

Non voyant

22/06/2012 slide 17 v1.0

Qui bénéficie de l’accessibilité du contenu web ?

Tous les utilisateurs du web !

nous sommes tous à un moment ou un autre en situation d’handicap

connexion lente ou consultation en situation de mobilité dans environnement bruyant ou autre

défi de l’augmentation du nombre de personnes âgées (problème grandissant de vision ou de motricité)

Meilleure valorisation du contenu web

meilleure diffusion de ce contenu par d’autres, sous d’autres formes

22/06/2012 slide 18 v1.0

Ergonomie et accessibilité web : un éternel renouveau

Aujourd’hui meilleure prise de conscience et compréhension des problèmes d’utilisation et d’accès à l’information du web

Mais encore beaucoup à faire pour implémenter et rendre durable l’accessibilité du contenu web à grande échelle !

22/06/2012 slide 19 v1.0

Pour aller plus loin…

…dans l’indépendance et l’autonomie

se déplacer (voir à partir de la minute 7:38)

http://www.youtube.com/watch?v=NnQ3Kc3PIjM

communiquer Application iPad assistiveWare :

http://www.youtube.com/watch?v=-xuUWxIY7SM

Projet EasySMS avec l’EPFL (Ecole Polytechnique Fédérale de Lausanne) :

http://design.epfl.ch/easysms/blog/texting4all/Our_videos.html

22/06/2012 slide 20 v1.0

Merci de votre attention!

21 juin 2012 Laetitia Giannettini giannettini@telono.com Telono SA telono.com