SlideShare une entreprise Scribd logo
Comment dépasser l’écran tactile
pour une meilleure accessibilité des applications
smartphones et tablettes
Fabien Marry
@AlphabUX
Sommaire
Introduction: Noëlle... et tous les autres
Les appareils mobiles : un don du ciel pour l'accessibilité
Par où commencer ?
Un message personnel du Professeur Hawking
Pour aller plus loin
@AlphabUX #FlupaUxDay
Introduction
@AlphabUX #FlupaUxDay
Introduction
Noëlle
Je vous présente Noëlle, ma grand-mère.
Elle a 95 ans et est en grande forme...
Elle adore recevoir des cartes postales
lorsque nous partons en vacances, alors je
lui en ai écrit une à chaque voyage.
Mais maintenant, sa vue est trop faible, et
elle ne peux plus lire la plupart des choses.
@AlphabUX #FlupaUxDay
Introduction
Noëlle
Mais je continue a lui écrire, j'écris juste
plus gros !
@AlphabUX #FlupaUxDay
Introduction
Etre inclusif est facile, il suffit de le vouloir
Besoins légèrement différents
+ juste un petit effort
=> inclusion
@AlphabUX #FlupaUxDay
Introduction
Il n’y a pas que Noëlle...
Mean
Upper limit
Lower limit
Age (Years)
OcularAccommodation(Dioptres)
0 10 20 30 40 50 60 70
0
2
4
6
8
10
12
14
Haute
Base
Moy.
Age (années)
Accommodationoculaire(années)
C’est pour tout le monde pareil : notre vue
va empirer avec l'âge, peut être beaucoup
plus tôt que ce que vous pensez...
C’est quelque chose dont on doit tenir
compte, particulièrement quand les
designers sont souvent plutôt jeunes...
@AlphabUX #FlupaUxDay
Introduction
La population française en chiffres
http://www.webaccessibilite.fr/les-chiffres-du-handicap-en-France-2009-08-17.php
12 millions
ont un handicap
5.18
millions
déficient auditifs
2,3 millions
déficient moteurs
700 000
handicap
intellectuel
8% des hommes
0.45% des femmes
souffrent de daltonisme
1,7 millions
déficient visuels
Source: INSEE, Handicap, incapacités, dépendance (HID), 1998-2001
700 000
handicap
intellectuel
@AlphabUX #FlupaUxDay
Introduction
Population du Royaume Uni n’ayant jamais utilisé internet
53%
47%
ont$un$handicap
Première raison de s’y intéresser: le
handicap est un facteur majeur d’exclusion
numérique
@AlphabUX #FlupaUxDay
Introduction
Etendre votre marché potentiel
How many people have less than Full ability ?
Source: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999)
http://www.inclusivedesigntoolkit.com/
Combien de gens ont une “capabilite reduite”?
Tranche d’age
%delatranched’âge
la moitié de la
population adulte
Reason to care 2
@AlphabUX #FlupaUxDay
Introduction
Etendre votre marché potentiel
Money to spend and time to spend it
Source: The Henley Centre, Family Expenditure Survey (1996)
http://www.inclusivedesigntoolkit.com/
Revenu disponible
Temps libre
moyen par jour
Opportunité !
@AlphabUX #FlupaUxDay
Introduction
Une population vieillisante
Japon
Vu que dans la plupart de pays développes
la population vieillit, ces besoins ne vont
que grandir.
@AlphabUX #FlupaUxDay
Introduction
Un superbe opportunité de promotion pour vos clients
“ Votre produit désormais accessible
aux personnes avec déficiences
visuelle”
Reason to care 3
@AlphabUX #FlupaUxDay
Introduction
En France, une obligation légale... limitée
Article 47 de la loi du 11 février 2005 "pour
l'égalité des droits et des chances, la 
participation et la citoyenneté des
personnes handicapées".
The Disability Discrimination Act 1995
(DDA)
Article 9 de la convention relative aux droits
des personnes handicapées adoptée par
l’ONU en 2006
http://www.journaldunet.com/ebusiness/
Les appareils mobiles : un don du ciel
pour l’accessibilité
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Appareil d’accessibilité typique
Seulement
5800 €
Méthode de communication alternative
Mono fonction
Un design tres grossier, qui entraine uen
stigmatisation
Difficile a trovuer
Cher!
https://store.prentrom.com/
product_info.php/cPath/11/products_id/207
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Les fonctions d’accessibilité sont désormais inclues dans
les appareils grand public
• Moins cher
• Meilleur design
• Meilleures finitions
• Plus de fonctionnalités
• Pas de stigmatisation
je vais essentiellement parler d’ iOS parce
que c’est la plate-forme la plus avancée
pour l'accessibilité, mais Android rattrape
son retard, et les recommandations sont
essentiellement les mêmes.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Les fonctions d’accessibilité sont désormais inclues dans
les appareils grand public
“ Il n’y a rien de ce que vous
pouvez faire sur l’iPhone ou l’iPad que
je ne peux pas faire! ”
Stevie Wonder
le fait que ces fonctionnalités soit
incorporées par défaut joue un grand rôle
pour combler cette fracture numérique.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Zoom
Un simple zoom, qui marche partout, mais
n’est pas très pratique vu qu’il faut faire
défiler le contenu pour le voir
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : mode couleurs inversées (contraste élevé)
Peut aider des personnes avec certains
problèmes de vue.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Assistive Touch
Fourni un moyen logiciel de faire ce qui
habituellement nécessite des mouvements
manuels très précis : gestes a plusieurs
doigts, secouer, et même des gestes
personnalisés que d’autres peuvent pré-
programmer pour vous.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : motifs de vibration personnalisés
Mais il n’y a pas que la vue ou l’audition: le
toucher peut aussi être utilise pour
communiquer des informations, avec
diffèrents motifs de vibrations
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : mode grande police
Cela ne marche que pour certaines
applications Apple, ce réglage n’est pas
accessible aux applications tierces.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Lecteur
Safari ne suit pas ce réglage de grande
police, et contrairement à la version Mac,
ne fournit pas de bouton pour agrandir le
texte.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Lecteur
On peux habituellement zoomer grâce au
geste pincer / écarter, même si parfois un
site web responsif peut bloquer ça.
Mais surtout Safari a son mode lecteur.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Lecteur
Qui lui a un bouton pour agrandir la police.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Lecteur
Qui lui a un bouton pour agrandir la police.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : Safari and son mode Lecteur
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Inclus dans iOS : VoiceOver
Démo: Comment une personne aveugle utilise un iPad
Voice over c’est la passerelle pour
beaucoup de fonctions d’accessibilité.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
L’histoire d’Andy
Je vous présente Andy.
Un gars moyen d’une vingtaine d'années.
Pendant ses vacances, il à plongé dans un
petit lac...
Et il a heurté un rocher.
Il s’est blessé gravement.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
L’histoire d’Andy
...et il est depuis paralysé des pieds au cou.
Ce qui veut dire qu’il ne pouvait plus faire
grand chose sans l’aide de quelqu'un
d’autre.
*slow*Essayez d’imaginer cela ne serait-ce
qu’un instant...
D’un jour a l’autre, il ne pouvait plus passer
un coup de fil tout seul, ne pouvait plus
envoyer un email ou texto tout seul, et il
avait besoin que quelqu’un lui lise les
messages qu’il recevait.
Brutalement, il n’avait plus d'indépendance,
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
L’histoire d’Andy
Heureusement est arrivé iPortal, un produit
qui s'intègre a son fauteuil roulant, et qui
utilise le joystick de menton pour contrôler
le curseur VoiceOver de son iPhone.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
http://www.gatech.edu/newsroom/release.html?nid=110351
Grâce à ce curseur de VoiceOver,
beaucoup d’accessoires divers et variés
sont supportés. (Egalement un fauteuil
avec des appuis têtes qui servent de
contrôles).
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
http://www.hims-inc.com/products/deaf-blind-communicators/
D’autres exemples un clavier Braille pour
entrer ou lire du texte.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
http://store.griffintechnology.com/mouthstick-stylus
Dans un style plus simple et bien moins
cher: un stylet de bouche, mais qui peut
déjà aider beaucoup.
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
iOS : plus q’un écran tactile
Et enfin n’oublions pas la commande vocale
qui commence enfin a marcher
correctement, et les assistant numérique tel
Siri ou Google now sont désormais
capables de depasser la compréhension de
simple commandes pour gérer des requêtes
complexes en langage naturel tel que
“rappelle moi d’acheter du lait quand je qui
le boulot”. Mais pour le moment, ce n’est
pas encore ouvert au développer tiers..
@AlphabUX #FlupaUxDay
Les appareils mobiles : un don du ciel pour l’accessibilité
Changer des vies... mais seulement si vous rendez vos
applis accessibles !
Toutes ces capacités sont incluses mais
vous devez faire votre part du boulot pour
en tirer pleinement partie.
Par où commencer ?
Ventes Scoping
UX
UI
Développement
Assurance
Qualité
Pour une entreprise, vendre des produit
avec une bonne accessibilité nécessite un
effort collectif: les ventes doivent le
présenter aux clients comme un avantage
compétitif, le scoping doit en tenir compte
dans leur devis, l’UX doit concevoir une
appli qui ne dépende pas des visuels, et les
graphistes doivent penser particulièrement
à la lisibilité, au contraste et au daltonisme.
@AlphabUX #FlupaUxDay
Par où commencer ?
Au minimum: ajouter des metadonnées d'accessibilité
à votre interface
• Accessibility : Si décoché, cet élément sera
ignoré par le curseur VoiceOver.
• Label : Un court texte prononcé après le
focus.
• Hint : un message plus long lu après le label
et une pause (an explication, pas un ordre).
• Trait : Défini le type d’interaction.
Ajouter
Ajoute$un$0tre
La plupart de celles-ci sont sont déjà
renseignées si vous utiliser des éléments UI
standards
Tout particulièrement les boutons en image
sans texte ont besoin d’un label.
Ces meta-donnes sont la clé pour tout ce
que VoiceOver permet: l’interface parlée
bien sur, mais aussi les appareil braille et
autres.
Et on peut très bien imaginer une version
© 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5
Tigerspike London
Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com
iPad 14:04 PM
Velum - iPad publication iPad Wireframes & Functional Overview
1.0 Issue Library LS
⚙ "LOGO⚙ "
Issue Info Panel
1.0 Issue Library LS
Allows users to quickly choose which Issues to read.
Provides access to stored Favorite Articles and App
Settings.
1. SETTINGS BUTTON
[Gesture: Tap] Goes to "Settings".
[Transition: Slide] When Settings is opened it slides up from bottom of
screen above the Issue Library layer, upon closing it slide
back down revealing the Archive below.
[A11y: enabled; Label: "Settings"]
2. FAVOURITES BUTTON
[Gesture: Tap] Goes to "Favourites".
[Transition: Slide] When Favourite is tapped, it (animated) slides up from
bottom of screen above the Issue Library layer, upon closing it slide back
down revealing the archive.
[A11y: enabled; Label: "Favourites", Hint: "Access your favourites
articles";]
3. PREVIOUS ISSUE COVER
[Gesture: Tap] Slides (animated) issues to previous issue*
[Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF
DL'd] opens issue
[Transition: Slide horizontally]
[A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue
title>." Trait: button, image]
4. NEXT ISSUE COVER
[Gesture: Tap] Slides (animated) issues to next issue*
[Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd]
opens issue
[A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue
title>."; Trait: button, image].
5. SELECTED ISSUE COVER
[Gesture: Swipe Right] Slides (animated) issues to previous issue*
[Gesture: Swipe Left] Slides (animated) issues to next issue*
If the issue has not yet downloaded:
[Gesture: Tap] Starts downloading the issue.
[A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait:
Selected, button, image].
If the issue has already been downloaded:
[Gesture: Tap] Open the issue.
[Transition: Expand] The cover expands to fill screen
[Transition: Fade] Front cover fades to pre-roll advert
[Transition: Fade] Pre-roll advert fades to Issue Contents Page
[A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait:
button, image].
6. ISSUE INFO PANEL
See "1.1 Issue Library - Issue Info Panel" page.
*chronologically
1 2
3 4
6
5
@AlphabUX #FlupaUxDay
Par où commencer ?
Documenter les métadonnées d'accessibilité
Ces méta-données ne doivent pas être
abandonnés au développers pour qu’ils les
inclus vite fait presque en douce à la
dernière minute.
Elle constituent une part entière et cruciale
de votre application, tout comme le texte
qui est affiché. Et elle doivent recevoir la
même attention, y compris réfléchir quel
ton et maniere de parler sont les plus
appropriés pour cette marque.
Cela doit donc être fait a l'étape UX, et
© 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5
Tigerspike London
Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com
iPad 14:04 PM
Velum - iPad publication iPad Wireframes & Functional Overview
1.0 Issue Library LS
⚙ "LOGO⚙ "
Issue Info Panel
1.0 Issue Library LS
Allows users to quickly choose which Issues to read.
Provides access to stored Favorite Articles and App
Settings.
1. SETTINGS BUTTON
[Gesture: Tap] Goes to "Settings".
[Transition: Slide] When Settings is opened it slides up from bottom of
screen above the Issue Library layer, upon closing it slide
back down revealing the Archive below.
[A11y: enabled; Label: "Settings"]
2. FAVOURITES BUTTON
[Gesture: Tap] Goes to "Favourites".
[Transition: Slide] When Favourite is tapped, it (animated) slides up from
bottom of screen above the Issue Library layer, upon closing it slide back
down revealing the archive.
[A11y: enabled; Label: "Favourites", Hint: "Access your favourites
articles";]
3. PREVIOUS ISSUE COVER
[Gesture: Tap] Slides (animated) issues to previous issue*
[Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF
DL'd] opens issue
[Transition: Slide horizontally]
[A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue
title>." Trait: button, image]
4. NEXT ISSUE COVER
[Gesture: Tap] Slides (animated) issues to next issue*
[Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd]
opens issue
[A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue
title>."; Trait: button, image].
5. SELECTED ISSUE COVER
[Gesture: Swipe Right] Slides (animated) issues to previous issue*
[Gesture: Swipe Left] Slides (animated) issues to next issue*
If the issue has not yet downloaded:
[Gesture: Tap] Starts downloading the issue.
[A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait:
Selected, button, image].
If the issue has already been downloaded:
[Gesture: Tap] Open the issue.
[Transition: Expand] The cover expands to fill screen
[Transition: Fade] Front cover fades to pre-roll advert
[Transition: Fade] Pre-roll advert fades to Issue Contents Page
[A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait:
button, image].
6. ISSUE INFO PANEL
See "1.1 Issue Library - Issue Info Panel" page.
*chronologically
1 2
3 4
6
5
@AlphabUX #FlupaUxDay
Par où commencer ?
Documenter les métadonnées d'accessibilité
Last Update: 11 / 02 / 2013 Page: 5
[Gesture: Tap] Goes to "Favourites".
[Transition: Slide] When Favourite is tapped, it (animated) slides up from
bottom of screen above the Issue Library layer, upon closing it slide back
down revealing the archive.
[A11y: enabled; Label: "Favourites", Hint: "Access your favourites
articles";]
3. PREVIOUS ISSUE COVER
[Gesture: Tap] Slides (animated) issues to previous issue*
[Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF
DL'd] opens issue
[Transition: Slide horizontally]
[A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue
title>." Trait: button, image]
4. NEXT ISSUE COVER
[Gesture: Tap] Slides (animated) issues to next issue*
[Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd]
opens issue
[A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue
title>."; Trait: button, image].
5. SELECTED ISSUE COVER
[Gesture: Swipe Right] Slides (animated) issues to previous issue*
[Gesture: Swipe Left] Slides (animated) issues to next issue*
If the issue has not yet downloaded:
[Gesture: Tap] Starts downloading the issue.
[A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait:
Selected, button, image].
If the issue has already been downloaded:
[Gesture: Tap] Open the issue.
[Transition: Expand] The cover expands to fill screen
[Transition: Fade] Front cover fades to pre-roll advert
[Transition: Fade] Pre-roll advert fades to Issue Contents Page
[A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait:
button, image].
6. ISSUE INFO PANEL
See "1.1 Issue Library - Issue Info Panel" page.
*chronologically
Ces méta-données ne doivent pas être
abandonnés au développers pour qu’ils les
inclus vite fait presque en douce à la
dernière minute.
Elle constituent une part entière et cruciale
de votre application, tout comme le texte
qui est affiché. Et elle doivent recevoir la
même attention, y compris réfléchir quel
ton et maniere de parler sont les plus
appropriés pour cette marque.
Cela doit donc être fait a l'étape UX, et
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Escape
Un geste en forme de Z à deux doigts est le
standard pour fermer les dialogues modaux ou
remonter d’un niveau dans une navigations.
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Escape
Un geste en forme de Z à deux doigts est le
standard pour fermer les dialogues modaux ou
remonter d’un niveau dans une navigations.
@AlphabUX #FlupaUxDay
Par où commencer ?
= haut/retour, fermer,
annuler
“Escape”
S’appuyer sur les gestes standards : Escape
(déjà inclus si vous utilisez un controlleur
de navigation du framework standard.)
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Magic Tap
@AlphabUX #FlupaUxDay
Par où commencer ?
S’appuyer sur les gestes standards : Magic Tap
@AlphabUX #FlupaUxDay
Par où commencer ?
= action la plus probable
lecture/pause pour un media,
commencer/finir un appel,
prendre une photo...
Double tap à deux doigts
“Magic tap”
S’appuyer sur les gestes standards : Magic Tap
@AlphabUX #FlupaUxDay
Par où commencer ?
!"!accessibilityPerformEscape!{
//!appeler!votre!code!pour!
sortir!du!mode
}
S’appuyer sur les gestes standards : coté code
!"!accessibilityPerformMagicTap{
//!appeler!votre!code!pour!faire!
l’action!la!plus!probable
}
Super simple: une ligne de code !
@AlphabUX #FlupaUxDay
Par où commencer ?
Lisibilité: rendre la taille de caractère ajustable
+A#A
Simple mais beaucoup d’effet : permettre a
vos utilisateur d’agrandir la police du texte.
@AlphabUX #FlupaUxDay
Par où commencer ?
Même UI sur un iPad mini, mais... 20% plus petit et
moins net!
@AlphabUX #FlupaUxDay
Par où commencer ?
Eviter d’utiliser la couleur pour transmettre l’information
Vision normale Daltonisme simulé
http://wearecolorblind.com/example/ichat/
@AlphabUX #FlupaUxDay
Par où commencer ?
Eviter d’utiliser la couleur pour transmettre l’information
Vision normale Daltonisme simulé
http://wearecolorblind.com/example/ichat/
@AlphabUX #FlupaUxDay
Par où commencer ?
Eviter les interactions uniquement gestuelles
Clear
Tout le monde ne peux pas effectuer ces
gets, et si il n’y a pas d'élément de contrôle
a l'écran, rien n’est accessible via
VoiceOver et les périphériques externes.
Cette application est inutilisable si vous
avez besoin de VoiceOver et très difficile a
utiliser si vous avez des problèmes de
mouvements des mains (même si Adaptive
touch peux aider).
@AlphabUX #FlupaUxDay
Par où commencer ?
Comment vérifier ?
• 50 nuances de quelque chose: Testez vos visuels avec des simulateurs de
daltonisme.
• Sans tricher : Effectuez votre assurance qualité en utilisant VoiceOver, l'écran
éteint.
• Rien ne remplace l’humain : Incluez des utilisateurs avec des handicaps
dans vos sessions de tests d’utilisabilité.
Pour aller plus loin
@AlphabUX #FlupaUxDay
Pour aller plus loin
Appareil Photo: détection faciale
“Un visage. Petit visage. Visage près du bords droit. Mis au point.”
http://svan.ca/blog/2012/blind/
Pour aller plus loin, utilisez les capacités
matérielles et logicielle pleinement (ici la
détection de visage) Ici cela permet à des
utilisateurs aveugles de prendre et de partager
des photos.
@AlphabUX #FlupaUxDay
Pour aller plus loin
Ariadne GPS: GPS
Utilise le GPS pour aider les aveugles à se déplacer
GPS + Voiceover = une super appli qui permet
aux aveugles d’explorer leur villes et leur
campagne , permet également de définir des
endroits clés, et prévient lorsque votre bus arrive
au bon arrêt.
@AlphabUX #FlupaUxDay
Pour aller plus loin
TapTapSee: reconnaissance d’image
Vous prenez une photo, l’appli vous dis ce qu’elle y voit.
Appareil photo + reconnaissance d’image =
Très pratique si vous êtes aveugle et que vous
voulez savoir si ce que vous vous apprêter dans
vos céréales et du lait ou du jus d’orange.
Egalement utile pour distinguer les médicaments,
les billets, les habits...
@AlphabUX #FlupaUxDay
Pour aller plus loin
Instapaper: une police spéciale pour les dyslexiques
@AlphabUX #FlupaUxDay
Merci !
Suivez moi sur twitter @AlphabUX !

Contenu connexe

Similaire à FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"

Handicapetnumeriqueppt
HandicapetnumeriquepptHandicapetnumeriqueppt
Handicapetnumeriquepptthomas cholvy
 
Numérique et médiation handicap
Numérique et médiation handicapNumérique et médiation handicap
Numérique et médiation handicap
Willy Leloutre
 
Numérique et handicap, quelles solutions ?
Numérique et handicap, quelles solutions ?Numérique et handicap, quelles solutions ?
Numérique et handicap, quelles solutions ?
le Relais 59
 
20091105 Dossier Presse
20091105 Dossier Presse20091105 Dossier Presse
20091105 Dossier Presse
oprentout
 
What's Hot - Juin 2016
What's Hot - Juin 2016What's Hot - Juin 2016
What's Hot - Juin 2016
onepoint x weave
 
2011 04 tablettes express roularta
2011 04 tablettes express roularta2011 04 tablettes express roularta
2011 04 tablettes express roularta
Altice Media Publicité
 
FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...
FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...
FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...
Flupa
 
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA. 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
shirkaLAB
 
Objets Connectés (Journée Innovation, Banque Postale, 2014-311)
Objets Connectés (Journée Innovation, Banque Postale, 2014-311)Objets Connectés (Journée Innovation, Banque Postale, 2014-311)
Objets Connectés (Journée Innovation, Banque Postale, 2014-311)
Christophe Ducamp
 
Waverly labs
Waverly labsWaverly labs
Waverly labs
Gotni Yahya
 
Noobi n2
Noobi n2Noobi n2
Noobi n2
Octoprint
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TV
USERADGENTS
 
Bonusagelecturenumérique
BonusagelecturenumériqueBonusagelecturenumérique
Bonusagelecturenumérique
Isabelle Denis
 
#HUBCES - 12 Hot Trends - CES 2016
#HUBCES - 12 Hot Trends - CES 2016#HUBCES - 12 Hot Trends - CES 2016
#HUBCES - 12 Hot Trends - CES 2016
HUB INSTITUTE
 
Accessibilité, réalité et perspectives. Edwige Morin (20080319)
Accessibilité, réalité et perspectives. Edwige Morin (20080319) Accessibilité, réalité et perspectives. Edwige Morin (20080319)
Accessibilité, réalité et perspectives. Edwige Morin (20080319)
FFFOD
 
FOADhandicap_EMorin_20080319
FOADhandicap_EMorin_20080319FOADhandicap_EMorin_20080319
FOADhandicap_EMorin_20080319
Edwige Morin
 
Moi jaime coder
Moi jaime coderMoi jaime coder
Moi jaime coder
mcd_boulanger
 
Fabien loszach de Brad - Hacker l'économie de l'attention
Fabien loszach  de Brad - Hacker l'économie de l'attentionFabien loszach  de Brad - Hacker l'économie de l'attention
Fabien loszach de Brad - Hacker l'économie de l'attention
Fabien Loszach
 
Presentation mobile2012
Presentation mobile2012 Presentation mobile2012
Presentation mobile2012
mobile2012
 

Similaire à FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?" (20)

Handicapetnumeriqueppt
HandicapetnumeriquepptHandicapetnumeriqueppt
Handicapetnumeriqueppt
 
Numérique et médiation handicap
Numérique et médiation handicapNumérique et médiation handicap
Numérique et médiation handicap
 
Numérique et handicap, quelles solutions ?
Numérique et handicap, quelles solutions ?Numérique et handicap, quelles solutions ?
Numérique et handicap, quelles solutions ?
 
20091105 Dossier Presse
20091105 Dossier Presse20091105 Dossier Presse
20091105 Dossier Presse
 
What's Hot - Juin 2016
What's Hot - Juin 2016What's Hot - Juin 2016
What's Hot - Juin 2016
 
2011 04 tablettes express roularta
2011 04 tablettes express roularta2011 04 tablettes express roularta
2011 04 tablettes express roularta
 
FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...
FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...
FLUPA UX-Days 2016 - "Accessibilité et UX main dans la main, en 5 exemples" p...
 
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA. 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
 
Objets Connectés (Journée Innovation, Banque Postale, 2014-311)
Objets Connectés (Journée Innovation, Banque Postale, 2014-311)Objets Connectés (Journée Innovation, Banque Postale, 2014-311)
Objets Connectés (Journée Innovation, Banque Postale, 2014-311)
 
Waverly labs
Waverly labsWaverly labs
Waverly labs
 
Atelier webschool Bourges - Berry in the pocket
Atelier webschool Bourges - Berry in the pocketAtelier webschool Bourges - Berry in the pocket
Atelier webschool Bourges - Berry in the pocket
 
Noobi n2
Noobi n2Noobi n2
Noobi n2
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TV
 
Bonusagelecturenumérique
BonusagelecturenumériqueBonusagelecturenumérique
Bonusagelecturenumérique
 
#HUBCES - 12 Hot Trends - CES 2016
#HUBCES - 12 Hot Trends - CES 2016#HUBCES - 12 Hot Trends - CES 2016
#HUBCES - 12 Hot Trends - CES 2016
 
Accessibilité, réalité et perspectives. Edwige Morin (20080319)
Accessibilité, réalité et perspectives. Edwige Morin (20080319) Accessibilité, réalité et perspectives. Edwige Morin (20080319)
Accessibilité, réalité et perspectives. Edwige Morin (20080319)
 
FOADhandicap_EMorin_20080319
FOADhandicap_EMorin_20080319FOADhandicap_EMorin_20080319
FOADhandicap_EMorin_20080319
 
Moi jaime coder
Moi jaime coderMoi jaime coder
Moi jaime coder
 
Fabien loszach de Brad - Hacker l'économie de l'attention
Fabien loszach  de Brad - Hacker l'économie de l'attentionFabien loszach  de Brad - Hacker l'économie de l'attention
Fabien loszach de Brad - Hacker l'économie de l'attention
 
Presentation mobile2012
Presentation mobile2012 Presentation mobile2012
Presentation mobile2012
 

Plus de Flupa

UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton SchreinerUX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
Flupa
 
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé GirardUX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
Flupa
 
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick MaruejoulsUX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
Flupa
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
Flupa
 
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid WolduUX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
Flupa
 
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc StickdornUX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
Flupa
 
UX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan TwineUX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan Twine
Flupa
 
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
Flupa
 
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas CatherinUX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
Flupa
 
UX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane PengUX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane Peng
Flupa
 
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves RigalUX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
Flupa
 
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
Flupa
 
UX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie BatonUX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie Baton
Flupa
 
UX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia BucletUX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia Buclet
Flupa
 
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane MaltorUX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
Flupa
 
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle MarévéryUX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
Flupa
 
Flupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin LefevreFlupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin Lefevre
Flupa
 
Flupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège BideFlupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège Bide
Flupa
 
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-SerposFlupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa
 
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa
 

Plus de Flupa (20)

UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton SchreinerUX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
 
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé GirardUX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
 
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick MaruejoulsUX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
 
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid WolduUX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
 
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc StickdornUX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
 
UX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan TwineUX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan Twine
 
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
 
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas CatherinUX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
 
UX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane PengUX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane Peng
 
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves RigalUX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
 
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
 
UX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie BatonUX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie Baton
 
UX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia BucletUX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia Buclet
 
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane MaltorUX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
 
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle MarévéryUX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
 
Flupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin LefevreFlupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin Lefevre
 
Flupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège BideFlupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège Bide
 
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-SerposFlupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-Serpos
 
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
 

FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"

  • 1. Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes Fabien Marry @AlphabUX
  • 2. Sommaire Introduction: Noëlle... et tous les autres Les appareils mobiles : un don du ciel pour l'accessibilité Par où commencer ? Un message personnel du Professeur Hawking Pour aller plus loin @AlphabUX #FlupaUxDay
  • 4. @AlphabUX #FlupaUxDay Introduction Noëlle Je vous présente Noëlle, ma grand-mère. Elle a 95 ans et est en grande forme... Elle adore recevoir des cartes postales lorsque nous partons en vacances, alors je lui en ai écrit une à chaque voyage. Mais maintenant, sa vue est trop faible, et elle ne peux plus lire la plupart des choses.
  • 5. @AlphabUX #FlupaUxDay Introduction Noëlle Mais je continue a lui écrire, j'écris juste plus gros !
  • 6. @AlphabUX #FlupaUxDay Introduction Etre inclusif est facile, il suffit de le vouloir Besoins légèrement différents + juste un petit effort => inclusion
  • 7. @AlphabUX #FlupaUxDay Introduction Il n’y a pas que Noëlle... Mean Upper limit Lower limit Age (Years) OcularAccommodation(Dioptres) 0 10 20 30 40 50 60 70 0 2 4 6 8 10 12 14 Haute Base Moy. Age (années) Accommodationoculaire(années) C’est pour tout le monde pareil : notre vue va empirer avec l'âge, peut être beaucoup plus tôt que ce que vous pensez... C’est quelque chose dont on doit tenir compte, particulièrement quand les designers sont souvent plutôt jeunes...
  • 8. @AlphabUX #FlupaUxDay Introduction La population française en chiffres http://www.webaccessibilite.fr/les-chiffres-du-handicap-en-France-2009-08-17.php 12 millions ont un handicap 5.18 millions déficient auditifs 2,3 millions déficient moteurs 700 000 handicap intellectuel 8% des hommes 0.45% des femmes souffrent de daltonisme 1,7 millions déficient visuels Source: INSEE, Handicap, incapacités, dépendance (HID), 1998-2001 700 000 handicap intellectuel
  • 9. @AlphabUX #FlupaUxDay Introduction Population du Royaume Uni n’ayant jamais utilisé internet 53% 47% ont$un$handicap Première raison de s’y intéresser: le handicap est un facteur majeur d’exclusion numérique
  • 10. @AlphabUX #FlupaUxDay Introduction Etendre votre marché potentiel How many people have less than Full ability ? Source: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999) http://www.inclusivedesigntoolkit.com/ Combien de gens ont une “capabilite reduite”? Tranche d’age %delatranched’âge la moitié de la population adulte Reason to care 2
  • 11. @AlphabUX #FlupaUxDay Introduction Etendre votre marché potentiel Money to spend and time to spend it Source: The Henley Centre, Family Expenditure Survey (1996) http://www.inclusivedesigntoolkit.com/ Revenu disponible Temps libre moyen par jour Opportunité !
  • 12. @AlphabUX #FlupaUxDay Introduction Une population vieillisante Japon Vu que dans la plupart de pays développes la population vieillit, ces besoins ne vont que grandir.
  • 13. @AlphabUX #FlupaUxDay Introduction Un superbe opportunité de promotion pour vos clients “ Votre produit désormais accessible aux personnes avec déficiences visuelle” Reason to care 3
  • 14. @AlphabUX #FlupaUxDay Introduction En France, une obligation légale... limitée Article 47 de la loi du 11 février 2005 "pour l'égalité des droits et des chances, la  participation et la citoyenneté des personnes handicapées". The Disability Discrimination Act 1995 (DDA) Article 9 de la convention relative aux droits des personnes handicapées adoptée par l’ONU en 2006 http://www.journaldunet.com/ebusiness/
  • 15. Les appareils mobiles : un don du ciel pour l’accessibilité
  • 16. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Appareil d’accessibilité typique Seulement 5800 € Méthode de communication alternative Mono fonction Un design tres grossier, qui entraine uen stigmatisation Difficile a trovuer Cher! https://store.prentrom.com/ product_info.php/cPath/11/products_id/207
  • 17. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Les fonctions d’accessibilité sont désormais inclues dans les appareils grand public • Moins cher • Meilleur design • Meilleures finitions • Plus de fonctionnalités • Pas de stigmatisation je vais essentiellement parler d’ iOS parce que c’est la plate-forme la plus avancée pour l'accessibilité, mais Android rattrape son retard, et les recommandations sont essentiellement les mêmes.
  • 18. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Les fonctions d’accessibilité sont désormais inclues dans les appareils grand public “ Il n’y a rien de ce que vous pouvez faire sur l’iPhone ou l’iPad que je ne peux pas faire! ” Stevie Wonder le fait que ces fonctionnalités soit incorporées par défaut joue un grand rôle pour combler cette fracture numérique.
  • 19. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Zoom Un simple zoom, qui marche partout, mais n’est pas très pratique vu qu’il faut faire défiler le contenu pour le voir
  • 20. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : mode couleurs inversées (contraste élevé) Peut aider des personnes avec certains problèmes de vue.
  • 21. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Assistive Touch Fourni un moyen logiciel de faire ce qui habituellement nécessite des mouvements manuels très précis : gestes a plusieurs doigts, secouer, et même des gestes personnalisés que d’autres peuvent pré- programmer pour vous.
  • 22. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : motifs de vibration personnalisés Mais il n’y a pas que la vue ou l’audition: le toucher peut aussi être utilise pour communiquer des informations, avec diffèrents motifs de vibrations
  • 23. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : mode grande police Cela ne marche que pour certaines applications Apple, ce réglage n’est pas accessible aux applications tierces.
  • 24. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur Safari ne suit pas ce réglage de grande police, et contrairement à la version Mac, ne fournit pas de bouton pour agrandir le texte.
  • 25. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur On peux habituellement zoomer grâce au geste pincer / écarter, même si parfois un site web responsif peut bloquer ça. Mais surtout Safari a son mode lecteur.
  • 26. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur Qui lui a un bouton pour agrandir la police.
  • 27. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur Qui lui a un bouton pour agrandir la police.
  • 28. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : Safari and son mode Lecteur
  • 29. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Inclus dans iOS : VoiceOver Démo: Comment une personne aveugle utilise un iPad Voice over c’est la passerelle pour beaucoup de fonctions d’accessibilité.
  • 30. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité L’histoire d’Andy Je vous présente Andy. Un gars moyen d’une vingtaine d'années. Pendant ses vacances, il à plongé dans un petit lac... Et il a heurté un rocher. Il s’est blessé gravement.
  • 31. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité L’histoire d’Andy ...et il est depuis paralysé des pieds au cou. Ce qui veut dire qu’il ne pouvait plus faire grand chose sans l’aide de quelqu'un d’autre. *slow*Essayez d’imaginer cela ne serait-ce qu’un instant... D’un jour a l’autre, il ne pouvait plus passer un coup de fil tout seul, ne pouvait plus envoyer un email ou texto tout seul, et il avait besoin que quelqu’un lui lise les messages qu’il recevait. Brutalement, il n’avait plus d'indépendance,
  • 32. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité L’histoire d’Andy Heureusement est arrivé iPortal, un produit qui s'intègre a son fauteuil roulant, et qui utilise le joystick de menton pour contrôler le curseur VoiceOver de son iPhone.
  • 33. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile http://www.gatech.edu/newsroom/release.html?nid=110351 Grâce à ce curseur de VoiceOver, beaucoup d’accessoires divers et variés sont supportés. (Egalement un fauteuil avec des appuis têtes qui servent de contrôles).
  • 34. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile http://www.hims-inc.com/products/deaf-blind-communicators/ D’autres exemples un clavier Braille pour entrer ou lire du texte.
  • 35. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile http://store.griffintechnology.com/mouthstick-stylus Dans un style plus simple et bien moins cher: un stylet de bouche, mais qui peut déjà aider beaucoup.
  • 36. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité iOS : plus q’un écran tactile Et enfin n’oublions pas la commande vocale qui commence enfin a marcher correctement, et les assistant numérique tel Siri ou Google now sont désormais capables de depasser la compréhension de simple commandes pour gérer des requêtes complexes en langage naturel tel que “rappelle moi d’acheter du lait quand je qui le boulot”. Mais pour le moment, ce n’est pas encore ouvert au développer tiers..
  • 37. @AlphabUX #FlupaUxDay Les appareils mobiles : un don du ciel pour l’accessibilité Changer des vies... mais seulement si vous rendez vos applis accessibles ! Toutes ces capacités sont incluses mais vous devez faire votre part du boulot pour en tirer pleinement partie.
  • 38. Par où commencer ? Ventes Scoping UX UI Développement Assurance Qualité Pour une entreprise, vendre des produit avec une bonne accessibilité nécessite un effort collectif: les ventes doivent le présenter aux clients comme un avantage compétitif, le scoping doit en tenir compte dans leur devis, l’UX doit concevoir une appli qui ne dépende pas des visuels, et les graphistes doivent penser particulièrement à la lisibilité, au contraste et au daltonisme.
  • 39. @AlphabUX #FlupaUxDay Par où commencer ? Au minimum: ajouter des metadonnées d'accessibilité à votre interface • Accessibility : Si décoché, cet élément sera ignoré par le curseur VoiceOver. • Label : Un court texte prononcé après le focus. • Hint : un message plus long lu après le label et une pause (an explication, pas un ordre). • Trait : Défini le type d’interaction. Ajouter Ajoute$un$0tre La plupart de celles-ci sont sont déjà renseignées si vous utiliser des éléments UI standards Tout particulièrement les boutons en image sans texte ont besoin d’un label. Ces meta-donnes sont la clé pour tout ce que VoiceOver permet: l’interface parlée bien sur, mais aussi les appareil braille et autres. Et on peut très bien imaginer une version
  • 40. © 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5 Tigerspike London Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com iPad 14:04 PM Velum - iPad publication iPad Wireframes & Functional Overview 1.0 Issue Library LS ⚙ "LOGO⚙ " Issue Info Panel 1.0 Issue Library LS Allows users to quickly choose which Issues to read. Provides access to stored Favorite Articles and App Settings. 1. SETTINGS BUTTON [Gesture: Tap] Goes to "Settings". [Transition: Slide] When Settings is opened it slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the Archive below. [A11y: enabled; Label: "Settings"] 2. FAVOURITES BUTTON [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER [Gesture: Swipe Right] Slides (animated) issues to previous issue* [Gesture: Swipe Left] Slides (animated) issues to next issue* If the issue has not yet downloaded: [Gesture: Tap] Starts downloading the issue. [A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait: Selected, button, image]. If the issue has already been downloaded: [Gesture: Tap] Open the issue. [Transition: Expand] The cover expands to fill screen [Transition: Fade] Front cover fades to pre-roll advert [Transition: Fade] Pre-roll advert fades to Issue Contents Page [A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait: button, image]. 6. ISSUE INFO PANEL See "1.1 Issue Library - Issue Info Panel" page. *chronologically 1 2 3 4 6 5 @AlphabUX #FlupaUxDay Par où commencer ? Documenter les métadonnées d'accessibilité Ces méta-données ne doivent pas être abandonnés au développers pour qu’ils les inclus vite fait presque en douce à la dernière minute. Elle constituent une part entière et cruciale de votre application, tout comme le texte qui est affiché. Et elle doivent recevoir la même attention, y compris réfléchir quel ton et maniere de parler sont les plus appropriés pour cette marque. Cela doit donc être fait a l'étape UX, et
  • 41. © 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5 Tigerspike London Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com iPad 14:04 PM Velum - iPad publication iPad Wireframes & Functional Overview 1.0 Issue Library LS ⚙ "LOGO⚙ " Issue Info Panel 1.0 Issue Library LS Allows users to quickly choose which Issues to read. Provides access to stored Favorite Articles and App Settings. 1. SETTINGS BUTTON [Gesture: Tap] Goes to "Settings". [Transition: Slide] When Settings is opened it slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the Archive below. [A11y: enabled; Label: "Settings"] 2. FAVOURITES BUTTON [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER [Gesture: Swipe Right] Slides (animated) issues to previous issue* [Gesture: Swipe Left] Slides (animated) issues to next issue* If the issue has not yet downloaded: [Gesture: Tap] Starts downloading the issue. [A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait: Selected, button, image]. If the issue has already been downloaded: [Gesture: Tap] Open the issue. [Transition: Expand] The cover expands to fill screen [Transition: Fade] Front cover fades to pre-roll advert [Transition: Fade] Pre-roll advert fades to Issue Contents Page [A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait: button, image]. 6. ISSUE INFO PANEL See "1.1 Issue Library - Issue Info Panel" page. *chronologically 1 2 3 4 6 5 @AlphabUX #FlupaUxDay Par où commencer ? Documenter les métadonnées d'accessibilité Last Update: 11 / 02 / 2013 Page: 5 [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER [Gesture: Swipe Right] Slides (animated) issues to previous issue* [Gesture: Swipe Left] Slides (animated) issues to next issue* If the issue has not yet downloaded: [Gesture: Tap] Starts downloading the issue. [A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait: Selected, button, image]. If the issue has already been downloaded: [Gesture: Tap] Open the issue. [Transition: Expand] The cover expands to fill screen [Transition: Fade] Front cover fades to pre-roll advert [Transition: Fade] Pre-roll advert fades to Issue Contents Page [A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait: button, image]. 6. ISSUE INFO PANEL See "1.1 Issue Library - Issue Info Panel" page. *chronologically Ces méta-données ne doivent pas être abandonnés au développers pour qu’ils les inclus vite fait presque en douce à la dernière minute. Elle constituent une part entière et cruciale de votre application, tout comme le texte qui est affiché. Et elle doivent recevoir la même attention, y compris réfléchir quel ton et maniere de parler sont les plus appropriés pour cette marque. Cela doit donc être fait a l'étape UX, et
  • 42. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Escape Un geste en forme de Z à deux doigts est le standard pour fermer les dialogues modaux ou remonter d’un niveau dans une navigations.
  • 43. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Escape Un geste en forme de Z à deux doigts est le standard pour fermer les dialogues modaux ou remonter d’un niveau dans une navigations.
  • 44. @AlphabUX #FlupaUxDay Par où commencer ? = haut/retour, fermer, annuler “Escape” S’appuyer sur les gestes standards : Escape (déjà inclus si vous utilisez un controlleur de navigation du framework standard.)
  • 45. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Magic Tap
  • 46. @AlphabUX #FlupaUxDay Par où commencer ? S’appuyer sur les gestes standards : Magic Tap
  • 47. @AlphabUX #FlupaUxDay Par où commencer ? = action la plus probable lecture/pause pour un media, commencer/finir un appel, prendre une photo... Double tap à deux doigts “Magic tap” S’appuyer sur les gestes standards : Magic Tap
  • 48. @AlphabUX #FlupaUxDay Par où commencer ? !"!accessibilityPerformEscape!{ //!appeler!votre!code!pour! sortir!du!mode } S’appuyer sur les gestes standards : coté code !"!accessibilityPerformMagicTap{ //!appeler!votre!code!pour!faire! l’action!la!plus!probable } Super simple: une ligne de code !
  • 49. @AlphabUX #FlupaUxDay Par où commencer ? Lisibilité: rendre la taille de caractère ajustable +A#A Simple mais beaucoup d’effet : permettre a vos utilisateur d’agrandir la police du texte.
  • 50. @AlphabUX #FlupaUxDay Par où commencer ? Même UI sur un iPad mini, mais... 20% plus petit et moins net!
  • 51. @AlphabUX #FlupaUxDay Par où commencer ? Eviter d’utiliser la couleur pour transmettre l’information Vision normale Daltonisme simulé http://wearecolorblind.com/example/ichat/
  • 52. @AlphabUX #FlupaUxDay Par où commencer ? Eviter d’utiliser la couleur pour transmettre l’information Vision normale Daltonisme simulé http://wearecolorblind.com/example/ichat/
  • 53. @AlphabUX #FlupaUxDay Par où commencer ? Eviter les interactions uniquement gestuelles Clear Tout le monde ne peux pas effectuer ces gets, et si il n’y a pas d'élément de contrôle a l'écran, rien n’est accessible via VoiceOver et les périphériques externes. Cette application est inutilisable si vous avez besoin de VoiceOver et très difficile a utiliser si vous avez des problèmes de mouvements des mains (même si Adaptive touch peux aider).
  • 54. @AlphabUX #FlupaUxDay Par où commencer ? Comment vérifier ? • 50 nuances de quelque chose: Testez vos visuels avec des simulateurs de daltonisme. • Sans tricher : Effectuez votre assurance qualité en utilisant VoiceOver, l'écran éteint. • Rien ne remplace l’humain : Incluez des utilisateurs avec des handicaps dans vos sessions de tests d’utilisabilité.
  • 56. @AlphabUX #FlupaUxDay Pour aller plus loin Appareil Photo: détection faciale “Un visage. Petit visage. Visage près du bords droit. Mis au point.” http://svan.ca/blog/2012/blind/ Pour aller plus loin, utilisez les capacités matérielles et logicielle pleinement (ici la détection de visage) Ici cela permet à des utilisateurs aveugles de prendre et de partager des photos.
  • 57. @AlphabUX #FlupaUxDay Pour aller plus loin Ariadne GPS: GPS Utilise le GPS pour aider les aveugles à se déplacer GPS + Voiceover = une super appli qui permet aux aveugles d’explorer leur villes et leur campagne , permet également de définir des endroits clés, et prévient lorsque votre bus arrive au bon arrêt.
  • 58. @AlphabUX #FlupaUxDay Pour aller plus loin TapTapSee: reconnaissance d’image Vous prenez une photo, l’appli vous dis ce qu’elle y voit. Appareil photo + reconnaissance d’image = Très pratique si vous êtes aveugle et que vous voulez savoir si ce que vous vous apprêter dans vos céréales et du lait ou du jus d’orange. Egalement utile pour distinguer les médicaments, les billets, les habits...
  • 59. @AlphabUX #FlupaUxDay Pour aller plus loin Instapaper: une police spéciale pour les dyslexiques
  • 60. @AlphabUX #FlupaUxDay Merci ! Suivez moi sur twitter @AlphabUX !