Accessibilité des applications mobiles : mise en place sur iOS

L’accessibilité mobile, c’est quoi ?

L’accessibilité mobile, c’est le fait de rendre utilisable son application par des personnes en situation de handicap.

Aujourd’hui, les acteurs majeurs de la tech ont fait de gros progrès en la matière, et continuent d’investir sur le sujet ! La grande majorité des téléphones incluent de base des outils permettant de rendre l’interface plus accessible pour tous.

On trouve dans les smartphones des outils pour tout type de handicap. À ce jour, le plus connu d’entre eux est le contrôle vocal, mais ce n’est pas le seul ! Il est également possible, par exemple, de gérer la taille du texte pour les personnes malvoyantes, la colorimétrie pour les personnes atteintes de daltonisme et même plus récemment avec iOSSystème d'exploitation des appareils Apple. 14, il est possible d’être notifié lors de la détection de certains types de sons (alarme, aboiement,...) pour les personnes atteintes de surdité.

Tous ces outils rendent la majorité des applications plus accessibles, et ne nécessitent pas d’intervention de la part des développeurs. Il reste néanmoins un outil pour lequel l’intervention d’un développeur mobile est nécessaire : le retour vocal.

Le retour vocal, c’est quoi ?

Les smartphones proposent tous une fonction de retour vocal qui permet de lire les éléments présents à l’écran. Cependant, par défaut, elle ne peut lire que le strict minimum, c’est-à-dire, le texte et le type d’élément sur lequel on clique (bouton, sélecteur...).

Il est de la responsabilité du développeur de faire en sorte que la lecture soit la plus pertinente possible pour que les personnes aveugles ne soient pas perdues dans l’application.

En tant que développeur, comment rendre son application mobile accessible sur iOS ? Sur AndroidAndroid est un système d'exploitation mobile basé sur Linux. ? À quoi faut-il penser ?

Accessibilité mobile et retour vocal : à quoi faut-il penser ?

Lorsque l’on veut mettre en place l’accessibilité sur notre application mobile, nous devons nous poser 2 grandes questions :

• L’interface est-elle facilement utilisable par une personne en situation de handicap ?
• Qu’est-ce qui doit être accessible ?

L’interface est-elle facilement utilisable par une personne en situation de handicap ?

Si vous n’êtes pas en situation de handicap, vous devez savoir que les éléments que vous avez peut-être l’habitude d’utiliser tous les jours ne sont pas forcément adaptés à tout le monde !

Par exemple, une carte sur une application mobile sera difficilement utilisable par une personne malvoyante... Il faut donc penser à un affichage alternatif, comme une liste qui sera beaucoup plus simple d’utilisation.

De même, si votre application utilise des effets sonores ou des images pour donner des indications mais que la balise "alt" (texte alternatif) n’est pas remplie, ces éléments ne seront pas forcément vus ou entendus par tous.

Quels sont les éléments à rendre accessible sur une application mobile ?

Tous les éléments présents dans une application mobile ne sont pas toujours essentiels pour son utilisation. Les images servant à illustrer, par exemple, n’ont pas besoin d’être lues car elles n’apportent pas d’information utile pour la navigation. Lire ces images ne ferait que polluer la lecture d’autres éléments plus pertinents.

Idéalement, il faudrait se poser ces questions dès la conception de l’application, car les décisions prises à ce niveau peuvent impacter aussi bien la réalisation des maquettes que la définition et l’organisation des fonctionnalités.
Penser à l’accessibilité mobile avant le développement de l’application permet d’imaginer dès le départ une application utilisable par tous, plutôt que de devoir faire des compromis par la suite...

Mettre en place l’accessibilité mobile : le retour vocal

Comme nous l’avons vu précemment, pour vos applications, la principale fonctionnalité pour l’accessibilité sur mobile nécessitant l’intervention d’un développeur est le retour vocal. Sur Android, il existe 2 outils principaux permettant de la mettre en place : Talk Back et Voice Assistant. Son équivalent sur iOS est Voice Over.

Nativement, certains éléments graphiques comme les boutons, les textes ou les sélecteurs sont déjà lus par les outils d’accessibilité du système d’exploitation du smartphone. Cependant, les éléments custom, les listes ou les images ne seront pas lus ou pas nécessairement de la façon souhaitée. Il faut donc implémenter du code pour cela.

Le retour vocal sur iOS

Nous allons commencer par présenter l’implémentation du retour vocal sur iOS. Afin de pouvoir la tester par la suite, il faut activer Voice Over sur son appareil iOS.

Activer la lecture

Pour activer la lecture de l’écran sur IOS, rendez-vous dans Réglages, puis dans Accessibilité 

Cliquez ensuite sur le menu Voice Over 

Enfin, activez Voice Over 

Vous avez désormais un retour vocal sur votre smartphone ou votre tablette iOS !

Tester l’activation de l’accessibilité mobile

Afin de pouvoir changer le comportement de notre application mobile lorsque l’utilisateur est en mode accessibilité (par exemple, afficher une liste plutôt qu’une map), nous pouvons détecter si Voice Over est activé :

if UIAccessibility.isVoiceOverRunning {  
    // Do something  
} else {  
    // Do something else  
}  

La classe UIAccessibility permet d’accéder à beaucoup de données liées à l’accessibilité (comme par exemple UIAccessibility.isInvertColorsEnabled qui permet de savoir si l’utilisateur a choisi d’inverser les couleurs d’iOS).

Lire les éléments affichés à l’écran

Apple intègre dans UIAccessibility quelques variables qui nous permettront de rendre notre application accessible. Deux d’entres elles sont très importantes :

• var accessibilityLabel: String? -> Variable représentant ce que VoiceOver va lire
• var isAccessibilityElement: Bool -> Permet de préciser, ou non, si l’élément est accessible. Par exemple, VoiceOver prend en compte, ou non, cet élément en fonction de la valeur de la variable.

Ces deux variables font partie de NSObject, ce qui veut dire que la quasi totalité de class de UIKit ont ces variables et sont donc très simple à rendre accessible !

Ces éléments sont également paramétrable dans le Storyboard ou dans les XIB !

Les UITableViewCell

Par défaut, VoiceOver lit l’intégralité de la cellule, ce qui peut nous causer quelques problèmes. Dans ce cas, il faut rendre la variable isAccessibilityElement (via le code ou via le storyboard) de la cellule à false. Ainsi, VoiceOver va pouvoir accéder aux éléments enfants.

Le retour vocal sur Android

Nous allons maintenant voir comme utiliser l’accessibilité mobile sur Android et faire fonctionner une application avec Talk Back.

Activer la lecture

Pour activer la lecture de l’écran sur Android, rendez-vous dans Paramètres, puis dans Accessibilité 

Cliquez ensuite sur le menu Lecteur d’écran (ou TalkBack selon votre appareil) 

Enfin, activez Voice Assistant (ou TalkBack selon votre téléphone) 

Vous avez désormais un retour vocal sur votre smartphone Android !

Tester l’activation de l’accessibilité

Il est possible de vérifier si l’utilisateur a activé l’accessibilité sur Android via ce test :

AccessibilityManager am = (AccessibilityManager) getContext().getSystemService(Context.ACCESSIBILITY_SERVICE);  
  
if (am.isEnabled()) {  
    // Si l’accessibilité est activée  
} else {  
    // Si l’accessibilité n’est pas activée  
}  

Cela permet d’adapter l’affichage en conséquence si on le souhaite.

Lire les éléments affichés à l’écran

Côté layout de l’application, il est possible d’ajouter un attribut nommé contentDescription au code XML des éléments graphiques. Cet attribut sera alors lu par Talk Back lors du clic.

<!-- title: Le texte qui sera affiché à l’écran -->  
<!-- contentDescription: Le texte qui sera lu par Talk Back -->  
<menu xmlns:android="http://schemas.android.com/apk/res/android">  

    <item  
        android:id="@+id/menu_item_accueil"  
        android:icon="@drawable/icone_actu"  
        android:title="Accueil"  
        android:contentDescription="Menu, accueil"  
    />
      
    <item  
        android:id="@+id/menu_item_parametre"  
        android:icon="@drawable/icone_parametre"  
        android:title="Paramètre"  
        android:contentDescription="Menu, paramêtre"  
    />  
  
</menu>  

L’accessibilité mobile avec les fragments

Sur Android, l’utilisation de fragments peut parfois poser quelques problèmes lors de l’activation de l’accessibilité. Par défaut, si l’on ajoute un fragment par dessus un autre, le focus sera toujours fait sur le fragment du dessous et donc, Talk Back lira les éléments sur le mauvais fragment.

Pour éviter cela, il faut indiquer à TalkBack / Voice Assistant que les fragments du dessous ne doivent plus être lus. Pour cela, on peut utiliser le code suivant juste avant de commit la transaction pour afficher le nouveau fragment :

// On prend l’exemple du clique sur un bouton qui afficherais un nouveau fragment  
monBouton.setOnClickListener(view -> {
        FragmentTransaction transaction = getActivity().getFragmentManager().beginTransaction();
        mRootView.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS); // Les fragments du dessus ne seront plus lus par Talk Back
        MonNouveauFragment lMonNouveauFragment = new MonNouveauFragment();
        transaction.replace(R.id.main_content, lMonNouveauFragment);
        transaction.addToBackStack(null);
        transaction.commit();
    });

Ensuite, lorsque l’on retourne sur le fragment du dessous, il faut de nouveau indiquer à Talk Back / Voice Assistant que l’on peut le lire ; sinon, ces éléments serons ignorés. Pour cela, on peut utiliser le code suivant :

  
public class MonFragment extends Fragment {  
  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
        if (mRootView != null) {  
            mRootView.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_YES); // Le fragment peut de nouveau être lu par Talk Back  
        }  
            return mRootView;  
        }
}  
  

Conclusion sur l’accessibilité des applications mobiles

Nous avons vu qu’il est possible d’implémenter des fonctionnalités pour que nos applications mobiles soient utilisables par des personnes malvoyantes avec Talk Back, Voice Assistant ou Voice Over.

À noter qu’il existe d’autres fonctionnalités pour l’accessibilité sur iOS et Android. Nous n’avons détaillé ici que le retour vocal car il s’agit de la plus importante et la plus souvent implémentée dans ce contexte.

Les fonctionnalités disponibles seront affichées dans le menu Accessibilité, aussi bien sur iOS que sur Android.