SlideShare une entreprise Scribd logo
1  sur  29
Télécharger pour lire hors ligne
Mobile et accessibilité
Une partie à Troie

Goulven Champenois
Qui suis-je ?
Mythe
“Les handicapés n’utilisent pas de
smartphones”
Vraiment ?
• OS accessible	

• Applications accessibles	

• Synthèse vocale préinstallée	

• Connection bluetooth aux plages braille et aides
audio	


• Applications de zoom, de reconnaissance optique	

• GPS voiture et piéton
28%

72%

72% des handicapés utilisent un lecteur
d’écran sur leur mobile
http://webaim.org/projects/screenreadersurvey4/#mobile
Pendant ce temps,	

sur le Web
On entend encore dire que l'accessibilité...	


• Concerne une minorité	

• Est un surcoût sans valeur ajoutée	

• On n’a pas le budget pour tout refaire
• Tous les visiteurs en bénéficient	

• Il faut casser l'existant de toute façon, car...	

• Plus de 25 millions de mobinautes en France
(chiffres Médiamétrie 2013)	


• Et trop peu de sites responsive ou mobiles
Un smartphone est utilisé	

plus de 2h par jour !

Étude IDC-Facebook “Always connected”	

https://fb-public.app.box.com/s/3iq5x6uwnqtq7ki4q8wk
Nous sommes
des cyborgs
Pourtant…
• Pas de souris	

700€
• Pas de clavier	

• Pas d'écran (enfin, tout petit)	

• Pas de plugins (flash, au hasard)	

• Pas toujours de connexion	

• Jamais assez d'autonomie
Les smartphones font
de nous des handicapés.
Puisque nous sommes handicapés,
le Web mobile doit être

• Perceptible	

• Opérable	

• Compréhensible	

• Robuste
WCAG = Règles pour l'Accessibilité des Contenus Web
<3
Responsive et accessible
Comment faire ?
Perceptible
• Alternatives (images, vidéos, audio)	

• Contraste et taille de texte	

• Attention aux popups et popins	

• Éviter les images de fond trop chargées	

• Attention à l'interligne (recouvrement)	

• Éviter le texte justifié sans césure
Opérable
• Ni survol ni tabulation	

• Attention aux iframes pièges à doigt !	

• Allongez le temps des sessions	

• Stockez la saisie en local
Compréhensible
• Spécifier la langue de la page	

• Expliciter les abréviations	

• Étiquettes pour les icônes	

• L'affichage doit correspondre à l'ordre du
code source	


• Valider la saisie à la volée
Robuste
• HTML valide	

• Types d’input adaptés	

• Alléger les pages (images, polices, Javascript)
Responsive : 	

forcément accessible ?
Oui, à condition de
• Permettre de zoomer	

• Fournir les mêmes contenus et fonctionnalités
Ne dites pas

Rendons le site accessible
Mais :

Faisons un site mobile
Et faites-le bien…
Un site mobile
doit 	

être
accessible
Crédits photo
• Trojan Horse 7 https://www.flickr.com/photos/urbanduck/6121857076/	

• Facepalm monkey https://www.flickr.com/photos/lars_in_japan/6600322055/	

• Ghost in the Shell http://www.comicwallpapers10.net/ghost-in-the-shell/
wallpaper-awesome-ghost-in-the-shell-wallpaper-3

Contenu connexe

En vedette

En vedette (20)

Alfombras de flores
Alfombras de floresAlfombras de flores
Alfombras de flores
 
Modulo 1
Modulo 1Modulo 1
Modulo 1
 
Ad donald zolan peintre d'enfants
Ad donald zolan peintre d'enfantsAd donald zolan peintre d'enfants
Ad donald zolan peintre d'enfants
 
Vernissage2
Vernissage2Vernissage2
Vernissage2
 
Pointdufle site web
Pointdufle site webPointdufle site web
Pointdufle site web
 
Qué Es La Web 2
Qué Es La Web 2Qué Es La Web 2
Qué Es La Web 2
 
Juegos De Terror.
Juegos De Terror.Juegos De Terror.
Juegos De Terror.
 
Que Passe Partout
Que Passe PartoutQue Passe Partout
Que Passe Partout
 
LAGA
LAGALAGA
LAGA
 
Y Me Queje
Y Me QuejeY Me Queje
Y Me Queje
 
Jenui2011 webservices
Jenui2011 webservicesJenui2011 webservices
Jenui2011 webservices
 
Types De Raisin
Types De RaisinTypes De Raisin
Types De Raisin
 
Annexes AG Fédération nationale des Villages étapes
Annexes AG Fédération nationale des Villages étapesAnnexes AG Fédération nationale des Villages étapes
Annexes AG Fédération nationale des Villages étapes
 
Nuevos Marcos Conceptuales
Nuevos Marcos ConceptualesNuevos Marcos Conceptuales
Nuevos Marcos Conceptuales
 
Graph insider social analytics e commerce france 26 oct 2012
Graph insider social analytics e commerce france 26 oct 2012Graph insider social analytics e commerce france 26 oct 2012
Graph insider social analytics e commerce france 26 oct 2012
 
Politica Ambiental S E N A
Politica  Ambiental  S E N APolitica  Ambiental  S E N A
Politica Ambiental S E N A
 
Clase 2 De Octubre 2009
Clase 2 De Octubre 2009Clase 2 De Octubre 2009
Clase 2 De Octubre 2009
 
La gripe "A"... la giuli
La gripe "A"... la giuliLa gripe "A"... la giuli
La gripe "A"... la giuli
 
Informae
InformaeInformae
Informae
 
Aufklärung
AufklärungAufklärung
Aufklärung
 

Similaire à Mobile et accessibilité, une partie à Troie

Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Christophe Porteneuve
 
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...Ametys
 
Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Sébastien Giroux
 
Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.DocDoku
 
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...polenumerique33
 
L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?Jean-Philippe Simonnet
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
 
Responsive logic - Kiwiparty
Responsive logic - KiwipartyResponsive logic - Kiwiparty
Responsive logic - KiwipartyJulien Cabanès
 
Accessibilité du Web et RGAA
Accessibilité du Web et RGAAAccessibilité du Web et RGAA
Accessibilité du Web et RGAAFabrice CROIZE
 
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCResponsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCKaelig Deloumeau-Prigent
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimediadefimedia
 
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesAccessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesEtienne Samson
 
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe CommunicationIntervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe CommunicationMONA
 
Ergonomie des sites internet touristique
Ergonomie des sites internet touristiqueErgonomie des sites internet touristique
Ergonomie des sites internet touristiqueUNITEC
 
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
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !Rossi Oddet
 

Similaire à Mobile et accessibilité, une partie à Troie (20)

Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
 
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
 
Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013
 
Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.
 
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
 
La Norme Wai
La Norme WaiLa Norme Wai
La Norme Wai
 
L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Responsive logic - Kiwiparty
Responsive logic - KiwipartyResponsive logic - Kiwiparty
Responsive logic - Kiwiparty
 
Accessibilité du Web et RGAA
Accessibilité du Web et RGAAAccessibilité du Web et RGAA
Accessibilité du Web et RGAA
 
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCResponsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBC
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesAccessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
 
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe CommunicationIntervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
 
Ergonomie des sites internet touristique
Ergonomie des sites internet touristiqueErgonomie des sites internet touristique
Ergonomie des sites internet touristique
 
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
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 

Plus de Goulven Champenois

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkGoulven Champenois
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)Goulven Champenois
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Goulven Champenois
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Goulven Champenois
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Goulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masquesGoulven Champenois
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusGoulven Champenois
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention dangerGoulven Champenois
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)Goulven Champenois
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifGoulven Champenois
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesGoulven Champenois
 

Plus de Goulven Champenois (18)

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field check
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)
 
Objectif : zéro déchet
Objectif : zéro déchetObjectif : zéro déchet
Objectif : zéro déchet
 
Attention Déchets
Attention DéchetsAttention Déchets
Attention Déchets
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?
 
UX et santé
UX et santéUX et santé
UX et santé
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !
 
Pour un Web inclusif
Pour un Web inclusifPour un Web inclusif
Pour un Web inclusif
 
Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masques
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processus
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention danger
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniques
 

Mobile et accessibilité, une partie à Troie