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

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
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.

Introduction
Noëlle
Mais je continue a lui écrire, j'écris juste
plus gros !

Introduction
Etre inclusif est facile, il sufﬁt de le vouloir
Besoins légèrement différents
+ juste un petit effort
=> inclusion

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...

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

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

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

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

Introduction
Une population vieillisante
Japon
Vu que dans la plupart de pays développes
la population vieillit, ces besoins ne vont
que grandir.

Introduction
Un superbe opportunité de promotion pour vos clients
“ Votre produit désormais accessible
aux personnes avec déﬁciences
visuelle”
Reason to care 3

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é

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
Difﬁcile a trovuer
Cher!
https://store.prentrom.com/
product_info.php/cPath/11/products_id/207

Les fonctions d’accessibilité sont désormais inclues dans
les appareils grand public
• Moins cher
• Meilleur design
• Meilleures ﬁnitions
• 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.

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.

Inclus dans iOS : Zoom
Un simple zoom, qui marche partout, mais
n’est pas très pratique vu qu’il faut faire
déﬁler le contenu pour le voir

Inclus dans iOS : mode couleurs inversées (contraste élevé)
Peut aider des personnes avec certains
problèmes de vue.

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.

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

Inclus dans iOS : mode grande police
Cela ne marche que pour certaines
applications Apple, ce réglage n’est pas
accessible aux applications tierces.

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.

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.

Qui lui a un bouton pour agrandir la police.

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

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.

...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 ﬁl 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,

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.

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).

http://www.hims-inc.com/products/deaf-blind-communicators/
D’autres exemples un clavier Braille pour
entrer ou lire du texte.

http://store.grifﬁntechnology.com/mouthstick-stylus
Dans un style plus simple et bien moins
cher: un stylet de bouche, mais qui peut
déjà aider beaucoup.

Et enﬁn n’oublions pas la commande vocale
qui commence enﬁn 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..

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.

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éﬁni 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
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
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
⚙ "LOGO⚙ "
Issue Info Panel
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
articles";]
DL'd] opens issue
4. NEXT ISSUE COVER
opens issue
button, image].
6. ISSUE INFO PANEL
*chronologically
1 2
3 4
6
5
Par où commencer ?
Documenter les métadonnées d'accessibilité
Last Update: 11 / 02 / 2013 Page: 5
articles";]
DL'd] opens issue
4. NEXT ISSUE COVER
opens issue
button, image].
6. ISSUE INFO PANEL
*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

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.

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.)

Par où commencer ?
S’appuyer sur les gestes standards : Magic Tap

Par où commencer ?
= action la plus probable
lecture/pause pour un media,
commencer/ﬁnir un appel,
prendre une photo...
Double tap à deux doigts
“Magic tap”
S’appuyer sur les gestes standards : Magic Tap

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 !

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.

Par où commencer ?
Même UI sur un iPad mini, mais... 20% plus petit et
moins net!

Par où commencer ?
Eviter d’utiliser la couleur pour transmettre l’information
Vision normale Daltonisme simulé
http://wearecolorblind.com/example/ichat/

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 difﬁcile a
utiliser si vous avez des problèmes de
mouvements des mains (même si Adaptive
touch peux aider).

Par où commencer ?
Comment vériﬁer ?
• 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é.

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.

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éﬁnir des
endroits clés, et prévient lorsque votre bus arrive
au bon arrêt.

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...

Instapaper: une police spéciale pour les dyslexiques

Merci !
Suivez moi sur twitter @AlphabUX !

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

Recomendados

Recomendados

Más contenido relacionado

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

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

Más de Flupa

Más de Flupa (20)

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