Présentation de Cynthia Thibault-Larouche dans le cadre du Web à Québec. Piste développement.

1. Inclure l’accessibilité aux
applications et sites Web
pour le mobile

2. Cynthia Thibault-Larouche
Chez Ciao depuis 8 ans
En accessibilité depuis 9 ans
Passionnée par tout ce qui touche l’expérience utilisateur !
2

3. ● L’accessibilité et la mobilité
● Application de l’accessibilité
À quoi faut-il penser lorsqu’on veut intégrer
l’accessibilité
3
Présentation
● Validation de l’accessibilité
Comment on valide l’accessibilité
● Éléments d’accessibilité
Comment on met l’accessibilité en place
dans une application native

4. L’accessibilité
et la mobilité
1
4

5. Types de limitations
5
Visuelles Auditives Motrices Cognitives

6. 16%
(1 million)
Population du Québec âgée de 15 ans et plus
vivant avec une incapacité
6 OPHQ, basé sur l’Enquête canadienne sur l’incapacité, 2017

7. 22%
(6.2 million)
Population du Canada âgée de 15 ans et plus
vivant avec une incapacité
7 Enquête canadienne sur l’incapacité, 2017

8. Concevoir pour tous
8
Permanent
©Microsoft - Inclusive Design at Microsoft
Temporaire Situationnel
Un bras Fracture Nouveau parent
Non-voyant Cataracte Conducteur
distrait
Malentendant Infection
de l’oreille
Barman
Muet Laryngite Fort accent
Permanent Temporaire Situationnel

9. Pourquoi le mobile ?

10. Outil d’accessibilité en soi
● Siri et Google Now intégré
● Plusieurs paramètres pouvant
adapter l’appareil à différents
besoins
● Lecteur d’écran
(VoiceOver, TalkBack)
10

11. Portabilité
● Participation à la vie active au
même titre que toute autre
personne
● Accès aux outils en tout temps
● Sorties facilitées
● Diminue l’anxiété à l’extérieur
● Meilleure autonomie
11

12. Diminution des obstacles
● Pour mal-voyants et non-voyants
(Be my eyes)
● Pour malentendants
(P3 mobile et RogerVoice)
● Pour personnes ayant des maladies
mentales telles que anxiété et
dépression (What’s Up)
● Pour personnes ayant des limitations
cognitives (Proloquo2go)
12

13. Sur quelle plateforme l’utilisateur utilise un lecteur d’écran
13
Appareil
mobile
Ordinateur
portable
Ordinateur
de bureau
WebAim Screen Reader Survey #8, 2019
86%
84%
68%

14. Quelle est la plateforme la plus utilisée
14 WebAim Screen Reader Survey #8, 2019
Android
28%
Autres
3%
iOS
69%

15. Sur quelle plateforme l’utilisateur utilise le plus souvent un lecteur d’écran
15 WebAim Screen Reader Survey #8, 2019
Ordinateur de
bureau / portable
41%
Appareil mobile
10%
Similaire
49%

16. Application de
l’accessibilité
2
16

17. Conformité et mobilité
N’a pas été pensé
dans le WCAG 2.0,
mais certains
critères dans le
WCAG 2.1
La Mobile
Accessibility Task
Force (W3C) a sorti
un document de
recommandations
Plusieurs
compagnies se sont
dotées de leurs
propres guides
d’accessibilité pour
mobile
17

18. Toujours se fier à son contexte
et à son « gros bon sens »
18

19. Contenu
Informations
Aller à l’essentiel, simplifier
Placer les informations
importantes au début
Champs et liens
Étiquettes en haut des champs
Liens courts
Avertir l’utilisateur lorsqu’une action
le mène en dehors de l’application
19
Orientation
Consultable autant à
l’horizontal qu’à la verticale
Cohérence
À travers la même dimension
d’écran et la même orientation
Navigation et fonctionnalités

20. Agrandissement
Capacité à zoomer
Ne pas bloquer le pinch to
zoom
Taille de police de caractère
Utiliser du texte redimensionnable
Avoir une bonne taille de caractère
20
Espace
Prévoir de l’espace dans les
interfaces afin que le texte ait
de l’espace pour s’agrandir
Fluidité du contenu
Contenu redimensionnable
jusqu’à 400% en ayant une seule
barre de défilement

21. Contraste
Conditions
L’utilisateur peut être
confronté à l’ensoleillement,
déplacements (mouvements),
pénombre (éblouissement),
pluie
Taux de contraste
Recommandé d’aller à 7:1 pour
le texte régulier et 4.5:1 pour le
texte agrandi
21

22. Clavier
Clavier virtuel
S’assurer que les
fonctionnalités qui doivent
l’être sont utilisables avec un
clavier virtuel
Clavier physique
Utilisé par des utilisateurs
habitués à des touches
spéciales, qui pourraient
appuyer sur les mauvaises
touches à l’écran, qui ont de la
difficulté à utiliser un clavier
virtuel
22
Type de champ
Mettre le bon type de champ
lorsque possible et logique
(date, texte, courriel, etc.)

23. Cliquabilité
Zone
Minimum de 44px X 44px
(W3C et iOS)
Material Design recommande
48dp X 48dp et des espaces de
8dp
Positionnement
Placer les boutons où ils sont
faciles d’accès
23
Regroupement
Regrouper les éléments qui
font la même action en un seul
élément (image cliquable avec
lien à côté)
Affordance
L'aspect visuel des contrôles
d'interfaces rend évidente leur
fonction et la manière de les
utiliser

24. Gestes
Simplicité d’exécution
Les gestes doivent être les plus
simples possibles
Alternatives possibles dans
l’interface (bouton) aux
fonctions exécutées par un
mouvement de l’appareil ou de
l’utilisateur
Lecteur d’écran
Le lecteur d’écran peut écraser
des gestes pour son propre
fonctionnement
24
Gestes du pointeur
Gestes basés sur un tracé ou
un ensemble de points doivent
pouvoir être réalisés avec un
seul pointeur (doigt)
Annulation du pointeur
Pas d’événement au « down »
du bouton, sauf si essentiel ou
si le « up » peut l’annuler

25. Validation de
l’accessibilité
3
25

26. Limite des tests
● Différences entre Web et natif
● Inspection de code impossible
● Moins d’outils disponibles pour tester
● Davantage d’outils pour améliorer
l’accessibilité
26

27. Outils de tests d’accessibilité
Inspecteur
d’accessibilité (Xcode)
Disponible lorsque l’on
dispose du code
source
Lecteurs d’écran
(VoiceOver et
TalkBack)
Installés par défaut sur
tous les téléphones
Niveaux de gris
Dans les réglages
d’accessibilité du
téléphone
27
Agrandissement de
texte
Dans les réglages
d’accessibilité du
téléphone
Rotor VoiceOver
(raccourcis et
paramétrages)
Lorsque VoiceOver est
activé
Clavier Bluetooth
Captures d’écran
Contraste
Accessibility Scanner
Validation automatisée
(Android)

28. Certains éléments ne peuvent
être rendus accessibles dans
une application native
28

29. Éléments
d’accessibilité
4
29

30. Prioriser les composants natifs
30

31. isAccessibilityElement
● Permet de déterminer si
l’élément est accessible ou
non à VoiceOver
● Les enfants ne peuvent
être accessibles si le
parent ne l’est pas
iOS
Labels
● Requis pour tout élément
accessible
● Seront toujours lu par
VoiceOver
● Équivalent d’aria-label,
textes hors-écran, textes
alternatifs sur images
31

32. Hints
● Explications sur
l’utilisation de la
composante
● Sont lus avec un délai
Ne pas mettre
d’information essentielle
iOS
Traits
● Servent à communiquer de
la sémantique et des états
précis
● Utiles pour les
composantes sur mesure
● En quelque sorte
l’équivalent des rôles ARIA
32

33. iOS (quelques exemples de Traits)
UIAccessibilityTraitNone
Équivalent à role=presentation
UIAccessibilityTraitButton
Équivalent à role=button
UIAccessibilityTraitLink
Équivalent à role=link
33
UIAccessibilityTraitHeader
Équivalent à role=heading
UIAccessibilityTraitSummaryEl
ement
Sera lu lors du chargement
initial de l’application et ne
sera pas relu
Il ne doit y en avoir qu’un par
vue
UIAccessibilityTraitUpdatesFreq
uently
Permet d’indiquer à VoiceOver
qu’un élément est fréquemment
mis à jour, afin d’éviter un
décalage entre la donnée
affichée et la donnée lue

34. ● VoiceOver
● Audio mono
● Sous-titres codés
● Couleurs inversées
iOS (détection des paramètres d’accessibilité)
● Texte en gras
● Taille des textes
● Réduire la transparence
● Réduire les animations
34

35. Android
android:contentDescription
Ajout d’un texte de remplacement
tels que sur des images ou des
boutons
android:accessibilityHeading
Mettre à « true » pour chaque
vue correspondant à un en-
tête de section
android:accessibilityLiveRegion
Sert à indiquer des
changements en temps réel
Similaire à aria-live
35
android:importantForAccessibillity
Indique si la vue est importante ou
pas et si elle doit être ignorée
android:focusable
Permet qu’une vue puisse
recevoir le focus
(perceptive au clavier)
state_focused
Visibilité du focus

36. Si vous avez des
questions
cynthia.thibaultl@ciao.ca
Merci !
36
Visuel de la présentation inspiré de SlidesCarnival
Images tirées des sites Unsplash et Pexels