Développer pour l’accessibilité Web

À propos de cette traduction

Cette traduction faite par des volontaires peut ne pas refléter les intentions de l’original en anglais.

Traduction à jour par rapport à la version anglaise.
Traduction mise à jour : 2023-10-10. Version anglaise mise à jour le : 2019-01-09.

Traduction : Sofia Ahmed. Contribution : Sandra Velarde Gonzalez (ETNIC), Rémi Bétin.
WAI remercie ces traducteurs, et accueille volontiers d’autres traductions.

Associez une étiquette à chaque composant d’interface de formulaire

Utilisez un attribut for sur l’élément <label> correspondant à l’attribut id de l’élément de formulaire, ou utilisez des attributs WAI-ARIA. Dans certaines situations particulières, il peut être acceptable de masquer visuellement les éléments <label> ; mais la plupart du temps, les étiquettes sont nécessaires pour permettre à tous les lecteurs de comprendre la saisie requise.

Incluez des équivalents textuels pour les images

Veillez à ce qu’un équivalent textuel pour les images soit ajouté à toutes les images fonctionnelles et informatives. Utilisez un équivalent textuel vide alt="" pour les images décoratives, ou incluez-les dans les CSS. Les équivalents textuels sont généralement fournis par les auteurs du contenu écrit.

Identifiez la langue de la page et les changements de lange

Indiquez la langue principale de chaque page en utilisant l’attribut lang dans la balise html, par exemple <html lang="fr">. Utilisez l’attribut lang sur des éléments spécifiques lorsque la langue de l’élément diffère du reste de la page.

Utilisez le balisage pour fournir du sens et de la structure

Utilisez le balisage approprié pour les en-têtes, les listes, les tableaux, etc. Le HTML5 fournit des éléments supplémentaires, tels <nav> et <aside>, pour mieux structurer votre contenu. Les attributs role WAI-ARIA peuvent contribuer à donner plus de sens ; par exemple, en utilisant l’attribut role="search" pour identifier une fonctionnalité de recherche. Travaillez avec les designers et les auteurs des contenus pour vous accorder sur les significations et les utiliser de manière cohérente par la suite.

Exemple : utiliser l’HTML pour fournir une structure et du sens

Rendu

Superours à la rescousse

7 août 2015

Superours, l’ours favori de la ville, a encore une fois prouvé son courage en secourant un chaton coincé dans un arbre. Les témoins de la scène racontent que les efforts de Superours n’ont pas été appréciés par le félin, qui a infligé quelques petits coups de griffes à son sauveteur.

Extrait de code

<section>
  <article>
    <h2>Superours à la rescousse</h2>
    <time datetime="2015-08-07">7 août 2015</time>
    <p>Superours, l’ours favori de la ville, a encore une fois prouvé son courage en secourant un chaton coincé dans un arbre. Les témoins de la scène racontent que les efforts de Superours n’ont pas été appréciés par le félin, qui a infligé quelques petits coups de griffes à son sauveteur.</p>
    <aside>
      <h3>Articles connexes</h3>
      <ul>
        <li><a href="#">Superours reçoit les clés de la ville</a></li>
        <li><a href="#">Superours se présente comme maire</a></li>
      </ul>
    </aside>
  </article>
</section>

Exemple : champ de recherche utilisant WAI-ARIA

Rendu

Extrait de code

<form action="#" method="post">
  <div role="search">
    <label for="search">Rechercher</label>
    <input type="search" id="search" aria-describedby="search-help">
    <div id="search-help">Recherchez des résultats par identifiant ou nom de client</div>
    <button type="submit">Lancer la recherche</button>
  </div>
</form>

Aidez les utilisateurs à éviter les erreurs, et à les corriger

Fournissez des instructions claires, des messages d’erreur, et des notifications pour aider les utilisateurs à compléter les formulaires présents sur votre site. Lorsqu’une erreur survient :

Aidez les utilisateurs à trouver où est le problème
Fournissez des explications précises et compréhensibles
Proposez des moyens de correction

Soyez aussi flexibles que possible vis-à-vis du format lors du traitement des données saisies par l’utilisateur. Par exemple, acceptez les numéros de téléphone qui comprennent des espaces et supprimez les espaces au besoin.

Exemple : champ destiné à un numéro de téléphone australien, avec une validation flexible

Rendu

Téléphone

Par exemple, (02) 1234 1234

Extrait de code

<label for="phone">Téléphone</label>
<input id="phone" name="phone" type="tel"
       pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
       aria-describedby="phone-desc">
<p id="phone-desc">Par exemple, (02) 1234 1234</p>

Reflétez l’ordre logique de lecture dans l’ordre du code

Assurez-vous que l’ordre des éléments dans le code corresponde à l’ordre logique des informations présentées. Une des manières de le vérifier consiste à enlever le style CSS et à vérifier si l’ordre du contenu a du sens.

Exemple : refléter l’ordre logique de lecture dans le code

Baskets Espace

Baskets Espace pour un look classique et élégant.

Ajouter au panier

L’image positionnée avant l’en-tête pourrait être manquée

<img src="images/trainer.png" alt="...">
<h3>Baskets Espace</h3>
<p>Baskets...</p>
<a href="...">Ajouter au panier</a>

Voir tout l’exemple de code

<article class="product">
  <img alt="Baskets violettes avec lacets blancs, rond blanc vide sur la cheville extérieure et pointe de chaussure blanche" src="images/trainer.png">
  <h3 class="name">Baskets Espace</h3>
  <p class="desc">Baskets Espace pour un look classique et élégant.</p>
  <p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Ajouter au panier</a></p>
</article>

L’en-tête marque le début de la section

<h3>Baskets Espace</h3>
<img src="images/trainer.png" alt="...">
<p>Baskets...</p>
<a href="...">Ajouter au panier</a>

Voir tout l’exemple de code

<article class="product">
  <h3 class="name">Baskets Espace</h3>
  <img alt="Baskets violettes avec lacets blancs, rond blanc vide sur la cheville extérieure et pointe de chaussure blanche" src="images/trainer.png">
  <p class="desc">Baskets Espace pour un look classique et élégant.</p>
  <p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Ajouter au panier</a></p>
</article>

Créez un code qui s’adapte aux technologies des utilisateurs

Utilisez un design réactif pour adapter l’affichage à différents niveaux d’agrandissement et à différentes tailles d’espaces de restitution, tels que sur des appareils mobiles et des tablettes. Lorsque la taille de la police est agrandie d’au moins 200 %, évitez le défilement horizontal et empêcher tout rognage du contenu. Utilisez l’amélioration progressive pour veiller à ce que les fonctionnalités et le contenu soient disponibles quelle que soit la technologie utilisée.

Exemple : utiliser les requêtes média pour adapter la navigation

/* Sur les petits espaces de restitution, faire prendre toute la largeur à la navigation */
@media screen and (min-width: 25em) {
  #nav {
    float: none;
    width: auto;
  }
  #main {
    margin-left: 0;
  }
}

/* Sur les plus grands espaces de restitution, placer la navigation à gauche */
@media screen and (min-width: 43em) {
  #nav {
    float: left;
    width: 24%;
  }
  #main {
    margin-left: 27%;
  }
}

Transmettez une signification pour les éléments interactifs non standards

Utilisez WAI-ARIA pour fournir des informations sur l’état et la fonction des widgets personnalisés, tels que les accordéons et les boutons personnalisés. Par exemple, role="navigation" et aria-expanded="true". Du code supplémentaire est nécessaire pour implémenter le comportement de ces widgets, comme le développement et la réduction du contenu ou la manière dont le widget répond aux événements du clavier.

Exemple : Fonction et état du menu identifiés en utilisant WAI-ARIA

<nav aria-label="Navigation principale" role="navigation">
  <ul>
    <li><a href="...">Accueil</a></li>
    <li><a href="...">Boutique</a></li>
    <li class="has-submenu">
      <a aria-expanded="false" aria-haspopup="true" href="...">SpaceBears</a>
      <ul>
          <li><a href="...">SpaceBear 6</a></li>
          <li><a href="...">SpaceBear 6 Plus</a></li>
      </ul>
    </li>
    <li><a href="...">MarsCars</a></li>
    <li><a href="...">Contact</a></li>
  </ul>
</nav>

Assurez-vous que tous les éléments interactifs sont accessibles au clavier

Pensez à l’accès au clavier, particulièrement au moment de développer des éléments interactifs, comme des menus, des informations affichées au passage de la souris, des accordéons réductibles, ou des lecteurs multimédia. Utilisez tabindex="0" pour ajouter un élément qui ne reçoit normalement pas le focus, tel que <div> ou <span>, dans l’ordre de navigation ; lorsqu’il est utilisé pour l’interaction. Utilisez un script pour capter et répondre aux événements clavier.

Exemple : bouton de menu accessible au clavier

Rendu

Extrait de code

var buttonExample = document.getElementById('example-button');

buttonExample.addEventListener('keydown', function(e) {
  // Déroule le menu quand la touche ENTRÉE est pressée
  if(e.keyCode && e.keyCode == 13) {
    toggleMenu(document.getElementById('example-button-menu'));
  }
});

buttonExample.addEventListener('click', function(e) {
// Déroule the menu au clic de la souris
  toggleMenu(document.getElementById('example-button-menu'));
});

Évitez les CAPTCHAs si possible

Les CAPTCHAs posent problème pour un grand nombre de personnes. Il existe d’autres manières, plus simples à utiliser, de vérifier si les données de l’utilisateur ont été saisies par un humain, comme la détection automatique ou les interactions avec l’interface. Si le CAPTCHA doit absolument être inclus, veillez à ce qu’il soit facile à comprendre et qu’il inclue des alternatives pour les utilisateurs en situation de handicap, telles que :

Fournir plus de deux moyens de résoudre les CAPTCHAs
Fournir l’accès à un interlocuteur humain qui peut contourner le CAPTCHA
Ne pas rendre obligatoires les CAPTCHAS pour les utilisateurs autorisés

En savoir plus sur l’accessibilité

Ces conseils sont quelques-uns des éléments à prendre en compte pour l’accessibilité Web. Les ressources suivantes vous aident à comprendre l’importance de l’accessibilité, et à prendre connaissance des recommandations pour rendre le Web plus accessible pour les personnes handicapées.

Introduction à l’accessibilité — introduit l’accessibilité et fournit des liens vers de nombreuses ressources utiles
Principes d’accessibilité — une introduction aux exigences des WCAG
Comment les personnes en situation de handicap utilisent le Web — des exemples concrets des bénéfices de l’accessibilité pour les personnes en situation de handicap
Tutoriels sur l’accessibilité Web (en anglais) — vous montre comment développer du contenu Web accessible aux personnes en situation de handicap
Démonstration avant/après — un exemple de sites Web accessible et inaccessible qui partagent le même design visuel, avec des commentaires sur les principaux obstacles à l’accessibilité et les moyens d’y remédier, et des rapports d’évaluation pour les WCAG
Comment répondre aux exigences des WCAG (Référence rapide) — une liste personnalisable de toutes les exigences et les techniques des WCAG
Liste d’outils d’évaluation de l’accessibilité Web — mentionne un éventail d’outils pour aider à explorer l’accessibilité du code
Une vue d’ensemble de WAI-ARIA (en anglais) — une introduction aux WAI-ARIA avec des liens vers toutes les spécifications

Retour en haut de page