Bien que les smartphones et les tablettes soient en voie de devenir le principal type d’ordinateur pour de plus en plus de gens, leurs interactions via des écrans tactiles les rendent difficiles voir impossible à utiliser pour de nombreuses personnes ayant des handicaps visuel ou moteurs, ou tout simplement âgées. iOS, Android et les autres plateformes offrent de plus en plus de solutions pour rendre leurs applications natives accessibles à une plus grande partie de la population : synthèse et commande vocales, gestes multi-touch dédiés, et même une gestion de contrôleurs spécialisés pour les mouvements de menton, de tête ou de langue. Malheureusement, la plupart des concepteurs et développeurs d’applications ne sont pas conscients de ces possibilités et ne font pas le léger supplément de travail nécessaire pour en profiter. J’exposerai en quoi une telle approche inclusive est bénéficiaire pour les utilisateurs, les développeurs et leurs clients et même toute la société. Puis je démontrerai comment ces appareils peuvent aller bien plus loin que le web et l’ordinateur traditionnel pour être un véritable don du ciel pour l’accessibilité. Je présenterai ensuite les nombreuses fonctions dédiées et les différent périphériques d’entrée/sortie dont les designers doivent être conscients lorsqu’ils développent des applications natives. J’introduirai ensuite une liste de recommandations à suivre pour une meilleure accessibilité, des chose simples mais efficaces aux manières plus complexes telles que concevoir une interface audio pour ceux qui ne voient pas l’écran du tout. La révolution des smartphones et tablettes change profondément notre manière de communiquer, et cette présentation souhaite contribuer à faire en sorte que nos nouvelles expérience numériques ne laissent plus tant de gens de coté.
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé GirardFlupa
Contenu connexe
Similaire à FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"
Similaire à FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?" (20)
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.
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é !
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/
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.
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
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.)
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.
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...