5 conseils d'accessibilité pour les expériences mobiles

5 Accessibility Tips for Mobile Experiences

L'accessibilité sur les appareils à petit écran comporte son propre ensemble de défis, tels que la façon dont les gens interagissent avec le contenu et la convivialité lors de l'accès au contenu avec un lecteur d'écran mobile.

La bonne nouvelle est que toute modification apportée à un environnement de bureau/clavier/souris contribuera à l'accessibilité d'un appareil tactile.

Passons en revue quelques bonnes pratiques concernant les utilisateurs mobiles.

1. Fournir de grandes cibles tactiles

Combien d'entre nous ont été dans une situation où nous essayons de toucher/cliquer sur un élément de nos téléphones mais c'est tout simplement trop petit ! Ou pire encore, nous tapons accidentellement sur quelque chose d'autre sur lequel nous ne voulions pas cliquer, ce qui nous oblige à trouver le bouton de retour sur le navigateur mobile pour réessayer. Frustrant, non ?

Plus précisément, nous parlons ici de composants d'interface utilisateur tels que les commandes de menu hamburger, les icônes de médias sociaux, les entrées de formulaire ; en gros, tout ce qui est un élément autonome sur une page, c'est-à-dire pas un lien intégré dans le contenu du corps.

Taille cible tactile

Lorsqu'il s'agit de garantir la convivialité et l'accessibilité des cibles tactiles, la taille entre en jeu. Avec la taille, il y a quelques choses à garder à l'esprit, y compris la disponibilité et la taille physique de l'élément et l'espace entre les éléments afin d'éviter d'activer accidentellement quelque chose de involontaire.

Voici quelques règles à prendre en compte par d'autres organisations :

Ce qu'il est important de noter ici, c'est qu'en matière de conception, il n'est pas nécessaire d'agrandir l'icône réelle pour répondre à ces recommandations. En utilisant la propriété CSS padding , nous pouvons agrandir la zone tactile physique sans affecter la conception ou la mise en page du contenu.

Exemple de cible tactile

Passez en revue l'exemple de code suivant :

Dans l'exemple, nous avons les liens d'icônes espacés par la propriété margin . Cela séparera visuellement les liens, mais les cibles tactiles resteront à une taille de 24 par 24 pixels. Ce n'est pas idéal pour la convivialité.

Afin d'ajouter l'espacement supplémentaire requis pour augmenter la convivialité et maintenir la conception prévue, nous pouvons utiliser à la place la propriété padding . En échangeant les 10 pixels de la margin au padding nous avons satisfait notre souci d'accessibilité et les exigences de conception.

Critères de réussite WCAG

Cela revient à 2.5.5 Target Size qui indique :

"La taille de la cible pour les entrées de pointeur est d'au moins 44 par 44 pixels CSS."

2. Ajoutez beaucoup d'espaces blancs

L'utilisation de l'espace blanc, qui est la zone vierge et vide entre les composants interactifs, est en fait assez critique lors de la conception et de la création d'interfaces utilisateur utilisables. L'espace blanc aide de diverses manières, non seulement pour un séparateur visuel, mais aussi pour la navigation.

Par exemple, il n'est pas trop rare de rencontrer un groupe de liens censés se comporter comme des actions d'appel. Souvent, ceux-ci seront constitués de trois liens ou plus dans une grille et peuvent ne comporter aucun espace blanc entre eux. Cela pourrait offrir un certain attrait esthétique, cependant, lorsqu'il s'agit d'une personne ayant une déficience motrice, comme des tremblements des mains où elle est incapable de contrôler les mouvements de ses propres mains, la facilité d'utilisation de la navigation au-delà de ces liens de légende devient problématique.

Regardons l'exemple vidéo suivant :

Comme nous l'avons vu dans cette vidéo, la personne avait de grandes difficultés lorsqu'elle essayait de naviguer au-delà des grandes cibles tactiles et activait à plusieurs reprises des liens ou des menus contextuels par accident. C'est pourquoi il est idéal de placer au moins 8 à 10 pixels d'espace blanc entre les éléments interactifs.

Sans espace blanc, la convivialité et la navigation pourraient entraîner une expérience utilisateur frustrante.

Critères de réussite WCAG

Cela revient à 2.4.1 Bypass Blocks qui stipule :

"Un mécanisme est disponible pour contourner les blocs de contenu qui se répètent sur plusieurs pages Web."

3. Évitez le défilement 2D

Dans le passé, si une personne malvoyante avait besoin de zoomer sur la fenêtre de son navigateur pour lire le contenu, cela se traduirait traditionnellement par une mauvaise expérience de défilement en 2 dimensions (2D) ; avoir à faire défiler horizontalement ainsi que verticalement afin de consommer du contenu.

Le défilement 2D n'est pas seulement un irritant pour la plupart des gens, il introduit également un nouveau niveau de difficulté pour toute personne ayant une déficience motrice ou quelqu'un qui se fie uniquement au clavier pour naviguer ; cela nécessite de passer de l'utilisation de la Tab / Space pour lire le contenu verticalement, aux touches fléchées pour lire horizontalement, et vice-versa.

Le concept de conception réactive étant la méthode standard de mise en page, de nos jours, lorsque quelqu'un zoome sur son navigateur pour agrandir le contenu, les règles de mise en page et de style définies dans CSS se chargent à mesure que le niveau de zoom augmente. En d'autres termes, lorsque le contenu est zoomé, la personne de l'autre côté de l'écran bénéficiera de la disposition "mobile" éliminant le besoin de défilement horizontal, ce qui se traduira par une expérience utilisateur beaucoup plus positive.

La balise meta viewport + media queries

Cela est dû à l'inclusion de la balise meta de la fenêtre d'affichage HTML et des requêtes média CSS :

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Cela indique au navigateur de définir la largeur du contenu sur la largeur de l'appareil lui-même et de redimensionner ce contenu à 1 lors du chargement.

Les requêtes média CSS fonctionnent en tandem avec la balise meta de la fenêtre d'affichage. Ces blocs de CSS sont exécutés lorsque les exigences de la requête sont remplies et réorganisent généralement le contenu pour qu'il soit mieux adapté à la taille de l'écran.

 .grid__item { width: 100%; }​ @media (min-width: 500px) { .grid__item { display: inline-block; width: 50%; } }

Dans cet exemple, le conteneur de contenu grid__item a une largeur de 100% , remplissant toute la partie de l'écran. Si l'utilisateur devait changer l'orientation de l'écran de portrait à paysage, ou s'il s'agissait d'un écran de tablette ou de lager supérieur à la valeur de grid__item définie par le paramètre de requête min-width , chaque 500px serait défini sur 50% de la largeur de l'écran.

Le principal point à retenir ici est que si la mise en page du site a été développée avec les meilleures pratiques de conception réactive, cela suffirait à supprimer tout défilement 2D afin de consommer confortablement le contenu.

Critères de réussite WCAG

Cela revient à 1.4.10 Reflow qui stipule :

"Le contenu peut être présenté sans perte d'informations ou de fonctionnalités, et sans nécessiter de défilement en deux dimensions."

4. Autoriser n'importe quelle orientation

Le concept derrière Responsive Design est de créer une expérience indépendante de l'appareil. Cela signifie que le contenu est capable de redistribuer et de s'adapter à n'importe quel appareil, utilisé dans n'importe quelle orientation ; mode portrait ou paysage.

Pourquoi est-ce important en ce qui concerne l'accessibilité? Il s'agit de donner le choix et de ne pas faire d'hypothèses. Permettez à l'utilisateur final de consommer votre contenu de la manière qu'il préfère ou peut être requise par son environnement informatique particulier.

Par exemple, un utilisateur de fauteuil roulant qui peut également avoir une déficience motrice peut préférer monter son appareil mobile dans une orientation spécifique qui lui est confortable. Forcer quelqu'un à ajuster l'orientation en ne permettant pas au contenu de se redistribuer crée une barrière d'accessibilité. Cette tâche apparemment simple consistant à ajuster l'orientation peut entraîner des douleurs ou des frustrations qui auraient pu être évitées.

Critères de réussite WCAG

Cela revient à 1.3.4 Orientation qui stipule :

"Le contenu ne limite pas sa vue et son fonctionnement à une seule orientation d'affichage, telle que portrait ou paysage, à moins qu'une orientation d'affichage spécifique ne soit essentielle."

5. Testez avec le lecteur d'écran

En plus des ordinateurs de bureau traditionnels, les appareils mobiles disposent également d'un logiciel de lecture d'écran intégré. Selon les résultats de l' enquête WebAIM , les plus populaires sont VoiceOver associé à Safari sur iOS et Talkback associé à Chrome sur Android .

Passons en revue les bases sur la façon de démarrer chacun et quelques gestes afin de commencer à tester avec chaque plate-forme.

iOS

Démarrage

Pour démarrer VoiceOver sur un appareil iOS, accédez à :

  1. Réglages
  2. Général
  3. Accessibilité
  4. Voix off
  5. Activer le commutateur "VoiceOver"

Une fois que vous avez VoiceOver opérationnel, la navigation sera un peu différente de ce à quoi vous êtes probablement habitué. Fondamentalement, pour activer un élément, l'élément doit d'abord être "au point", puis appuyer deux fois pour activer l'élément.

Passons en revue les gestes courants lors de l'interaction avec une page Web lorsque VoiceOver est activé :

Geste Action
Tactile/simple pression Sélectionner et lire l'élément
Tapez deux fois Activer l'élément sélectionné
Balayez vers la droite Passer à l'élément suivant
Balayez vers la gauche Passer à l'élément précédent
Tapotement à deux doigts Interrompre/reprendre la lecture
Glisser vers le haut/bas avec trois doigts Faire défiler l'écran vers le haut/bas

Fermer

Pour désactiver Voiceover, accédez à l'écran de démarrage décrit ci-dessus, appuyez sur le bouton de commande "VoiceOver" pour lui donner le focus, puis appuyez deux fois pour le désactiver.

Android

Démarrage

Pour démarrer TalkBack sur un appareil Android, accédez à :

  1. Réglages
  2. Accessibilité
  3. Répondre
  4. Activer le commutateur "Utiliser le service"
  5. Cliquez sur OK"

Une fois que vous avez TalkBack opérationnel, la navigation sera un peu différente de ce à quoi vous êtes probablement habitué. Fondamentalement, pour activer un élément, l'élément doit d'abord être "au point", puis appuyer deux fois pour activer l'élément.

Passons en revue les gestes courants lors de l'interaction avec une page Web lorsque TalkBack est activé :

Geste Action
Tactile/simple pression Sélectionner et lire l'élément
Tapez deux fois Activer l'élément sélectionné
Balayez vers la droite Passer à l'élément suivant
Balayez vers la gauche Passer à l'élément précédent
Balayage à deux doigts vers le haut/bas Faire défiler l'écran vers le haut/bas

Fermer

Pour désactiver TalkBack, accédez à l'écran de démarrage décrit ci-dessus, appuyez sur le bouton de commande "TalkBack" pour lui donner le focus, appuyez deux fois pour l'activer, activez le contrôle "Ok" pour le désactiver.

Ressources:

Retour au blog