Accessibilité – Quelques bonnes pratiques

accessibilite

« Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel,
leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. »

Tim Berners Lee - Fondateur du World Wide Web

Une loi en 2005, un décret en 2009 :

« Le décret n°2009-546 du 14 mai 2009 qui permet l'application de l'article 47 de la loi n° 2005-102 du 11 février 2005 sur l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées et créant un référentiel d'accessibilité des services de communication
publique en ligne a été publié le 14 mai 2009. »

Un minimum de bonnes pratiques sont à mettre en place, en voici quelques unes :

NAVIGATION

Fil d'ariane

Toujours ajouter un fil d'ariane pour indiquer sa position à l'utilisateur.

fil-ariane

<p id=“fil-ariane“> 
  <a href=“#“>
    <img alt="Retour à la page d'accueil" src="images/icone-accueil.png » />
  </a>
  <a href=“#“>Page précédente</a>
  <strong>Page en cours</strong>
</p>

Deux moyens de navigation au minimum

  • Un menu principal (navigation)

Menu-navigation

  • Un moteur de recherche

Recherche

  • Un lien vers le plan du site qu'on placera dans le footer

Différenciation de la page active dans le menu

Une différenciation, visuelle et dans le code (rubrique active), de la page active du menu :

Menu-navigation

<ul class="menu-principal">
  <li>
    <a href="#" title="Accueil (rubrique active)" class="active">
      <img src="/images/picto-accueil.png" alt="Retour à l'accueil" />
    </a>
  </li>
  <li>
    <a href="#" title= "Menu 1" >Menu 1</a>
  </li>
</ul>

Les liens d'évitement

On définit par liens d'évitement : "Un lien hypertexte permettant d'accéder directement au contenu informationnel d'une page (généralement, au texte), en sautant les liens de navigation (les menus) présents sur cette page".

Cela évitera de lire linéairement tout un contenu non pertinent pour les navigateurs vocaux.

Placé après la 1re balise <body>, il peut être non visible sur la page ou visible comme sur l'exemple suivant :

liens-evitement

<div id="accessibility-link" class="invisible">
  <p><strong>Accès rapide :</strong></p> 
  <ul>
    <li>
      <a href="#main" title="Accès au contenu">Contenu</a>
    </li>
    <li>
      <a href="#menu" title="Accès à la navigation">Navigation</a>
    </li>
    <li>
       <a href="#search" title="Accès à la recherche">Recherche</a>
     </li>
  </ul>
</div>

Masquer un bloc

Ne plus utiliser de "display: none" ou de "visibility : hidden", mais plutôt cette méthode expliquée en détails dans cet article :
http://www.anysurfer.be/fr/en-pratique/sites-web/cacher-du-texte

TEXTE

  • Mettre des accents sur les lettres capitales.
  • Ne pas justifier un texte.
  • Utiliser les fonts pour mettre en forme un texte et non des images.
  • Ajouter un texte explicite correspondant à des symboles ambigus, exemple :

icone-texte

COULEURS

  • Appliquer un contraste suffisant entre contenus et arrière plan. Une application utile pour vérifier votre contraste Colour Contrast Analyser : http://www.paciellogroup.com/resources/contrastAnalyser
  • Ne pas utiliser que la couleur pour faire comprendre une information, par exemple sur un graphique ajouter directement une icône, du texte au lieu d'une légende à part.

LIENS

Les intitulés des liens doivent être explicites, il faut éviter les intitulés tel que:

  • En savoir plus
  • Lire la suite
  • Cliquez ici

Signaler un lien externe

Aussi bien visuellement avec une icône :

lien-externe-icone

Que dans le code avec "(nouvelle fenêtre)" :

<a href="#" title="Lien externe (nouvelle fenêtre)"> Lien externe</a>

Soulignement réservé aux hyperliens, avec possibilité de rajouter une couleur

lien-souligné

Des pictos/liens pour l’impression, la diminution et l’agrandissement du texte et pouvoir écouter le texte

Pictos-liens

DOCUMENTS, TABLEAUX

Indiquer le poids et format de chaque document à télécharger

document-pdf

Prévoir un titre pour les tableaux

tableaux

FORMULAIRES

Intitulé explicite sur chaque champs de formulaire

formulaire-label

Chaque couple intitulé/champs renseigne la même valeur sur les attributs FOR et ID

<form action=“ ” method=“ ”>
  <fieldset>
    <legend> </legend>
    <p>
      <label for="nom”>nom du label</label>
      <input type="text" id="nom" name=" " /> 
    </p>
    <p>
      <label for="nom-2”>nom du label</label> 
      <input type="text" id="nom-2" name=" " />
    </p>
  </fieldset>
</form>

Regrouper des champs de même nature dans les longs formulaires

En créant par exemple une partie données personnelles (civilité, adresses), une partie mon compte (pseudonyme/mail, mot de passe), une partie complément d'informations (données relatives aux besoins du site)... etc

Indiquer les champs obligatoire, messages d’erreurs ou suggestions de corrections, messages de confirmation, prévoir un récapitulatif des données avant la fin du formulaire

formulaire-valide

Prévoir visuellement le nombre d’étapes et de pouvoir revenir aux étapes précédentes

formulaire-etapes

Aide à la saisie

En ajoutant une auto-complétion dans les champs de recherche, de ville, de pays ..etc

Une alternative visuelle ou sonore à la CAPTCHA

formulaire-captcha

THE END

Voici quelques bonnes pratiques d'accessibilité à mettre en place sur chacun de vos sites.
Un tri a été fait, je n'ai pas tout cité, mais si déjà vous incorporez ces petites règles à vos habitudes, ce sera déjà bien.

Cela vous demandera des petits efforts au début, mais qui deviendront vite une bonne vieille habitude aussi simple que de mettre votre doctype.

Il n'y a pas de petites victoires !

SOURCES

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.