path: root/files/fr/web/accessibility/mobile_accessibility_checklist/index.html

---
title: Check-list pour l'accessibilité mobile
slug: Web/Accessibility/Mobile_accessibility_checklist
tags:
  - Accessibility
  - Firefox OS
  - Guidelines
  - Mobile
  - checklist
translation_of: Web/Accessibility/Mobile_accessibility_checklist
original_slug: Accessibilité/Checklist_accessibilite_mobile
---
<p>Ce document fournit une liste concise des points à vérifier par les développeuses et développeurs pour garantir l'accessibilité d'une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques.</p>

<h2 id="colour">La couleur</h2>

<ul>
  <li>Le contraste des couleurs <strong>DOIT</strong> être conforme aux <a href="https://www.w3.org/TR/WCAG/#contrast-minimum">exigences du niveau AA du WCAG 2.1</a> :
    <ul>
      <li>Un contraste dont le ratio est de 4.5:1 pour les textes normaux (dont la fonte est inférieure à 18 points ou 14 points en gras) ;</li>
      <li>Un contraste dont le ratio est de 3:1 pour les grands textes (18 points minimum ou 14 points en gras).</li>
    </ul>
  </li>
  <li>L'information transmise par la couleur <strong>DOIT</strong> également être disponible par d'autres moyens (texte souligné pour les liens, etc.).</li>
</ul>

<h2 id="visibility">La visibilité</h2>

<ul>
  <li>Les techniques de masquage du contenu, telles que l'opacité nulle, l'ordre d'indexation en « z » et le placement hors écran, <strong>NE DOIVENT PAS</strong> être utilisées exclusivement pour gérer la visibilité.</li>
  <li>Tout ce qui est autre, que l'écran actuellement visible, <strong>DOIT</strong> être <em>vraiment</em> invisible (particulièrement pertinent pour les apps à page unique avec plusieurs « <em>cartes</em> ») :
    <ul>
      <li>Utilisez l'attribut <code>hidden</code> ou les propriétés de style <code>visibility</code> ou <code>display</code>.</li>
      <li>Sauf si cela est absolument inévitable, l'attribut <code>aria-hidden</code> <strong>NE DOIT PAS</strong> être utilisé.</li>
    </ul>
  </li>
</ul>

<h2 id="focus">Le focus</h2>

<ul>
  <li>Tous les éléments activables <strong>DOIVENT</strong> être focusables :
    <ul>
      <li>Les contrôles standard tels que les liens, les boutons et les champs de formulaire sont accessibles par défaut.</li>
      <li>Les contrôles non standard <strong>DOIVENT</strong> avoir un <a href="/fr/docs/Web/Accessibility/ARIA/Roles">rôle ARIA</a> approprié qui leur est attribué, comme <code>button</code>, <code>link</code> ou <code>checkbox</code>.</li>
    </ul>
  </li>
  <li>Le focus <strong>DOIT</strong> être traité dans un ordre logique et de manière cohérente.</li>
</ul>

<h2 id="text_equivalents">Les équivalents textuels</h2>

<ul>
  <li>Un équivalent textuel <strong>DOIT</strong> être fourni pour chaque élément non textuel non strictement présenté dans l'application.
    <ul>
      <li>Utilisez <em>alt</em> et <em>title</em> lorsque cela est approprié (voir l'article de Steve Faulkner sur l'<a href="https://www.tpgi.com/using-the-html-title-attribute-updated/">Utilisation de l'attribut HTML title</a>).</li>
      <li>Si les attributs ci-dessus ne sont pas applicables, utilisez les <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">États et propriétés ARIA</a> appropriés tels que <code>aria-label</code>, <code>aria-labelledby</code>, ou <code>aria-describedby</code>.</li>
    </ul>
  </li>
  <li>Les images de texte <strong>DOIVENT</strong> être évitées.</li>
  <li>Tous les composants de l'interface utilisateur ayant un texte visible (ou une image de texte) comme étiquette <strong>DOIVENT</strong> avoir le même texte disponible dans le <a href="https://www.w3.org/TR/WCAG21/#dfn-name">nom</a> programmatique du composant. <a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">WCAG 2.1 : Étiquette dans le nom.</a></li>
  <li>Tous les contrôles de formulaire <strong>DOIVENT</strong> avoir des étiquettes (éléments <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a>) pour le bénéfice des utilisateurs de lecteurs d'écran.</li>
</ul>

<h2 id="handling_state">La gestion des états</h2>

<ul>
  <li>Les contrôles standard tels que les boutons radio et les cases à cocher sont gérés par le système d'exploitation. Cependant, pour d'autres contrôles personnalisés, les changements d'état <strong>DOIVENT</strong> être fournis via <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">les états ARIA</a> tels que <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code> et <code>aria-pressed</code>.</li>
</ul>

<h2 id="orientation">L'orientation</h2>

<ul>
  <li>Le contenu <strong>NE DOIT PAS</strong> être limité à une seule orientation, comme le portrait ou le paysage, sauf si cela est essentiel. <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">WCAG 2.1 : Orientation</a>
    <ul>
      <li>Des exemples de cas où une orientation est essentielle sont une application pour un piano ou un chèque de banque.</li>
    </ul>
  </li>
</ul>

<h2 id="general_guidelines">Directives générales</h2>

<ul>
  <li>Un titre d'application <strong>DOIT</strong> être fourni.</li>
  <li>Les titres <strong>NE DOIVENT PAS</strong> rompre la structure hiérarchique
  <pre class="brush: html">&lt;h1&gt;Titre de premier niveau&lt;/h1&gt;
  &lt;h2&gt;Titre secondaire&lt;/h2&gt;
  &lt;h2&gt;Un autre titre secondaire&lt;/h2&gt;
    &lt;h3&gt;Titre de bas niveau&lt;/h3&gt;</pre>
  </li>
  <li>L'<a href="https://www.washington.edu/accessibility/web/landmarks/">ARIA Landmark Roles</a> <strong>DOIT</strong> être utilisé pour décrire une structure d'application ou de document, telle que <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li>
  <li>Pour les événements tactiles, au moins un des éléments suivants <strong>DOIT</strong> être vrai (<a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html">WCAG 2.1 : Annulation du pointeur</a>) :
    <ul>
      <li>L'événement de descente <strong>NE DOIT PAS</strong> être utilisé pour déclencher une action.</li>
      <li>L'action est déclenchée par l'événement « up » et une option permettant d'interrompre l'action avant son achèvement est disponible ou une option permettant d'annuler l'action après son achèvement.</li>
      <li>L'événement de montée annulera toute action déclenchée par un événement de descente.</li>
      <li>Il est essentiel de déclencher l'action sur l'événement de descente. Par exemple, pour jouer à un jeu ou à une application de piano.</li>
    </ul>
  </li>
  <li>Les cibles tactiles <strong>DOIVENT</strong> être suffisamment grandes pour que l'utilisateur puisse interagir avec elles (voir <a href="https://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> pour des directives utiles sur la taille des cibles tactiles).</li>
</ul>