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
  - B2G
  - Firefox OS
  - Mobile
  - checklist
translation_of: Web/Accessibility/Mobile_accessibility_checklist
original_slug: Accessibilité/Checklist_accessibilite_mobile
---
<div class="summary">
 <p><span class="seoSummary">Ce document fournit une liste concise des points à vérifier par les développeurs pour garantir l’accessibilité d’une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques.</span></p>
</div>
<h2 id="Couleur">Couleur</h2>
<ul>
 <li>Le contraste des couleurs <strong>DOIT</strong> respecter le niveau AA de <a href="http://www.w3.org/TR/WCAG/" hreflang="en">WCAG 2.0</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 véhiculée par la couleur <strong>DOIT</strong> toujours être disponible via un autre moyen (ex : les liens peuvent être bleus mais aussi soulignés, etc.).</li>
</ul>
<div class="note">
 <p><strong>Note</strong> :</p>
 <ul>
  <li>Sur <a href="www.yoyodesign.fr">Yoyo Design</a> vous trouverez l’outil <a href="http://www.yoyodesign.org/outils/ncolor/index.fr" title="Le sélecteur de couleurs nColor">nColor</a> de sélection des couleurs. Il vous permettra de simuler les différents types de visions daltoniennes ;</li>
  <li>Jon Snook a écrit un outil intéressant permettant de vérifier le contraste des couleurs : <a href="http://snook.ca/technical/colour_contrast/colour.html" hreflang="en">Colour Contrast Checker (en)</a> ;</li>
  <li>Alternativement, le <em>Tanaguru Contrast-Finder</em> fait un travail similaire, mais il propose en plus une palette de couleurs similaires mais offrant un meilleur contraste.</li>
 </ul>
</div>
<h2 id="La_visibilité">La visibilité</h2>
<ul>
 <li>Les techniques de masquage du contenu comme une opacité nulle, l’ordre des z-index et la position hors-écran <strong>NE DOIVENT PAS</strong> être utilisées aux seules fins de visibilité ;</li>
 <li>Tout ce qui n’apparaît pas dans la partie visible de l’écran <strong>DOIT </strong>réellement être invisible (en particulier pour les applications d’une page comportant plusieurs « cartes » ) :
  <ul>
   <li>Il <strong>FAUT </strong>utiliser l’attribut <code>hidden</code> ou les propriétés de style <code>visibility</code> ou <code>display</code> ;</li>
   <li>À moins d’être absolument indispensable, l’attribut <code>aria-hidden</code> <strong>NE DOIT PAS </strong>être utilisé.</li>
  </ul>
 </li>
</ul>
<h2 id="Le_focus">Le focus</h2>
<ul>
 <li>Tous les éléments activables <strong>DOIVENT</strong> pouvoir porter le focus :
  <ul>
   <li>Les contrôles standards tels que les liens, les boutons et les champs de formulaire peuvent, par défaut, porter le focus ;</li>
   <li>Les contrôles non standards <strong>DOIVENT</strong> être assignés à un <a href="http://www.w3.org/TR/wai-aria/roles" hreflang="en">rôle ARIA</a>, comme <code>button</code>, <code>link</code> ou <code>checkbox</code>.</li>
  </ul>
 </li>
 <li>Le focus doit être géré de façon logique et cohérente.</li>
</ul>
<h2 id="Les_équivalents_textuels">Les équivalents textuels</h2>
<ul>
 <li>Les équivalents textuels <strong>DOIVENT</strong> être fournis pour chacun des éléments de l’application qui n’est pas strictement lié à la mise en forme :
  <ul>
   <li>Les attributs <code>alt</code> et <code>title</code> doivent être utilisés aux endroits appropriés (<em>lire l’article de </em>Steve Faulkner sur <a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/" hreflang="en">L’utilisation de l’attribut HTML <code>title</code> (en)</a>) ;</li>
   <li>Si les attributs ci-dessus ne sont pas appliquables, on utilise les <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header" hreflang="en">propriétés ARIA</a> appropriées comme <code>aria-label</code>, <code>aria-labelledby</code> et <code>aria-describedby</code>.</li>
  </ul>
 </li>
 <li>Les images avec du texte <strong>DOIVENT</strong> être évitées ;</li>
 <li>Tous les contrôles de formulaire <strong>DOIVENT</strong> posséder des éléments {{ htmlelement("label") }} pour permettre aux lecteurs d’écran de les utiliser.</li>
</ul>
<h2 id="La_gestion_des_états">La gestion des états</h2>
<ul>
 <li>Les contrôles standards comme les boutons radio, les cases à cocher, sont gérés par le système d’exploitation. En revanche, pour les contrôles spécifiques, les changements d’états doivent être fournis via les <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header" hreflang="en">é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="Principales_recommandations">Principales recommandations</h2>
<ul>
 <li>Un titre <strong>DOIT </strong>être fourni pour désigner l’application ;</li>
 <li>Les titres <strong>DOIVENT</strong> respecter une structure hiérarchique :
  <pre class="brush: html">&lt;h1&gt;Titre de premier niveau&lt;/h1&gt;
  &lt;h2&gt;Titre de deuxième niveau&lt;/h2&gt;
  &lt;h2&gt;Un autre titre de niveau 2&lt;/h2&gt;
    &lt;h3&gt;Un titre inférieur&lt;/h3&gt;</pre>
 </li>
 <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header" hreflang="en">Les points de repères ARIA</a> <strong>DOIVENT</strong> être utilisés pour décrire une application ou la structure d’un document comme <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code> ;</li>
 <li>Les gestionnaires d’événements tactiles <strong>NE DOIVENT PAS</strong> être déclenchés avant l’événement <code>touchend</code> ;</li>
 <li>Les points d’interaction tactiles <strong>DOIVENT </strong>être suffisamment grands pour garantir une bonne interaction (voir <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size" hreflang="en">les recommandations de la BBC sur l’accessibilité mobile (en)</a> sur ce sujet).</li>
</ul>

<div class="note">
 <p><strong>Note</strong> : <a href="http://www.tanaguru.com/">Le service de test automatique d'accessibilité de Tanaguru</a> fournit un moyen pratique de corriger les erreurs d'accessibilité pouvant se glisser dans une page Web, ou d'une application Web locale (par exemple Firefox OS). Vous trouverez plus d'informations concernant l'implémentation technique de Tanaguru, et comment contribuer au projet, sur <a href="http://tanaguru.org/">tanaguru.org</a>.</p>
</div>

<div class="note">
 <p><strong>Note</strong> : la <a href="http://yzen.github.io/2014/04/30/mobile-accessibility-checklist.html" hreflang="en">version originale, anglaise, de ce document</a> a été écrite par <a href="http://yzen.github.io/" hreflang="en">Yura Zenevich</a>.</p>
</div>
<p> </p>