Texte traduit et résumé par Guillaume D’Amour

1. Introduction

Ce document intitulé «Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile» décrit comment les directives WCAG 2.0 et ses principes, directives et critères de réussite peuvent être appliqués au contenu Web mobile, des applications Web mobiles, des applications natives et des applications hybrides utilisant des composants Web dans des applications natives. Il fournit des conseils informatifs, mais ne fixe pas d’exigences. Il met également en évidence la pertinence des User Agent Accessibility Guidelines 2.0 [UAAG20] dans le contexte mobile.

Les recommandations et notes de W3C Mobile Web Initiative concernant les technologies mobiles offrent des conseils généraux aux développeurs sur la façon de créer du contenu et des applications qui fonctionnent bien sur les appareils mobiles. Le présent document met l’accent sur l’accessibilité du Web mobile et des applications aux personnes handicapées et ne vise pas à supplanter les autres travaux du W3C.

1.1 WCAG 2.0 et contenu / applications mobiles

« Mobile » est un terme générique pour une large gamme d’appareils et d’applications sans fil qui sont faciles à transporter et à utiliser dans une grande variété de paramètres, y compris à l’extérieur. Les périphériques mobiles vont de petits périphériques portables (par exemple, téléphones à fonctionnalité, smartphones) à des tablettes un peu plus grandes. Le terme s’applique également aux vêtements portables tels que les lunettes «intelligentes», les montres «intelligentes» et les bandes de fitness. Il s’applique à d’autres petits appareils informatiques tels que ceux embarqués dans les tableaux de bord des voitures, les dossiers des sièges d’avion et les appareils électroménagers.

Les appareils mobiles présentent un mélange de problèmes d’accessibilité qui sont différents de l’ordinateur de bureau typique / ordinateur portable. Tous les conseils contenus dans ce document peuvent être appliqués aux sites Web mobiles, aux applications Web mobiles et aux applications Web hybrides. La plupart des conseils s’appliquent également aux applications natives (également appelées «applications mobiles»).

2. Considérations relatives à l’accessibilité mobile principalement liées au premier principe: Perceptible

2.1 Taille d’écran réduite

La petite taille d’écran est l’une des caractéristiques les plus courantes des appareils mobiles. Alors que la résolution exceptionnelle de ces écrans permet théoriquement de fournir de grandes quantités d’informations, la petite taille de l’écran place des limites pratiques sur la quantité d’informations que les gens peuvent réellement visualiser à un moment donné, en particulier lorsque le grossissement est utilisé par des personnes mal voyante.

Certaines des meilleures pratiques pour aider les utilisateurs à tirer le meilleur parti des petits écrans incluent :

• Minimiser la quantité d’information qui est mise sur chaque page par rapport aux versions de bureau en fournissant une version mobile dédiée ou un «responsive design» (site Web adaptatif).
• Fournir une taille par défaut raisonnable pour le contenu et les commandes tactiles afin de minimiser le besoin de zoom avant et arrière pour les utilisateurs ayant une faible vision.
• Adapter la longueur des liens à la vur de la fenêtre.
• Positionner les champs de formulaire au-dessous de leurs étiquettes, plutôt que sur le côté.

2.2 Zoom / agrandissement

Une variété de méthodes permettent à l’utilisateur de contrôler la taille du contenu sur les appareils mobiles avec de petits écrans.
Voici plusieurs de ces méthodes:

• Fonctionnalités au niveau OS
• Définir la taille de texte par défaut;
• Agrandir l’écran entier;
• Vue agrandie sous le doigt de l’utilisateur.
• Fonctions au niveau du navigateur
• Définir la taille de texte par défaut du texte affiché dans la fenêtre du navigateur;
• Agrandir la fenêtre d’affichage du navigateur (généralement «pinch-zoom»).

Le critère de succès 1.4.4 de WCAG 2.0 exige que le texte soit redimensionnable sans technologie d’assistance jusqu’à 200%. Pour répondre à cette exigence, le contenu ne doit pas empêcher l’agrandissement du texte par l’utilisateur. Les méthodes suivantes peuvent être utilisées:

• Assurez-vous que le zoom de pincement du navigateur n’est pas bloqué par le méta-élément de la fenêtre de la page afin qu’il puisse être utilisé pour zoomer la page à 200%.
• Bien que cette technique réponde aux critères de réussite, il est plus simple d’utiliser les fonctions de redimensionnement du texte qui présente le contenu dans la taille choisie par l’utilisateur.
• La prise en charge des «system fonts» qui suivent les préférences de l’utilisateur au niveau de la plateforme pour la taille du texte.
• Fournir des contrôles sur la page pour modifier la taille du texte.

2.3 Contraste

Les appareils mobiles sont plus susceptibles que les ordinateurs de bureau à être utilisés dans des environnements variés, y compris à l’extérieur, où l’éblouissement du soleil ou d’autres sources d’éclairage puissant est plus probable. Ce scénario souligne l’importance de l’utilisation d’un bon contraste pour tous les utilisateurs.

Le critère de succès 1.4.3. de WCAG 2.0 autorise des rapports de contraste différents pour les textes agrandis. Ce qui rend le texte plus facile à lire à un contraste inférieur. Le contenu de l’appareil mobile est visualisé sur des écrans plus petits et dans des conditions différentes, de sorte que cette tolérance au contraste réduit sur un texte agrandis doit être soigneusement étudiée pour les applications mobiles.

Par exemple, la taille de point par défaut pour les plateformes mobiles peut être supérieure à la taille de point par défaut utilisée sur les périphériques non mobiles. Lorsqu’ils déterminent le rapport du contraste à suivre, les développeurs devraient s’efforcer de n’appliquer le rapport de contraste réduit que lorsque le texte est à peu près équivalent à 1,5 fois (120% gras ou 150%) celui de la taille de la plateforme par défaut. Les personnes ayant une faible vision auront probablement besoin d’utiliser des fonctionnalités supplémentaires d’accessibilité au niveau de la plateforme et des technologies d’assistance telles que l’augmentation de la taille du texte et des fonctions de zoom pour accéder au contenu mobile.

3. Considérations relatives à l’accessibilité mobile principalement liées au second principe: Utilisable

3.1 Contrôle du clavier pour les périphériques à écran tactile

La conception des mobiles a évolué à partir des claviers physiques intégrés (par exemple fixe, slide-out) vers les ceux qui maximisent la zone de l’écran tactile et l’affichage d’un clavier à l’écran uniquement lorsque l’utilisateur a sélectionné un contrôle d’interface. Cependant, l’accessibilité au clavier demeure aussi importante que jamais et les principaux systèmes d’exploitation mobiles incluent des interfaces clavier, permettant aux appareils mobiles d’être utilisés par des claviers physiques externes (claviers connectés via Bluetooth, USB On-The-Go).

Le soutien de ces interfaces clavier bénéficie à plusieurs groupes handicapés:
Les personnes ayant une déficience visuelle qui peuvent bénéficier de certaines caractéristiques des claviers physiques sur les claviers tactiles (par exemple, des clés clairement séparées et des dispositions de clés plus prévisibles).
Les personnes ayant une dextérité ou des handicaps moteurs peuvent bénéficier de claviers optimisés pour minimiser les pressions involontaires (par exemple, des touches de formes, espacées et gardées différemment) ou de méthodes d’entrée spécialisées qui émulent l’entrée du clavier. Les gens qui peuvent être confondus par la nature dynamique des claviers à l’écran et qui peuvent bénéficier de la conformité d’un clavier physique.

3.2 Toucher la taille cible et l’espacement

La haute résolution des appareils mobiles signifie que de nombreux éléments interactifs peuvent être montrés simultanément sur un petit écran. Mais ces éléments doivent être suffisamment grands et avoir assez de distance les uns des autres afin que les utilisateurs puissent les cibler efficacement par le toucher.
Les meilleures pratiques pour la taille d’une cible tactile sont les suivantes:
S’assurer que les cibles tactiles aient au moins 9 mm de haut sur 9 mm de large.
S’assurer que les cibles tactiles proches de la taille minimale sont entourées d’un peu d’espace inactif.

3.3 Gestes tactiles

De nombreux appareils mobiles sont conçus pour être principalement exploités via des gestes effectués sur un écran tactile. Ces gestes peuvent être simples, comme une touche avec un doigt, ou très complexes, impliquant plusieurs doigts, plusieurs touches et des formes dessinées.

Certains systèmes d’exploitation mobiles (mais pas tous) fournissent des fonctionnalités qui permettent à l’utilisateur de simuler des gestes complexes avec des commandes plus simples en utilisant un menu à l’écran.
Voici quelques-unes des meilleures pratiques pour décider des gestes à l’écran tactile:

Les gestes dans les applications doivent être aussi facile que possible à effectuer. Ceci est particulièrement important pour les modes d’interaction du lecteur d’écran qui remplacent la manipulation directe par un processus en deux étapes de mise au focus et d’activation d’éléments. Il s’agit également d’un défi pour les utilisateurs ayant des troubles moteurs ou de la dextérité ou ceux qui utilisent des pointeurs de tête ou un stylet où les gestes multi-touch peuvent être difficiles ou impossibles à exécuter. Souvent, les concepteurs d’interface ont différentes options pour la façon de mettre en œuvre une action. Les widgets nécessitant des gestes complexes peuvent être difficiles ou impossibles à utiliser pour les lecteurs d’écran. Habituellement, des alternatives de conception existent pour permettre des changements aux réglages par simples tapotement ou gestes de balayage.

Activation d’éléments via l’événement «mouseup» ou «touchend». L’utilisation de l’événement «mouseup» ou «touchend» pour déclencher des actions contribue à prévenir les actions non intentionnelles lors de l’interaction entre le toucher et la souris. Les utilisateurs de souris qui cliquent sur des éléments pouvant être actionnés (liens, boutons, entrées de saisie) devraient avoir la possibilité de déplacer le curseur hors de l’élément pour empêcher l’événement d’être déclenché. Cela permet aux utilisateurs de changer d’avis sans être obligés de s’engager dans une action. De la même manière, les éléments accessibles via l’interaction tactile devraient généralement déclencher un événement (par exemple navigation, soumettre) uniquement lorsque l’événement «touchend» est déclenché (c’est-à-dire lorsque tous les éléments suivants sont vrais: l’utilisateur a levé le doigt de l’écran, la position du doigt est à l’intérieur de l’élément actionnable, et la dernière position du doigt est égale à la position au point de départ).

Un autre problème avec les gestes à l’écran tactile est qu’ils peuvent ne pas avoir d’indicateurs à l’écran qui rappellent aux gens comment et quand les utiliser. Par exemple, un glisser dans le côté gauche du geste d’écran pour ouvrir un menu n’est pas détectable sans un indicateur ou un conseil du geste.

3.4 Gestes de manipulation de l’appareil

En plus des gestes de l’écran tactile, de nombreux systèmes d’exploitation mobiles fournissent aux développeurs des options de contrôle qui sont déclenchées par la manipulation physique du dispositif (par exemple tremblement ou inclinaison). Bien que les gestes de manipulation des périphériques puissent aider les développeurs à créer des interfaces utilisateur novatrices, ils peuvent également représenter un défi pour les personnes qui ont de la difficulté à tenir ou sont incapables de tenir un appareil mobile.

Certains systèmes d’exploitation mobiles (mais pas tous) fournissent des fonctionnalités qui permettent à l’utilisateur de simuler les secousses, inclinaisons, etc. d’un menu à l’écran. Par conséquent, même lorsque des gestes de manipulation de périphérique sont fournis, les développeurs doivent toujours fournir des options de contrôle alternatives tactiles et à clavier. Un autre problème avec le contrôle via des gestes de manipulation de périphérique est qu’ils pourraient manquer d’indicateurs à l’écran qui rappellent aux gens comment et quand les utiliser.

3.5 Placer les boutons où ils sont faciles d’accès

Les sites et applications mobiles doivent positionner des éléments interactifs où ils peuvent être facilement atteints lorsque le périphérique est maintenu dans des positions différentes.

Lors de la conception de contenu Web mobile et les applications, de nombreux développeurs essaient d’optimiser l’utilisation d’une seule main. Cela peut être bénéfique pour les personnes handicapées qui ne disposent que d’une seule main, mais les développeurs devraient également considérer qu’un placement de boutons facile à utiliser pour certains utilisateurs peut causer des difficultés pour d’autres. Par conséquent, l’utilisation flexible devrait toujours être l’objectif.
Certains systèmes d’exploitation mobiles (mais pas tous) fournissent des fonctionnalités qui permettent à l’utilisateur de déplacer temporairement l’affichage vers le bas ou sur le côté pour faciliter l’opération à une seule main.

4. Considérations d’accessibilité mobile liées principalement au troisième principe: Compréhensible

4.1 Modification de l’orientation de l’écran (Portrait / Paysage)

Certaines applications mobiles définissent automatiquement l’écran sur une orientation d’affichage particulière (paysage ou portrait) et attendent que les utilisateurs pivotent leurs appareils mobiles pour l’harmoniser. Cependant, certains utilisateurs ont leurs appareils mobiles montés dans une orientation fixe (par exemple sur le bras d’un fauteuil roulant électrique). Par conséquent, les développeurs d’applications mobiles devraient essayer de prendre en charge les deux orientations. Si ce n’est pas possible, les développeurs doivent veiller à ce que tous les utilisateurs puissent facilement modifier l’orientation pour revenir à un point où l’orientation de leur périphérique est prise en charge. Les changements d’orientation doivent être programmés pour être détectés par des technologies d’assistance telles que les lecteurs d’écran. Par exemple, si un utilisateur de lecteur d’écran ignore que l’orientation a changé, il pourrait alors effectuer des commandes de navigation incorrectes.

4.2 Disposition cohérente

Les composants répétés sur plusieurs pages doivent être présentés dans une présentation cohérente. Dans la conception «responsive», où les composants sont disposés en fonction de la taille de l’appareil et l’orientation de l’écran, les pages Web ont un affichage particulier (taille et l’orientation fixe) qui doit être cohérent dans le placement des composants répétés et des composants de navigation. La cohérence entre les différentes tailles d’écran et les orientations de l’écran n’est pas une exigence sous WCAG 2.0.

4.3 Positionnement des éléments de page importants avant le défilement de la page

La petite taille d’écran sur de nombreux appareils mobiles limite la quantité de contenu qui peut être affichée sans défilement. Le positionnement des informations importantes de la page afin qu’il soit visible sans nécessiter de défilement peut aider les utilisateurs souffrant de troubles de la vue et les utilisateurs ayant des déficiences cognitives.

Si un utilisateur à faible vision une fonction de grossissement, seule une petite partie de la page peut être affichée. Le fait de placer des éléments importants avant le défilement de la page permet à ceux qui utilisent le zoom de localiser des informations importantes sans avoir à faire défiler la page pour déplacer la zone agrandie. Placer des éléments importants avant le défilement de la page permet également de localiser le contenu sans effectuer d’interaction. Cela aide les utilisateurs qui ont des déficiences cognitives telles que des troubles de mémoire à court terme.

4.4 Regroupement d’éléments exploitables qui effectuent la même action

Lorsque plusieurs éléments exécutent la même action ou accèdent à la même destination (par exemple, icône de lien avec texte de lien), ceux-ci doivent être contenus dans le même élément actionnable. Cela augmente la taille de la cible tactile pour tous les utilisateurs et profite aux personnes ayant un handicap moteur. Il réduit également le nombre de cibles redondantes, ce qui profite aux utilisateurs utilisant les lecteurs d’écran et le contrôle clavier.

4.5 Fournir une indication claire que les éléments sont actionnables

Les éléments qui déclenchent des changements doivent être suffisamment mis en évidence pour pouvoir être clairement distingués des éléments non susceptibles d’être actionnés (contenu, informations sur le statut, etc.). Il est important pour les applications mobiles Web et natives qui comportent des éléments pouvant être utilisés comme des boutons ou des liens que ceux-ci soient distinct et facile d’utilisation, en particulier dans les modes d’interaction où les éléments actionnables sont communément détectés visuellement (utilisation tactile et souris). Les éléments interactifs doivent également être détectables par les utilisateurs qui utilisent un outil d’accessibilité.

Les utilisateurs qui interagissent avec le contenu à l’aide de curseurs tactiles ou visuels (par exemple, souris, pavés tactiles) doivent être en mesure de distinguer clairement les éléments pouvant être actionnés tels que les liens ou les boutons. La suite de ces conventions bénéficie à tous les utilisateurs, mais surtout aux utilisateurs ayant des déficiences visuelles. La forme, la couleur, le style, le positionnement sont quelques-unes des caractéristiques visuelles qui permettent de déterminer qu’un élément peut être actionné.

4.6 Fournir de l’aide contextuelle pour les gestes personnalisés de manipulation de l’écran tactile et de l’appareil

La capacité de fournir un contrôle via des touches tactiles personnalisées et des gestes de manipulation de périphériques peut aider les développeurs à créer de nouvelles interfaces efficaces. Cependant, pour beaucoup de gens, les gestes personnalisés peuvent être un défi à découvrir, à réaliser et à se souvenir.
Par conséquent, des instructions (par exemple des superpositions, des info-bulles, des tutoriels, etc.) doivent être fournies pour expliquer quels gestes peuvent être utilisés pour contrôler une interface donnée et s’il existe des alternatives. Pour être efficaces, les instructions doivent, elles-mêmes, être facilement détectables et accessibles. Les instructions doivent également être disponibles à tout moment, et non seulement lors de la première utilisation.

5. Considérations d’accessibilité mobile liées principalement au quatrième principe: Robuste

5.1 Définir le clavier virtuel sur le type d’entrée de données requise

Sur certains appareils mobiles, le clavier standard peut être personnalisé dans les paramètres de l’appareil et d’autres claviers personnalisés peuvent être installés. Certains périphériques mobiles fournissent également différents claviers virtuels en fonction du type d’entrée de données. Cela peut être défini par l’utilisateur ou peut être réglé sur un clavier spécifique. Par exemple, l’utilisation des différents contrôles de champ de formulaire HTML5 (voir API de l’éditeur de méthodes) sur un site Web affiche automatiquement différents claviers lorsque les utilisateurs entrent des informations dans ce champ. Définir le type de clavier aide à prévenir les erreurs et assure que les formats sont corrects, mais peut être source de confusion pour les personnes qui utilisent un lecteur d’écran lorsqu’il y a des changements subtils dans le clavier.

5.2 Fournir des méthodes faciles pour l’entrée de données

Les utilisateurs peuvent saisir des informations sur des appareils mobiles de plusieurs façons, comme le clavier à l’écran, le clavier Bluetooth, le toucher et la voix. L’entrée de texte peut prendre beaucoup de temps et être difficile dans certaines circonstances. Réduisez la quantité d’entrées de texte nécessaire en fournissant des menus sélectionnés, des boutons radio, des cases à cocher ou en entrant automatiquement des informations connues (par exemple date, heure, lieu).

5.3 Soutenir les propriétés caractéristiques de la plateforme

Les appareils mobiles offrent de nombreuses fonctionnalités pour aider les utilisateurs handicapés à interagir avec le contenu. Il s’agit notamment des caractéristiques de la plateforme telles que le zoom, les polices plus grandes et les légendes. Les fonctionnalités et les fonctions disponibles diffèrent selon la version du périphérique et du système d’exploitation. Par exemple, la plupart des plateformes ont la possibilité de définir de grandes polices, mais toutes les applications ne l’honorent pas pour tout le texte. En outre, certaines applications peuvent augmenter la taille de la police, mais pas le texte, ce qui provoque le défilement horizontal.

Pour plus d’information sur l’implémentation de l’accessibilité sur les appareils mobiles, vous pouvez consulter :

• L’accessibilité pour les développeurs d’applications Apple
• L’accessibilité pour les développeurs d’applications Android