--- title: Accessibilité mobile slug: Learn/Accessibility/Mobile tags: - Accessibilité - Article - Débutant - Mobile - responsive - toucher translation_of: Learn/Accessibility/Mobile original_slug: Apprendre/a11y/Mobile ---
{{LearnSidebar}}
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}

L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.

Prerequisites: Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  previous articles in the course.
Objective: Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.

Accessibilité sur les appareils mobiles

L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).

De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  WAI-ARIA, aussi

Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.

Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:

Résumé des tests de lecteur d'écran sur Android et iOS

Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.

Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.

Android TalkBack

Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.

Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.

Note:  Les anciennes versions de TalkBack sont activées dans slightly different ways.

Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:

  1. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.
  2. Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.
  3. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.
  4. Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.

Si vous souhaitez désactiver TalkBack:

  1. Accédez à votre application Paramètres en utilisant les gestes ci-dessus.
  2. Accédez à Accessibilité> TalkBack .
  3. Accédez au commutateur et activez-le pour le désactiver. .

Note: Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .

Pour une liste plus complète des gestes TalkBack, voir  Use TalkBack gestures.

Déverrouiller le téléphone

Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.

Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.

Vous pouvez également explorer en touchant le bouton Déverrouiller en bas au centre de l'écran, puis en appuyant deux fois.

TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.

Pour accéder à ces menus:

  1. Accédez au menu global en glissant rapidement vers le bas, puis à droite .
  2. Accédez au menu local en balayant rapidement vers le haut, puis à droite.
  3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
  4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.

Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  Use global and local context menus.

Parcourir des pages Web

Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.

Par exemple, avec TalkBack activé:

  1. Ouvrez votre navigateur web.
  2. Activer la barre d'URL.
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL:
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .
    • Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
  4. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .
  5. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.
  6. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".
  7. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
  8. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.

Note:  Voir  aussi Get started on Android with TalkBack pour obtenir une documentation plus complète.

iOS VoiceOver

Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.

Pour l'activer, accédez à l'application Paramètres, puis sélectionnez Général > Accessibilité > VoiceOver. Appuyez sur le curseur VoiceOver pour l'activer (vous verrez également un certain nombre d'autres options liées à VoiceOver sur cette page).

Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :

  1. Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.
  2. Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).
  3. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.
  4. Faites glisser votre doigt avec trois doigts pour faire défiler une page.
  5. Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.

Pour le désactiver à nouveau, revenez à Paramètres> Général> Accessibilité> VoiceOver en utilisant les gestes ci-dessus, puis basculez le curseur VoiceOver sur Désactivé.

Déverrouiller le téléphone

Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.

Utiliser le rotor

Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:

  1. Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.
  2. Une fois que vous avez trouvé l'option que vous voulez:
    • Relâchez vos doigts pour le sélectionner.
    • S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.

Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).

Parcourir des pages Web

Essayons la navigation Web avec VoiceOver:

  1. Ouvrez votre navigateur web.
  2. Activer la barre d'URL.
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL:
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.
    • Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
  4. Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).
  5. Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.
  6. Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles:
    • Taux de parole : Modifiez le taux de parole.
    • Conteneurs : déplacez-vous entre différents conteneurs sémantiques de la page.
    • En-têtes : déplacez-vous entre les en-têtes de la page.
    • Liens : permet de se déplacer entre les liens de la page.
    • Contrôles de formulaire : déplacez-vous entre les contrôles de formulaire de la page.
    • Langue : déplacez-vous entre différentes traductions, si elles sont disponibles.
  7. Sélectionnez les en-têtes. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.

Note:  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi Test Accessibility on Your Device with VoiceOver.

Mécanismes de contrôle

Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see Mouse-specific events). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.

Par exemple, l'événement  click  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre simple-button-example.html exemple (see it running live) pour voir ce que nous entendons. .

Sinon, des événements spécifiques à la souris, tels que  mousedown et mouseup créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.

Si vous essayez de contrôler notre exemple  simple-box-drag.html (see example live) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:

div.onmousedown = function() {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  movePanel();
}

document.onmouseup = stopMove;

Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:

div.ontouchstart = function(e) {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  positionHandler(e);
  movePanel();
}

panel.ontouchend = stopMove;

Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir multi-control-box-drag.html (see the example live aussi).

Note: Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   Implementing game control mechanisms.

Responsive design

Responsive design a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .

En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:

Note:  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).

Considérations mobiles spécifiques

Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.

Ne pas désactiver le zoom

En utilisant  viewport, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:

<meta name="viewport" content="user-scalable=no">

Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.

Garder les menus accessibles

Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".

Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .

Cliquez ici pour un  good hamburger menu example.

Entrée utilisateur

Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.

Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans common-job-types.html ( voir le common jobs example live).

Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  html5-form-examples.html  pour quelques exemples (voir HTML5 form examples live) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:

Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  input types  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article feature detection article pour en savoir plus. .

Résumé

Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.

Voir également

{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}

Dans ce module