SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
Ergonomie                  21 juin 2012

    & accessibilité web        Laetitia Giannettini
                               giannettini@telono.com
    > L’accès au contenu web
                               Telono SA
                               telono.com



22/06/2012   slide 1   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 2   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 3   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 4   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 5   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 6   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 7   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 8   v1.0
Acheter un billet de train




22/06/2012   slide 9   v1.0
Accéder aux informations contenues dans une vidéo
                               http://www.youtube.com/watch?v=EgSrZ-s3MTY




22/06/2012   slide 10   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 11   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 12   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 13   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 14   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 15   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                              Situation
                   voyant                                 Non voyant



22/06/2012   slide 16   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 17   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 18   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_vid
         eos.html


22/06/2012   slide 19   v1.0
21 juin 2012


                                Laetitia Giannettini
    Merci de votre attention!   giannettini@telono.com


                                Telono SA
                                telono.com



22/06/2012   slide 20   v1.0

Contenu connexe

Tendances

Introduction aux systèmes d'exploitation mobile
Introduction aux systèmes d'exploitation mobileIntroduction aux systèmes d'exploitation mobile
Introduction aux systèmes d'exploitation mobileHoussem Rouini
 
Introduction au Cloud Computing
Introduction au Cloud Computing Introduction au Cloud Computing
Introduction au Cloud Computing FICEL Hemza
 
eServices-Chp4: ESB
eServices-Chp4: ESBeServices-Chp4: ESB
eServices-Chp4: ESBLilia Sfaxi
 
Bases de données réparties par la pratique
Bases de données réparties par la pratiqueBases de données réparties par la pratique
Bases de données réparties par la pratiqueAbdelouahed Abdou
 
eServices-Chp6: WOA
eServices-Chp6: WOAeServices-Chp6: WOA
eServices-Chp6: WOALilia Sfaxi
 
Architectures orientées services
Architectures orientées servicesArchitectures orientées services
Architectures orientées servicesDonia Hammami
 
Architectures n-tiers
Architectures n-tiersArchitectures n-tiers
Architectures n-tiersHeithem Abbes
 
Architectures distribuées
Architectures distribuéesArchitectures distribuées
Architectures distribuéesFranck SIMON
 
Services web soap-el-habib-nfaoui
Services web soap-el-habib-nfaouiServices web soap-el-habib-nfaoui
Services web soap-el-habib-nfaouiEl Habib NFAOUI
 
Architectures orientés services (SOA)
Architectures orientés services (SOA)Architectures orientés services (SOA)
Architectures orientés services (SOA)Heithem Abbes
 
Cours d'introduction au Cloud Computing
Cours d'introduction au Cloud ComputingCours d'introduction au Cloud Computing
Cours d'introduction au Cloud ComputingNicolas Hennion
 
Introduction aux bases de données
Introduction aux bases de donnéesIntroduction aux bases de données
Introduction aux bases de donnéesAbdoulaye Dieng
 
Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...
Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...
Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...Gedeon AGOTSI
 
Architecture des Systèmes Logiciels
Architecture des Systèmes LogicielsArchitecture des Systèmes Logiciels
Architecture des Systèmes LogicielsGhazouani Mahdi
 
Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Ramzi Noumairi
 
Python et son intégration avec Odoo
Python et son intégration avec OdooPython et son intégration avec Odoo
Python et son intégration avec OdooHassan WAHSISS
 

Tendances (20)

Introduction aux systèmes d'exploitation mobile
Introduction aux systèmes d'exploitation mobileIntroduction aux systèmes d'exploitation mobile
Introduction aux systèmes d'exploitation mobile
 
Présentation e-services
Présentation e-servicesPrésentation e-services
Présentation e-services
 
Uml Cas Utilisation introduction
Uml Cas Utilisation introductionUml Cas Utilisation introduction
Uml Cas Utilisation introduction
 
Introduction au Cloud Computing
Introduction au Cloud Computing Introduction au Cloud Computing
Introduction au Cloud Computing
 
Presentation SOAP
 Presentation SOAP Presentation SOAP
Presentation SOAP
 
eServices-Chp4: ESB
eServices-Chp4: ESBeServices-Chp4: ESB
eServices-Chp4: ESB
 
Bases de données réparties par la pratique
Bases de données réparties par la pratiqueBases de données réparties par la pratique
Bases de données réparties par la pratique
 
eServices-Chp6: WOA
eServices-Chp6: WOAeServices-Chp6: WOA
eServices-Chp6: WOA
 
Architectures orientées services
Architectures orientées servicesArchitectures orientées services
Architectures orientées services
 
Architectures n-tiers
Architectures n-tiersArchitectures n-tiers
Architectures n-tiers
 
Architectures distribuées
Architectures distribuéesArchitectures distribuées
Architectures distribuées
 
Services web soap-el-habib-nfaoui
Services web soap-el-habib-nfaouiServices web soap-el-habib-nfaoui
Services web soap-el-habib-nfaoui
 
Cloud presentation
Cloud  presentationCloud  presentation
Cloud presentation
 
Architectures orientés services (SOA)
Architectures orientés services (SOA)Architectures orientés services (SOA)
Architectures orientés services (SOA)
 
Cours d'introduction au Cloud Computing
Cours d'introduction au Cloud ComputingCours d'introduction au Cloud Computing
Cours d'introduction au Cloud Computing
 
Introduction aux bases de données
Introduction aux bases de donnéesIntroduction aux bases de données
Introduction aux bases de données
 
Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...
Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...
Mémoire de fin de formation pour l'obtention du diplome d'ingénieur des trava...
 
Architecture des Systèmes Logiciels
Architecture des Systèmes LogicielsArchitecture des Systèmes Logiciels
Architecture des Systèmes Logiciels
 
Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...
 
Python et son intégration avec Odoo
Python et son intégration avec OdooPython et son intégration avec Odoo
Python et son intégration avec Odoo
 

En vedette

L'économie du libre
L'économie du libreL'économie du libre
L'économie du libreGenève Lab
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications webmadsgraphics
 
Vous avez dit IHM ?
Vous avez dit IHM ?Vous avez dit IHM ?
Vous avez dit IHM ?ludolmn
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm ludolmn
 
IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteMarius Butuc
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHMAnne-Marie Pinna-Dery
 
Cours 3 : pratique de l’ergonomie et mobilité
Cours 3 :  pratique de l’ergonomie et mobilitéCours 3 :  pratique de l’ergonomie et mobilité
Cours 3 : pratique de l’ergonomie et mobilitéludolmn
 
Ergonomie des sites web
Ergonomie des sites webErgonomie des sites web
Ergonomie des sites webAref Jdey
 
Cours 1 : introduction a l'ergonomie logicielle
Cours 1 :  introduction a l'ergonomie logicielleCours 1 :  introduction a l'ergonomie logicielle
Cours 1 : introduction a l'ergonomie logicielleludolmn
 
Geneva Hackerspace
Geneva HackerspaceGeneva Hackerspace
Geneva HackerspacePaul Bristow
 
Transformation dans les organisations
Transformation dans les organisationsTransformation dans les organisations
Transformation dans les organisationsGenève Lab
 
Un living lab pour Genève
Un living lab pour GenèveUn living lab pour Genève
Un living lab pour GenèveGenève Lab
 
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Flupa
 
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...Bertrand Cochet
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEOSébastien Delorme
 

En vedette (20)

L'économie du libre
L'économie du libreL'économie du libre
L'économie du libre
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications web
 
Causerie ThinkData April 2012
Causerie ThinkData April 2012Causerie ThinkData April 2012
Causerie ThinkData April 2012
 
Vous avez dit IHM ?
Vous avez dit IHM ?Vous avez dit IHM ?
Vous avez dit IHM ?
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm
 
IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: Plasticite
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
 
Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
 
Intro conception2015vf bis
Intro conception2015vf bisIntro conception2015vf bis
Intro conception2015vf bis
 
Cours 3 : pratique de l’ergonomie et mobilité
Cours 3 :  pratique de l’ergonomie et mobilitéCours 3 :  pratique de l’ergonomie et mobilité
Cours 3 : pratique de l’ergonomie et mobilité
 
Ergonomie des sites web
Ergonomie des sites webErgonomie des sites web
Ergonomie des sites web
 
Cours Adaptation des IHM
Cours Adaptation des IHMCours Adaptation des IHM
Cours Adaptation des IHM
 
Cours 1 : introduction a l'ergonomie logicielle
Cours 1 :  introduction a l'ergonomie logicielleCours 1 :  introduction a l'ergonomie logicielle
Cours 1 : introduction a l'ergonomie logicielle
 
Geneva Hackerspace
Geneva HackerspaceGeneva Hackerspace
Geneva Hackerspace
 
Transformation dans les organisations
Transformation dans les organisationsTransformation dans les organisations
Transformation dans les organisations
 
Un living lab pour Genève
Un living lab pour GenèveUn living lab pour Genève
Un living lab pour Genève
 
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
 
Chp3 - IHM
Chp3 - IHMChp3 - IHM
Chp3 - IHM
 
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
 

Similaire à Ergonomie et accessibilité du Web

L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...
L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...
L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...Markus Riesch
 
Formation "Soigner ses TIC communautaires" AGIRgatineau_v221111-vfinale
Formation "Soigner ses TIC communautaires"  AGIRgatineau_v221111-vfinaleFormation "Soigner ses TIC communautaires"  AGIRgatineau_v221111-vfinale
Formation "Soigner ses TIC communautaires" AGIRgatineau_v221111-vfinaleS. Jochems UQAM
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuEric LAMIDIEU
 
Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011
Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011
Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011PraTIC / projet de l'UQAM
 
Introduction à l'accessibilité du Web
Introduction à l'accessibilité du WebIntroduction à l'accessibilité du Web
Introduction à l'accessibilité du WebTelono
 
Accessibilité 2.0, bien plus qu'un slogan
Accessibilité 2.0, bien plus qu'un sloganAccessibilité 2.0, bien plus qu'un slogan
Accessibilité 2.0, bien plus qu'un sloganPierre GUILLOU
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Ametys
 
Formation soigner ses TIC communautaires_fafmrq
Formation soigner ses TIC communautaires_fafmrqFormation soigner ses TIC communautaires_fafmrq
Formation soigner ses TIC communautaires_fafmrqS. Jochems UQAM
 
01 introduction-aux-technologies-web par-oussama_ben_khiroun
01 introduction-aux-technologies-web par-oussama_ben_khiroun01 introduction-aux-technologies-web par-oussama_ben_khiroun
01 introduction-aux-technologies-web par-oussama_ben_khirounOussama BEN KHIROUN
 
L’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsL’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsWilly Leloutre
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0audreyabbonen
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0Dominique74930
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0vedelipac
 
5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du TarnLudovic Dublanchet
 
Internet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et SyndicationInternet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et SyndicationTarn Tourisme
 
Les TIC et l'art : l'Accessibilité numérique
Les TIC et l'art : l'Accessibilité numériqueLes TIC et l'art : l'Accessibilité numérique
Les TIC et l'art : l'Accessibilité numériqueLesticetlart Invisu
 
Présentation googlewave g_cavril2010
Présentation googlewave g_cavril2010Présentation googlewave g_cavril2010
Présentation googlewave g_cavril2010gcardinal
 
Archives & Archivistes 2.0
Archives & Archivistes 2.0Archives & Archivistes 2.0
Archives & Archivistes 2.0souslapoussiere
 

Similaire à Ergonomie et accessibilité du Web (20)

L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...
L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...
L'accessibilité du Web en Suisse - Cadre législatif, certification, PDF Acces...
 
Conférence Accessibilité web
Conférence Accessibilité webConférence Accessibilité web
Conférence Accessibilité web
 
Formation "Soigner ses TIC communautaires" AGIRgatineau_v221111-vfinale
Formation "Soigner ses TIC communautaires"  AGIRgatineau_v221111-vfinaleFormation "Soigner ses TIC communautaires"  AGIRgatineau_v221111-vfinale
Formation "Soigner ses TIC communautaires" AGIRgatineau_v221111-vfinale
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric Lamidieu
 
Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011
Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011
Formation Soigner ses TIC ccommunautaires - AGIR, novembre 2011
 
Introduction à l'accessibilité du Web
Introduction à l'accessibilité du WebIntroduction à l'accessibilité du Web
Introduction à l'accessibilité du Web
 
Accessibilité 2.0, bien plus qu'un slogan
Accessibilité 2.0, bien plus qu'un sloganAccessibilité 2.0, bien plus qu'un slogan
Accessibilité 2.0, bien plus qu'un slogan
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
 
Formation soigner ses TIC communautaires_fafmrq
Formation soigner ses TIC communautaires_fafmrqFormation soigner ses TIC communautaires_fafmrq
Formation soigner ses TIC communautaires_fafmrq
 
01 introduction-aux-technologies-web par-oussama_ben_khiroun
01 introduction-aux-technologies-web par-oussama_ben_khiroun01 introduction-aux-technologies-web par-oussama_ben_khiroun
01 introduction-aux-technologies-web par-oussama_ben_khiroun
 
L’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsL’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publics
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0
 
5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn
 
Internet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et SyndicationInternet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et Syndication
 
Les TIC et l'art : l'Accessibilité numérique
Les TIC et l'art : l'Accessibilité numériqueLes TIC et l'art : l'Accessibilité numérique
Les TIC et l'art : l'Accessibilité numérique
 
130516-AccessibiliteAAS-Soutenance-LAST
130516-AccessibiliteAAS-Soutenance-LAST130516-AccessibiliteAAS-Soutenance-LAST
130516-AccessibiliteAAS-Soutenance-LAST
 
Présentation googlewave g_cavril2010
Présentation googlewave g_cavril2010Présentation googlewave g_cavril2010
Présentation googlewave g_cavril2010
 
Archives & Archivistes 2.0
Archives & Archivistes 2.0Archives & Archivistes 2.0
Archives & Archivistes 2.0
 

Plus de Genève Lab

L'innovation ouverte à l'ère du COVID
L'innovation ouverte à l'ère du COVIDL'innovation ouverte à l'ère du COVID
L'innovation ouverte à l'ère du COVIDGenève Lab
 
Open data - leçons en temps de crise
Open data - leçons en temps de criseOpen data - leçons en temps de crise
Open data - leçons en temps de criseGenève Lab
 
COVID-19 - L'impact des données ouvertes dans la couverture médiatique
COVID-19 - L'impact des données ouvertes dans la couverture médiatiqueCOVID-19 - L'impact des données ouvertes dans la couverture médiatique
COVID-19 - L'impact des données ouvertes dans la couverture médiatiqueGenève Lab
 
Reduction to practice: From DP3T to EN to SwissCovid
Reduction to practice: From DP3T to EN to SwissCovidReduction to practice: From DP3T to EN to SwissCovid
Reduction to practice: From DP3T to EN to SwissCovidGenève Lab
 
Mobilising collective intelligence to tackle the COVID-19 threat
Mobilising collective intelligence to tackle the COVID-19 threatMobilising collective intelligence to tackle the COVID-19 threat
Mobilising collective intelligence to tackle the COVID-19 threatGenève Lab
 
La littératie des données comme une pierre angulaire d'une nouvelle culture n...
La littératie des données comme une pierre angulaire d'une nouvelle culture n...La littératie des données comme une pierre angulaire d'une nouvelle culture n...
La littératie des données comme une pierre angulaire d'une nouvelle culture n...Genève Lab
 
Les ingrédients de la créativité
Les ingrédients de la créativitéLes ingrédients de la créativité
Les ingrédients de la créativitéGenève Lab
 
Collective Intelligence: what is it and why is it good for cities?
Collective Intelligence: what is it and why is it good for cities?Collective Intelligence: what is it and why is it good for cities?
Collective Intelligence: what is it and why is it good for cities?Genève Lab
 
Pluralisme des modes numériques de participation des habitants
Pluralisme des modes numériques de participation des habitantsPluralisme des modes numériques de participation des habitants
Pluralisme des modes numériques de participation des habitantsGenève Lab
 
Consul project : improving democracy through digital participation
Consul project : improving democracy through digital participationConsul project : improving democracy through digital participation
Consul project : improving democracy through digital participationGenève Lab
 
L'art au service de l'innovation sociale
L'art au service de l'innovation socialeL'art au service de l'innovation sociale
L'art au service de l'innovation socialeGenève Lab
 
RGPD et citoyens : et si le mariage prenait ?
RGPD et citoyens : et si le mariage prenait ?RGPD et citoyens : et si le mariage prenait ?
RGPD et citoyens : et si le mariage prenait ?Genève Lab
 
Plateforme de consultation et participation citoyenne Consul
Plateforme de consultation et participation citoyenne ConsulPlateforme de consultation et participation citoyenne Consul
Plateforme de consultation et participation citoyenne ConsulGenève Lab
 
Introduction à Linked Data
Introduction à Linked DataIntroduction à Linked Data
Introduction à Linked DataGenève Lab
 
La question éthique à l'ère de la data economy, de l'intelligence artificiell...
La question éthique à l'ère de la data economy, de l'intelligence artificiell...La question éthique à l'ère de la data economy, de l'intelligence artificiell...
La question éthique à l'ère de la data economy, de l'intelligence artificiell...Genève Lab
 
L'économie inclusive et les enjeux du numérique comme relais de croissance
L'économie inclusive et les enjeux du numérique comme relais de croissanceL'économie inclusive et les enjeux du numérique comme relais de croissance
L'économie inclusive et les enjeux du numérique comme relais de croissanceGenève Lab
 
Entreprise Numérisée : Ethique et GouvernanceS
Entreprise Numérisée : Ethique et GouvernanceSEntreprise Numérisée : Ethique et GouvernanceS
Entreprise Numérisée : Ethique et GouvernanceSGenève Lab
 
Exponentail Ethics
Exponentail EthicsExponentail Ethics
Exponentail EthicsGenève Lab
 
Notre avenir numérique
Notre avenir numérique  Notre avenir numérique
Notre avenir numérique Genève Lab
 

Plus de Genève Lab (20)

L'innovation ouverte à l'ère du COVID
L'innovation ouverte à l'ère du COVIDL'innovation ouverte à l'ère du COVID
L'innovation ouverte à l'ère du COVID
 
Open data - leçons en temps de crise
Open data - leçons en temps de criseOpen data - leçons en temps de crise
Open data - leçons en temps de crise
 
COVID-19 - L'impact des données ouvertes dans la couverture médiatique
COVID-19 - L'impact des données ouvertes dans la couverture médiatiqueCOVID-19 - L'impact des données ouvertes dans la couverture médiatique
COVID-19 - L'impact des données ouvertes dans la couverture médiatique
 
Reduction to practice: From DP3T to EN to SwissCovid
Reduction to practice: From DP3T to EN to SwissCovidReduction to practice: From DP3T to EN to SwissCovid
Reduction to practice: From DP3T to EN to SwissCovid
 
Mobilising collective intelligence to tackle the COVID-19 threat
Mobilising collective intelligence to tackle the COVID-19 threatMobilising collective intelligence to tackle the COVID-19 threat
Mobilising collective intelligence to tackle the COVID-19 threat
 
La littératie des données comme une pierre angulaire d'une nouvelle culture n...
La littératie des données comme une pierre angulaire d'une nouvelle culture n...La littératie des données comme une pierre angulaire d'une nouvelle culture n...
La littératie des données comme une pierre angulaire d'une nouvelle culture n...
 
Les ingrédients de la créativité
Les ingrédients de la créativitéLes ingrédients de la créativité
Les ingrédients de la créativité
 
Collective Intelligence: what is it and why is it good for cities?
Collective Intelligence: what is it and why is it good for cities?Collective Intelligence: what is it and why is it good for cities?
Collective Intelligence: what is it and why is it good for cities?
 
Pluralisme des modes numériques de participation des habitants
Pluralisme des modes numériques de participation des habitantsPluralisme des modes numériques de participation des habitants
Pluralisme des modes numériques de participation des habitants
 
Consul project : improving democracy through digital participation
Consul project : improving democracy through digital participationConsul project : improving democracy through digital participation
Consul project : improving democracy through digital participation
 
L'art au service de l'innovation sociale
L'art au service de l'innovation socialeL'art au service de l'innovation sociale
L'art au service de l'innovation sociale
 
Open Geneva
Open GenevaOpen Geneva
Open Geneva
 
RGPD et citoyens : et si le mariage prenait ?
RGPD et citoyens : et si le mariage prenait ?RGPD et citoyens : et si le mariage prenait ?
RGPD et citoyens : et si le mariage prenait ?
 
Plateforme de consultation et participation citoyenne Consul
Plateforme de consultation et participation citoyenne ConsulPlateforme de consultation et participation citoyenne Consul
Plateforme de consultation et participation citoyenne Consul
 
Introduction à Linked Data
Introduction à Linked DataIntroduction à Linked Data
Introduction à Linked Data
 
La question éthique à l'ère de la data economy, de l'intelligence artificiell...
La question éthique à l'ère de la data economy, de l'intelligence artificiell...La question éthique à l'ère de la data economy, de l'intelligence artificiell...
La question éthique à l'ère de la data economy, de l'intelligence artificiell...
 
L'économie inclusive et les enjeux du numérique comme relais de croissance
L'économie inclusive et les enjeux du numérique comme relais de croissanceL'économie inclusive et les enjeux du numérique comme relais de croissance
L'économie inclusive et les enjeux du numérique comme relais de croissance
 
Entreprise Numérisée : Ethique et GouvernanceS
Entreprise Numérisée : Ethique et GouvernanceSEntreprise Numérisée : Ethique et GouvernanceS
Entreprise Numérisée : Ethique et GouvernanceS
 
Exponentail Ethics
Exponentail EthicsExponentail Ethics
Exponentail Ethics
 
Notre avenir numérique
Notre avenir numérique  Notre avenir numérique
Notre avenir numérique
 

Ergonomie et accessibilité du Web

  • 1. Ergonomie 21 juin 2012 & accessibilité web Laetitia Giannettini giannettini@telono.com > L’accès au contenu web Telono SA telono.com 22/06/2012 slide 1 v1.0
  • 2. 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 2 v1.0
  • 3. 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 3 v1.0
  • 4. 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 4 v1.0
  • 5. 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 5 v1.0
  • 6. 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 6 v1.0
  • 7. 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 7 v1.0
  • 8. 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 8 v1.0
  • 9. Acheter un billet de train 22/06/2012 slide 9 v1.0
  • 10. Accéder aux informations contenues dans une vidéo http://www.youtube.com/watch?v=EgSrZ-s3MTY 22/06/2012 slide 10 v1.0
  • 11. 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 11 v1.0
  • 12. 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 12 v1.0
  • 13. 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 13 v1.0
  • 14. 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 14 v1.0
  • 15. 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 15 v1.0
  • 16. 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 Situation voyant Non voyant 22/06/2012 slide 16 v1.0
  • 17. 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 17 v1.0
  • 18. 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 18 v1.0
  • 19. 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_vid eos.html 22/06/2012 slide 19 v1.0
  • 20. 21 juin 2012 Laetitia Giannettini Merci de votre attention! giannettini@telono.com Telono SA telono.com 22/06/2012 slide 20 v1.0