path: root/files/fr/apprendre/a11y/mobile/index.html

---
title: Accessibilité mobile
slug: Apprendre/a11y/Mobile
tags:
  - Accessibilité
  - Article
  - Débutant
  - Mobile
  - responsive
  - toucher
translation_of: Learn/Accessibility/Mobile
---
<div>
<div>{{LearnSidebar}}</div>

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

<p class="summary"><span class="tlid-translation translation"><span title="">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.</span> <span title="">Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.</span></span></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td><span class="tlid-translation translation"><span title="">Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la</span></span>  <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td><span class="tlid-translation translation"><span title="">Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="Accessibilité_sur_les_appareils_mobiles"><span class="tlid-translation translation"><span title="">Accessibilité sur les appareils mobiles</span></span></h2>

<p><span class="tlid-translation translation"><span title="">L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes.</span> <span title="">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).</span></span></p>

<p><span class="tlid-translation translation"><span title="">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.</span> <span title="">Les navigateurs mobiles modernes ont tendance à avoir un bon support pour</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, <span class="tlid-translation translation"><span title="">aussi</span></span></p>

<p><span class="tlid-translation translation"><span title="">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é.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Certaines exceptions nécessitent une attention particulière pour le mobile;</span> <span title="">les principaux sont:</span></span></p>

<ul>
 <li><span class="tlid-translation translation"><span title="">Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à-dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.</span></span></li>
</ul>

<h2 id="Résumé_des_tests_de_lecteur_d'écran_sur_Android_et_iOS"><span class="tlid-translation translation"><span title="">Résumé des tests de lecteur d'écran sur Android et iOS</span></span></h2>

<p><span class="tlid-translation translation"><span title="">Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels.</span> <span title="">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.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</span></span></p>

<h3 id="Android_TalkBack">Android TalkBack</h3>

<p><span class="tlid-translation translation"><span title="">Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Pour l'activer, sélectionnez Paramètres&gt; Accessibilité&gt; TalkBack, puis appuyez sur le curseur pour l'activer.</span> <span title="">Suivez toute invite supplémentaire à l'écran qui vous est présentée.</span></span></p>

<p><strong>Note:</strong>  <span class="tlid-translation translation"><span title="">Les anciennes versions de TalkBack sont activées dans</span></span> <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">slightly different ways</a>.</p>

<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes.</span> <span title="">Par exemple:</span></span></p>

<ol>
 <li><span class="tlid-translation translation"><span title="">Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">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.</span> <span title="">L'appareil lira chaque option.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">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.</span></span></li>
</ol>

<p><span class="tlid-translation translation"><span title="">Si vous souhaitez désactiver TalkBack:</span></span></p>

<ol>
 <li><span class="tlid-translation translation"><span title="">Accédez à votre application Paramètres en utilisant les gestes ci-dessus.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Accédez à Accessibilité&gt; TalkBack</span></span> .</li>
 <li><span class="tlid-translation translation"><span title="">Accédez au commutateur et activez-le pour le désactiver.</span></span> .</li>
</ol>

<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide.</span> <span title="">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.</span></span> .</p>

<p><span class="tlid-translation translation"><span title="">Pour une liste plus complète des gestes TalkBack, voir</span></span>  <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p>

<h4 id="Déverrouiller_le_téléphone"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage.</span> <span title="">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.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Vous pouvez également explorer en touchant le bouton <em>Déverrouiller</em> en bas au centre de l'écran, puis en appuyant deux fois.</span></span></p>

<h4 id="Menus_globaux_et_locaux"><span class="tlid-translation translation"><span title="">Menus globaux et locaux</span></span></h4>

<p><span class="tlid-translation translation"><span title="">TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil.</span> <span title="">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.</span></span></p>

<h4 id="Pour_accéder_à_ces_menus"><span class="tlid-translation translation"><span title=""><strong>Pour accéder à ces menus</strong>:</span></span></h4>

<ol>
 <li><span class="tlid-translation translation"><span title="">Accédez au menu global en glissant rapidement vers le bas, puis à droite</span></span> .</li>
 <li><span class="tlid-translation translation"><span title="">Accédez au menu local en balayant rapidement vers le haut, puis à droite.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour naviguer entre les différentes options.</span></span> .</li>
 <li><span class="tlid-translation translation"><span title="">Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.</span></span></li>
</ol>

<p><span class="tlid-translation translation"><span title="">Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir</span></span>  <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p>

<h4 id="Parcourir_des_pages_Web"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4>

<p><span class="tlid-translation translation"><span title="">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.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Par exemple, avec TalkBack activé:</span></span></p>

<ol>
 <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span>
  <ul>
   <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant</span></span> .</li>
   <li><span class="tlid-translation translation"><span title="">Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir.</span> <span title="">Répétez pour chaque </span></span>caractère<span class="tlid-translation translation"><span title="">.</span></span></li>
   <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li>
  </ul>
 </li>
 <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page.</span></span> .</li>
 <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Appuyez deux fois pour le sélectionner.</span> <span title="">Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">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.</span></span></li>
</ol>

<p><strong>Note:</strong>  <span class="tlid-translation translation"><span title="">Voir  </span></span> aussi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&amp;ref_topic=3529932">Get started on Android with TalkBack</a> <span class="tlid-translation translation"><span title="">pour obtenir une documentation plus complète.</span></span></p>

<h3 id="iOS_VoiceOver">iOS VoiceOver</h3>

<p><span class="tlid-translation translation"><span title="">Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Pour l'activer, accédez à l'application <em>Paramètres</em>, puis sélectionnez <em>Général</em> &gt; <em>Accessibilité</em> &gt; <em>VoiceOver</em>.</span> <span title="">Appuyez sur le curseur <em>VoiceOver</em> pour l'activer (vous verrez également un certain nombre d'autres options liées à <em>VoiceOver</em> sur cette page).</span></span></p>

<p><span class="tlid-translation translation"><span title="">Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents</span></span> :</p>

<ol>
 <li><span class="tlid-translation translation"><span title="">Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez;</span> <span title="">votre appareil parlera de l'élément sur lequel vous avez tapé.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">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).</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt avec trois doigts pour faire défiler une page.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">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.</span></span></li>
</ol>

<p><span class="tlid-translation translation"><span title="">Pour le désactiver à nouveau, revenez à <em>Paramètres</em>&gt; <em>Général</em>&gt; <em>Accessibilité</em>&gt; <em>VoiceOver</em> en utilisant les gestes ci-dessus, puis basculez le curseur <em>VoiceOver</em> sur Désactivé.</span></span></p>

<h4 id="Déverrouiller_le_téléphone_2"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude.</span> <span title="">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.</span></span></p>

<h4 id="Utiliser_le_rotor"><span class="tlid-translation translation"><span title="">Utiliser le rotor</span></span></h4>

<p><span class="tlid-translation translation"><span title="">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.</span> <span title="">Pour l'utiliser:</span></span></p>

<ol>
 <li><span class="tlid-translation translation"><span title="">Tournez deux doigts sur l’écran comme si vous tourniez un cadran.</span> <span title="">Chaque option sera lue à voix haute au fur et à mesure que vous tournez.</span> <span title="">Vous pouvez aller et venir pour parcourir les options.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Une fois que vous avez trouvé l'option que vous voulez:</span></span>
  <ul>
   <li><span class="tlid-translation translation"><span title="">Relâchez vos doigts pour le sélectionner.</span></span></li>
   <li><span class="tlid-translation translation"><span title="">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é.</span></span></li>
  </ul>
 </li>
</ol>

<p><span class="tlid-translation translation"><span title="">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).</span></span></p>

<h4 id="Parcourir_des_pages_Web_2"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Essayons la navigation Web avec VoiceOver:</span></span></p>

<ol>
 <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span>
  <ul>
   <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.</span></span></li>
   <li><span class="tlid-translation translation"><span title="">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.</span> <span title="">Appuyez deux fois pour le taper.</span></span></li>
   <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li>
  </ul>
 </li>
 <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page.</span> <span title="">Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Par défaut, l’option de rotor sélectionnée sera Speaking Rate;</span> <span title="">vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre.</span> <span title="">Voici quelques exemples d'options disponibles:</span></span>
  <ul>
   <li><span class="tlid-translation translation"><span title=""><em>Taux de parole</em> : Modifiez le taux de parole.</span></span></li>
   <li><span class="tlid-translation translation"><span title=""><em>Conteneurs </em>: déplacez-vous entre différents conteneurs sémantiques de la page.</span></span></li>
   <li><span class="tlid-translation translation"><span title=""><em>En-têtes </em>: déplacez-vous entre les en-têtes de la page.</span></span></li>
   <li><span class="tlid-translation translation"><span title=""><em>Liens</em> : permet de se déplacer entre les liens de la page.</span></span></li>
   <li><span class="tlid-translation translation"><span title=""><em>Contrôles de formulaire </em>: déplacez-vous entre les contrôles de formulaire de la page.</span></span></li>
   <li><span class="tlid-translation translation"><span title=""><em>Langue</em> : déplacez-vous entre différentes traductions, si elles sont disponibles.</span></span></li>
  </ul>
 </li>
 <li><span class="tlid-translation translation"><span title="">S<em>électionnez les en-têtes</em>.</span> <span title="">Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.</span></span></li>
</ol>

<p><strong>Note:</strong>  <span class="tlid-translation translation"><span title="">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 </span></span> aussi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p>

<h2 id="Mécanismes_de_contrôle"><span class="tlid-translation translation"><span title="">Mécanismes de contrôle</span></span></h2>

<p><span class="tlid-translation translation"><span title="">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</span></span>  (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). <span class="tlid-translation translation"><span title="">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.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Par exemple, l'événement </span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a>  <span class="tlid-translation translation"><span title="">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.</span> <span title="">Essayez notre</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> exemple (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) <span class="tlid-translation translation"><span title="">pour voir ce que nous entendons.</span></span> .</p>

<p><span class="tlid-translation translation"><span title="">Sinon, des événements spécifiques à la souris, tels que </span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> et <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> <span class="tlid-translation translation"><span title="">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.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Si vous essayez de contrôler notre exemple</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) <span class="tlid-translation translation"><span title="">avec un clavier ou une touche, vous verrez le problème.</span> <span title="">Cela se produit car nous utilisons un code tel que:</span></span></p>

<pre><code>div.onmousedown = function() {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  movePanel();
}

document.onmouseup = stopMove;</code></pre>

<p><span class="tlid-translation translation"><span title="">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:</span></span></p>

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

panel.ontouchend = stopMove;</code></pre>

<p><span class="tlid-translation translation"><span title="">Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> aussi).</p>

<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à</span></span>   <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p>

<h2 id="Responsive_design">Responsive design</h2>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">Responsive design</a> <span class="tlid-translation translation"><span title="">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.</span></span> .</p>

<p><span class="tlid-translation translation"><span title="">En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:</span></span></p>

<ul>
 <li><span class="tlid-translation translation"><span title="">Adéquation des mises en page pour les appareils mobiles.</span> <span title="">Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible.</span> <span title="">Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, et <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li>
 <li><span class="tlid-translation translation"><span title="">Conserver les tailles d’image téléchargées.</span> <span title="">En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes.</span> <span title="">Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant.</span> <span title="">Vous pouvez gérer cela en utilisant</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li>
 <li><span class="tlid-translation translation"><span title="">Penser aux hautes résolutions.</span> <span title="">De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net.</span> <span title="">Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives.</span> <span title="">De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels.</span> <span title="">SVG a une petite taille de fichier et restera net quelle que soit la taille affichée</span></span>   (voir <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> <span class="tlid-translation translation"><span title="">pour plus de détails</span></span> ).</li>
</ul>

<p><strong>Note: </strong> <span class="tlid-translation translation"><span title="">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).</span></span></p>

<h3 id="Considérations_mobiles_spécifiques"><span class="tlid-translation translation"><span title="">Considérations mobiles spécifiques</span></span></h3>

<p><span class="tlid-translation translation"><span title="">Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile.</span> <span title="">Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.</span></span></p>

<h4 id="Ne_pas_désactiver_le_zoom"><span class="tlid-translation translation"><span title="">Ne pas désactiver le zoom</span></span></h4>

<p><span class="tlid-translation translation"><span title="">En utilisant</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, <span class="tlid-translation translation"><span title="">il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre</span></span> {{htmlelement("head")}}:</p>

<pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;</code></pre>

<p><span class="tlid-translation translation"><span title="">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.</span> <span title="">Il y a certaines situations où le zoom peut casser l'interface utilisateur;</span> <span title="">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.</span></span></p>

<h4 id="Garder_les_menus_accessibles"><span class="tlid-translation translation"><span title="">Garder les menus accessibles</span></span></h4>

<p><span class="tlid-translation translation"><span title="">É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</span> <span title="">c'est nécessaire - lorsque le site est visualisé sur mobile.</span> <span title="">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".</span></span></p>

<p><span class="tlid-translation translation"><span title="">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</span></span> {{anch("Control mechanisms")}} <span class="tlid-translation translation"><span title="">ci-dessus, et que</span> <span title="">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.</span></span> .</p>

<p><span class="tlid-translation translation"><span title="">Cliquez ici pour un</span></span>  <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p>

<h2 id="Entrée_utilisateur"><span class="tlid-translation translation"><span title="">Entrée utilisateur</span></span></h2>

<p><span class="tlid-translation translation"><span title="">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.</span> <span title="">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.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire.</span> <span title="">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</span></span>  {{htmlelement("select")}}  <span class="tlid-translation translation"><span title="">contenant les options les plus courantes (ce qui aide également à</span> <span title="">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.</span> <span title="">Vous pouvez voir un exemple simple de cette idée en action dans</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> ( <span class="tlid-translation translation"><span title="">voir le</span></span> <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p>

<p><span class="tlid-translation translation"><span title="">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.</span> <span title="">Voir</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a>  <span class="tlid-translation translation"><span title=""> pour quelques exemples</span></span> (voir <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — <span class="tlid-translation translation"><span title="">essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:</span></span></p>

<ul>
 <li><span class="tlid-translation translation"><span title="">Les types</span></span>  <code>number</code>, <code>tel</code>, et <code>email</code> <span class="tlid-translation translation"><span title="">affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Les types</span></span> <code>time</code> et <code>date</code> <span class="tlid-translation translation"><span title="">affichent des sélecteurs appropriés pour la sélection des heures et des dates.</span></span> .</li>
</ul>

<p><span class="tlid-translation translation"><span title="">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.</span> <span title="">Reportez-vous à </span></span>  <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a>  <span class="tlid-translation translation"><span title="">pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article </span></span> <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> <span class="tlid-translation translation"><span title="">pour en savoir plus.</span></span> .</p>

<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2>

<p><span class="tlid-translation translation"><span title="">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.</span> <span title="">Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.</span></span></p>

<div class="text-wrap tlid-copy-target">
<h4 class="result-shield-container tlid-copy-target" id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h4>
</div>

<ul>
 <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — <span class="tlid-translation translation"><span title="">Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.</span></span></li>
 <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — <span class="tlid-translation translation"><span title="">Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.</span></span></li>
</ul>

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

<div>
<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2>

<ul>
 <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
</ul>
</div>
</div>