WWDC 2019 : Quelques enseignements en accessibilité

Cette session regroupe quatre courtes interventions toutes visualisables sur le site développeur officiel d'Apple :


Par la suite, selon la configuration de la présentation, le fait de cliquer sur un titre ou un temps indiqué permet d'ouvrir la vidéo Apple directement au moment spécifié.


Nouveautés iOS 13 pour l'accessibilité visuelle #

Cette présentation visualisable sur le site développeur officiel d'Apple (session 244) développe certains points pour rendre une application la plus accessible possible au niveau visuel.


Les thèmes abordés au sein de la vidéo sont détaillés ci-dessous :

  • Dynamic Type
    • ⟹ nouveauté iOS 13

  • Réduction de mouvement
    • ⟹ nouveauté iOS 13
    • ⟹ nouveauté iOS 13

  • Couleur
    • ⟹ nouveauté iOS 13



Dynamic Type #

🎬 (01:17)

L'utilisation du Dynamic Type s'appuie sur quatre principes qu'il est vivement recommandé de suivre :

  • tout texte dont la taille peut être augmentée se doit d'être implémenté de cette façon,

  • toute la largeur de l'écran doit être utilisée,

  • ne pas ajouter une troncature de mots si elle n'est pas présente sur le grossissement "standard" de l'application,

  • la taille des textes et celle des éléments graphiques doivent augmenter conjointement de façon à conserver un ensemble visuel équilibré.
🎬 (01:50)

Petit rappel sur les 11 styles de texte disponibles depuis iOS 11 :

... ainsi que sur la façon programmatique de les implémenter :

Une explication détaillée de l'implémentation du Dynamic Type est disponible dans la partie guide pour les développeurs.

🎬 (03:00)

Un nouvel écran apparaît sous Xcode 11 pour modifier et visualiser le grossissement de texte de façon dynamique sur le simulateur.



Réduction de mouvement #

🎬 (03:23)

Petit rappel sur la situation actuelle incluant la fonctionnalité déjà présente pour minimiser le mouvement à l'écran :

... ainsi que sur la façon programmatique de connaître sa valeur issue des réglages du terminal :

Une explication détaillée des états et des événements des options d'accessibilité est disponible dans la partie guide pour les développeurs.

🎬 (04:17)

Nouvelle fonctionnalité iOS 13, la prévisualisation automatique de vidéos est désormais à la main de l'utilisateur qui peut décider de son activation via les réglages du terminal :


Il est aussi possible de connaître l'état de cette option de façon programmatique :


Dans le cas où cette option est désactivée, seule une interaction volontaire de l'utilisateur doit permettre le contrôle de la vidéo.

🎬 (05:43)

Cette nouvelle fonctionnalité iOS 13 n'apparaît qu'à partir du moment où l'option d'accessibilité Réduire les animations est activée.

Elle permet un passage entre les différentes écrans moins perturbant pour certains utilisateurs dont l'adaptation visuelle aux mouvements est particulièrement sensible.

Une fois activée, l'option Préférer les transisitions enchaînées fonctionne automatiquement tant qu'on utilise les éléments standards de UIKit (navigation, vues modales...).



Couleur #

🎬 (06:40)

Présentation de quelques dyschromatopsies qui vont permettre de mieux comprendre l'arrivée de la nouvelle fonctionnalité proposée dans l'onglet suivant.

🎬 (07:33)

La nouvelle fonctionnalité iOS 13 Différencier sans couleur permet à l'utilisateur d'indiquer sa préférence à ne surtout pas utiliser la couleur pour faire passer une information.

La valeur de cette option est accessible de façon programmatique afin d'adapter subséquemment le visuel d'une application :

Il est bien évidemment recommandé de ne jamais faire passer une information par la couleur uniquement mais il y a des cas spécifiques où ce type de configuration est primordial et où l'intérêt de rajouter des éléments graphiques pour différencier les couleurs a un intérêt non négligeable (jeu vidéo par exemple).




Découvrir Accessibility Inspector #

Cette présentation visualisable sur le site développeur officiel d'Apple (session 257) a pour but de présenter l'outil Accessibility Inspector ainsi que quelques nouveautés Xcode 11 qui vont permettre de résoudre certains problèmes exposés au sein de l'application de démonstration.


Les thèmes abordés ainsi que leur référence temporelle au sein de la vidéo sont décrits ci-dessous :

Présentation (00:51) #

L'application de démonstration qui va servir tout au long de cette présentation est expliquée de façon à mieux comprendre la future problématique remontée par l'outil avec mise en avant de :

  • la façon d'accéder à Accessibility Inspector (01:34),

  • la fonctionnalité de grossissement hover text (01:43).


Audit (02:26) #

Cette fonctionnalité a pour but de présenter une liste de problèmes potentiels détectés par l'outil en accessibilité.




Inspection (03:40) #

Après avoir montré comment activer une sélection d'éléments graphiques concomittante à la description affichée, la nouvelle fonctionnalité Xcode 11 qui permet la vocalisation et la sélection d'éléments sur simulateur (04:11) est enfin dévoilée.




CATextLayer (05:26) #

Cet exemple met en avant le fait que l'accessibilité pour ce type d'élément n'est pas du tout géré automatiquement par le système et doit absolument être implémenté de façon programmatique.


Contraste des couleurs (06:26) #

Hormis le fait d'avoir des polices de taille suffisamment grande pour être perçues par tous, il est aussi primordial de respecter un contraste de couleurs pour permettre à l'ensemble des personnes ayant des troubles visuels de distinguer parfaitement ce qui est sur l'écran.

Une fois le problème décelé, une solution est apportée par la nouvelle fonctionnalité Xcode 11 : Color Contrast Calculator.



Bilan (08:24) #

Utilisations des outils présentés lors de la session pour visualiser le rendu final et s'assurer que les solutions avancées fonctionnent parfaitement.




La bonne rédaction des labels #

Cette présentation visualisable sur le site développeur officiel d'Apple (session 254) est réalisée par une personne non voyante qui explique l'importance de bien vocaliser les éléments accessibles par le biais d'exemples concrets et de bonnes pratiques.

Après une brève introduction concernant les attentes d'un utilisateur VoiceOver sur le premier lancement d'une application mobile inconnue pour lui (00:13), la définition d'un label est présentée en détails (01:53) suivie d'explications sur différents contextes qui induisent une vocalisation adaptée pour un même élément accessible (02:41).


La seconde partie de la présentation consiste à développer un ensemble des bonnes pratiques agrémentées d'exemples concrets : (04:24)

  • toujours ajouter des labels appropriés aux éléments accessibles (04:33),

  • ne pas insérer le type de l'élément accessible dans son label (05:22),

  • notifier l'utilisateur lors de mises à jour informatives de l'interface graphique (05:46),

  • ajouter une clarification sur le contexte quand cela est nécessaire pour la compréhension (06:07),

  • éviter les répétitions lorsqu'il n'y a pas d'équivoques (06:42),

  • penser aux notifications vocales pour les animations porteuses de sens (chargement de données...) (07:08),

  • éviter les labels prolixes (07:24) sauf lorsque cela permet d'apporter de l'information nécessaire et non verbeuse (07:48).



Utiliser les actions personnalisées #

Cette présentation visualisable sur le site développeur officiel d'Apple (session 250) met en avant l'intérêt et l'implémentation des actions personnalisées pour le lecteur d'écran et le contrôle de sélection en s'appuyant sur une application qui permet de comprendre directement les concepts développés.



Les thèmes abordés ainsi que leur référence temporelle au sein de la vidéo sont décrits ci-dessous :

  • Introduction (00:12)

  • (03:10)

  • (04:28)

  • Implémentation (07:59) ⟹ nouveauté iOS 13



Introduction (00:12) #

Présentation rapide de VoiceOver ainsi que de la problématique liée à une implémentation insuffisante mise en exergue par l'application de démonstration utilisée tout au long de la session.


Actions personnalisées #

🎬 (03:10)

L'intérêt des actions personnalisées avec VoiceOver est présenté de façon très pragmatique et particulièrement pédagogique de façon à comprendre pourquoi et dans quels contextes ce type de fonctionnalité doit absolument être mise en oeuvre pour améliorer significativement l'expérience utilisateur.

🎬 (04:28)

L'application de démonstration est utilisée avec le contrôle de sélection dirigé par un appareil connecté en bluetooth au mobile et doté de deux boutons : le premier (blanc) permet l'activation alors que le second (orange) permet la sélection.

L'utilisation d'actions personnalisées dans ce contexte va permettre une diminution drastique du nombre de sélections/activations à réaliser par l'utilisateur pour aboutir à un même résultat.



Implémentation (07:59) #

Depuis iOS 8, la création d'actions personnalisées s'appuie sur une syntaxe ObjectiveC qui s'est adaptée à Swift en incluant désormais une closure en iOS 13.