• Accueil
  • Blog
  • Optimiser l'accessibilité de vos sites web

Optimiser l'accessibilité de vos sites web

jeudi 09 juin 2016

En 2015, sur 65 millions de Français, 12 millions étaient touchés par un handicap (source : talenteo), soit 18,5 % de la population française atteints d’un dysfonctionnement visible ou non. Avec la montée en puissance d’internet, on estime qu’un Français passe en moyenne 4,1 heures sur internet par jour en 2015 (source blogdumoderateur).
Internet nous permet aujourd’hui de trouver facilement et rapidement de l’information.
C’est pourquoi, il fait partie intégrante de notre mode de vie et doit être accessible par tous.

Néanmoins, on constate que la plupart des sites Internet sont développés sans forcement penser aux difficultés pour les personnes handicapées. Même si la loi du 11 février 2005 pour « l’égalité des chances, la participation et la citoyenneté des personnes handicapées » oblige les administrations publiques à respecter des conformités précises d’accessibilités sur leur site (Référentiel Général d’Accessibilité pour les Administrations), il est prouvé que 80 % des sites publics ne font pas de démarche pour suivre les règles de la RGAA.
Nous allons voir dans cet article comment rendre votre site accessible avec des notions simples à mettre en place.

Pourquoi faire un site accessible ?

Un site web accessible se doit d’être utilisé par tous. Quel que soit le moyen utilisé pour recevoir l’information (logiciel d’assistance vocale ou retransmission en braille), il est important que les personnes avec des difficultés visuelles, auditives, motrices ou même des personnes âgées, comprennent, interagissent et naviguent efficacement sur le web.

Les principales règles à respecter

En premier lieu, il est important de suivre les normes de codage du W3C ( World Wide Web Consortium), permettant de suivre des standards pour l’accessibilité web. Pour vérifier les erreurs et les corriger, vous pouvez vous rendre sur le site validator.

 

Les attributs alt

Votre site Internet se compose généralement de nombreuses images (sliders, logos pictogrammes etc.) pour le rendre plus dynamique. Ces images sont compliquées à être compréhensibles par des malvoyants ou aveugles.
Il est donc essentiel de mettre une balise alt pour apporter la même information quand l’image ne peut pas être lisible.

Il n’est pas nécessaire de faire de longues phrases.
Un mot peut parfois suffire s’il est bien choisi. Il ne faut généralement pas dépasser les 80 caractères.
Exemple à mettre dans votre code pour une image :

img

<img src= "photo1.jpg"  alt= "coucher de soleil sur la plage avec deux palmiers" />

À noter que les attibuts alt doivent être présents :

  • sur les balises img
  • sur les balises area
  • sur les boutons des formulaires avec un input type= "image".

 

Le titre des pages

Avoir un titre de page (balise <title>) sur chaque page de votre site Internet est un point important pour votre référencement mais pas seulement. C’est la première information lisible qui permet d’accentuer la compréhension des textes pour les personnes naviguant avec un lecteur d’écran. Si le titre est bien renseigné, l’utilisateur pourra continuer sa navigation et être informé que le contenu proposé correspond à ses attentes.

Il est essentiel aussi d’apporter une hiérarchie dans vos titres de section (balise <h1> à <h6>) sans coupure à vos contenus (un h2, suivi d’un h3, puis d’un h4). Pour savoir le contenu de vos pages est bien hiérarchisé il vous suffit de désactiver le css.

Exemple de hiérarchisation sur notre site Projectsquare :

<H1> la future plateforme développée pour optimiser la gestion de vos projets web </H1>

      <H2> Pilotez efficacement vos projets web grâce aux fonctionnalités dédiées et simples d'utilisation</H2>

             <H3> relation client </h3>

 

Les couleurs et les contrastes

Nous constatons que plus de 10 % de la population masculine mondiale est daltonienne (source wikipédia). C’est pourquoi, sur votre site internet, il est important de mettre un contraste élevé entre l’arrière-plan et les couleurs.
Il existe plusieurs outils pour évoluer votre degré de contraste pour une meilleure lisibilité.

Snook color contrast checker
Il vous permet de tester votre couleur de texte et votre arrière plan selon les critères du WCAG 2.

Gmazzocato

 

Le CSS et le JavaScript

Le css est utilisé pour mettre en forme votre site. Pour une meilleure accessibilité, il vous est demandé de séparer votre structure de page (html) avec votre style css. Il vous sera recommandé d’utiliser une taille de polices de caractères lisible (minium 10px) avec la propriété css font-size. Vous pouvez également utiliser des line-height pour une améliorer la compréhension de vos textes.
Lors de l’utilisation d’un script il vous est demandé qu’il soit contrôlable à la fois par la souris et par le clavier.

 

Les formulaires 

Pour accentuer l’accessibilité de votre site Internet, il est préférable de regrouper tous les éléments souhaités dans une balise FIELDSET et LEGEND pour qu’il soit le plus lisible possible ainsi qu’un LABEL avec son attribut FOR.
Exemple :
<FIELDSET>
            <LEGEND> Informations personnelles</LEGEND>
                     <LABEL for= "nom"> Votre nom </LABEL>
                     < input type = "text" name="nom" TABINDEX= 1>
                     <LABEL for="prénom" > Votre prénom </LABEL>
                   <input type="text" name="prenom" TABINDEX=2>

Pour les personnes navigant au clavier, il est utile d’ajouter l’attribut TABINDEX pour spécifier l’ordre de tabulation (avec la touche tabulation) des éléments renseignés dans le formulaire.

Lors du développement de votre site Internet, il est nécessaire de prendre du temps pour optimiser l’accessibilité web. Certaines règles se font rapidement et deviennent automatiques à chaque nouveau site réalisé.

 

Si vous avez aimé cet article, n’hésitez pas à télécharger gratuitement la checklist pour vérifier l’accessibilité de votre site web, en cliquant ci-dessous.

 

check-list-accessibilité-dl

voir tous les articles