L’accessibilité dans le web

Published in

Slickteam

7 min readFeb 5, 2018

Pourquoi ?

L’accessibilité d’un site Web est une notion que peu de personnes prennent réellement en compte lors de leurs développements. Celle-ci devient pourtant importante dès lors que le site est destiné à toutes sortes de publics.
En effet, rendre un site “accessible” c’est le rendre “e-accessible” pour être plus précis, c’est-à-dire le rendre lisible pour les personnes ayant des déficiences physiques ou mentales..

Comment ?

Pour rendre un site e-accessible, il y a des règles à suivre qui sont définies dans des normes.
En France, le référentiel début 2018 est le RGAA 3.0 2017. À savoir que ce référentiel applique 3 niveaux de conformité des WCAG 2 : simple A (A), double A (AA) et triple A (AAA).

En suivant ce référentiel opérationnel, votre site pourra notamment :

Être lisible par ce que l’on appelle des “lecteurs d’écran” tels que NVDA pour Windows ou VoiceOver pour les appareils Apple (natif) par exemple ;
Permettre aux personnes ayant une déficience visuelle faible à modérée de pouvoir adapter le site à leur vue ;
Être utilisable uniquement au clavier ;

Quelques bonnes pratiques basiques

Voyons une liste non-exhaustive de quelques bonnes pratiques faciles, et moins faciles, à mettre en place sur votre site..

Les bons réflexes HTML & CSS

Les balises structurantes : Le début de la mise en place passe par de bonnes pratiques HTML de base, à commencer par l’utilisation des balises structurantes (main, nav, footer, etc..). C’est-à-dire que votre site doit se composer de la manière suivante :

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    ...
  </head>
  <body>
    <header>
      ...
    </header>
    <main>
      ...
    </main>
    <footer>
      ...
    </footer>
  </body>
</html>

La base de l’accessibilité débute donc par la bonne utilisation des langages et de leurs normes avant tout. En effet, le fait d’implémenter correctement les balises HTML structurantes permet à une personne aveugle par exemple de pouvoir naviguer d’une zone du site à une autre beaucoup plus rapidement.

D’autres bons réflexes HTML concernent les titres des liens (balise title=”…”) et les alternatives des images (balise alt=”…”).

Les liens :
L’intitulé d’un lien n’est pas obligatoire, il peut-être omis lorsque le texte du lien est assez clair pour comprendre le rôle de celui-ci. En revanche, il est utile sur certains liens, mais doit apporter une information claire quant à la destination du lien. Cela est valable dans 2 cas particulièrement :

Le lien que vous présentez s’ouvre donc dans un(e) nouvel(le) fenêtre/onglet. Dans ce cas, il faut que ce comportement soit précisé, l’utilisateur ne doit pas être surpris par les actions qu’il enclenche.
Exemple :

<a href="..." target="_blank" title="Intitulé du lien – Nouvelle fenêtre">Lien</a>

Vous permettez à l’utilisateur de télécharger un document sur votre site. Dans ce cas, l’utilisateur doit avoir pour indications dans le titre du lien, le type de fichier téléchargé (son extension), ainsi que son poids. L’utilisateur doit être averti que le lien sur lequel il va cliquer va lancer un téléchargement.
Exemple :

<a href="path/to/file.pdf" download="nom_pdf_telecharge" title="Nom du fichier – PDF – 600ko">Téléchargez ce fichier</a>

Les images :
La balise de texte alternatif d’une image est obligatoire, la nuance est qu’elle peut être vide. Lorsqu’une image est purement décorative et n’ajoute aucune information supplémentaire pour la compréhension de la page, sa balise alternative n’a pas l’obligation d’être remplie, elle peut être laissée vide. Concrètement, si vous avez une petite image mise devant chaque gros titre de vos pages dans un but purement esthétique, la balise alt de cette image n’a pas à être renseignée, puisqu’elle n’apporte aucune information. Il est donc inutile que les lecteurs d’écran retranscrivent une balise alternative pour celles-ci, ce qui ne fait qu’alourdir la retranscription. Exemple :

<div>
  <img src="path/to/image.png" alt="">
  <h1>Titre de la page</h1>
</div>

L’ordre des balises :
Les lecteurs d’écran parcourent le site dans l’ordre du code HTML. C’est pourquoi il faut y prêter une attention particulière. Dans le cas où vous avez une charte graphique comportant des compositions du type “Image à gauche + Titre & description à droite”, il faudra s’arranger pour que les contenus textuels, porteurs de réelles informations pour l’utilisateur, se situent en premier dans le code. L’ordre d’affichage se fera ensuite en CSS grâce aux propriétés flex et order par exemple.

Les spécificités CSS :
Dès le début du développement du site, il faut également prendre en compte la propreté du CSS mis en place.
Il y a un test simple pour vérifier si votre site est utilisable par des personnes ayant des déficiences visuelles faibles :

Appuyer sur la touche Alt dans Firefox > Dans le menu qui apparaît aller dans Affichage > Zoom > Zoom texte seulement

Une fois que cette option est cochée, il vous suffit d’appuyer sur “Ctrl +” 6 fois (jusqu’à 200%). Lorsque vous êtes dans cette configuration d’affichage, la page doit toujours être lisible. Les étapes intermédiaires (entre 100% et 200% exclus) ne sont pas primordiales, c’est ce “stade” des 200% qui l’est le plus (pour revenir à l’affichage de base, il suffit de faire “Ctrl 0”).

Pour que cela soit possible, il faut au maximum éviter les unités de mesures en px, que ce soit sur les propriétés font-size, height ou width notamment.. Il faudra donc plutôt privilégier les unités relatives comme les em ou les %.

Un autre aspect à prendre en compte dès la conception de la charte graphique du site est tout ce qui est lié à la couleur. En effet, il faut que le contraste des couleurs soit clairement visible et facile à distinguer, ce qui est rarement le cas par exemple dans le cas de textes superposés à des images.
Certains sites qui préfèrent garder leur charte graphique originale proposent en compensation un “Mode Accessibilité” qui permet d’intensifier les contrastes du site. C’est le cas du site AccorHotels qui offre le choix des contrastes, en plus d’autres fonctionnalités.
Certes, on remarque que le rendu est moins esthétique avec des contrastes renforcés, mais il ne faut pas oublier que le but ici est de rendre le site accessible, ce qui est bien plus important.

Dans la même pensée, il faut éviter de donner des informations uniquement par la couleur. Un exemple simple et présent sur beaucoup de sites : une pagination. Pour les personnes souffrant de daltonisme, entre autres, il leur sera parfois impossible de distinguer quelle est la page active puisque celle-ci n’est indiquée que par un changement de couleur. Pour palier à ce problème, il faut ajouter une autre spécificité à ce lien de page comme un soulignement, une taille différente ou encore un pictogramme.. Cette information de “page active” peut également être indiquée dans le title du lien concerné, comme vu précédemment. Ce n’est pas un coût énorme dans le développement en terme de temps, mais c’est déjà un grand pas vers l’accessibilité.

La spécification ARIA

ARIA (Accessible Rich Internet Applications) est une spécification technique du W3C qui permet d’améliorer l’accessibilité de contenus dynamiques des pages Web, notamment gérés par Javascript.
La spécification ARIA se met en place sous forme d’attributs à ajouter dans votre code (X)HTML, elle est très complète et indispensable pour avoir un site accessible. Quelques exemples concrets :

Affichage/masquage de zone : Lorsque sur certaines de vos pages vous avez un système d’affichage/masquage de zone (typiquement un menu déroulant où vous devez cliquer sur l’élément parent pour afficher les éléments enfants), l’élément sur lequel vous cliquez doit être un bouton et non un lien. En effet, un lien est fait pour “rediriger vers une autre page ou une autre section de la page”, ce qui n’est pas le cas ici.
Ce bouton doit ensuite avoir certains attributs ARIA afin de donner des indications aux lecteurs d’écrans comme : quelle est la zone cible ? cette zone cible est-elle déjà déroulée ou non (une personne aveugle ne peut pas le savoir si on ne l’indique pas clairement dans le code) ?
Pour palier à ces problèmes, voici comment procéder grâce à ARIA :
L’attribut aria-expanded indique l’état de la zone cible (“true” si elle est dépliée, sinon “false”) et aria-controls prend pour valeur l’identifiant unique de la zone que ce bouton contrôle. À noter que les deux zones doivent être adjacentes dans le code, dans le même ordre que ci-dessous. De plus, si pour une raison ou une autre l’élément déclencheur ne peut pas être un bouton, il peut être d’un autre type à condition qu’il implémente l’attribut role=”button”. Voici un exemple :

<button aria-expanded="false" aria-controls="zone-cible">Zone cliquable</button><div id="zone-cible">
  ...
</div>

Landmarks ARIA : En complément des balises structurantes vues précédemment, des “rôles ARIA” existent afin de renforcer la structuration des pages. Les landmarks se présentent sous la forme de simples attributs “rôles” à ajouter sur les balises concernées, comme suit, par exemple :

- <nav role="navigation>...</nav>
- <header role="banner">...</header>
- <main role="main">...</main>
- <footer role="contentinfo"></footer>

Ceci est donné à titre d’exemple et peut varier selon les sites.

Conclusion

Avoir un site “e-accessible” permet aux personnes atteintes de handicap de pouvoir naviguer sur ce site sans aucune difficulté particulière. Cela se traduit donc par un site utilisable par un public plus large et non négligeable.
Pour rendre cela possible, il y a beaucoup de bonnes pratiques à connaître dont une liste non-exhaustive a été donnée dans cet article. Si le sujet vous intéresse davantage, vous pouvez consulter le site du gouvernement. Vous pourrez y trouver tous les critères pour avoir un site 100% accessible !
L’accessibilité d’un site web peut devenir une tâche très coûteuse et chronophage si elle n’est pas prise en compte dès le début du développement.
En revanche, si ces bonnes pratiques sont mises en œuvre dès le départ, cela ne constitue pas de difficulté particulière (ce n’est que du simple code HTML/CSS pour la plupart..) et peut être fait au fil de l’eau sans y passer trop de temps.