C’est Mélina, co-fondatrice de l’association, qui s’est occupée du développement du site sur lequel vous naviguez en ce moment. Nous voulions dès le départ créer un site en accord avec notre projet éducatif : cela impliquait notamment de mettre en place le site web le plus accessible et inclusif possible.

Cette démarche nous a amenés à prendre en compte de nombreux aspects et à prendre des décisions concrètes.

Nous serions ravis de récolter vos retours et vos suggestions pour aller encore plus loin dans cette démarche. N’hésitez donc pas à nous contacter pour nous proposer vos suggestions.

Les WCAG : Web Content Accessibility Guidelines

Développées par l’association à but non lucratif W3C, les Règles pour l’accessibilité des contenus Web (WCAG) 2.0 “définissent la façon de rendre les contenus Web plus accessibles aux personnes en situation de handicap. L’accessibilité couvre un large spectre de limitations fonctionnelles, telles que les limitations visuelles, auditives, physiques, cognitives, neurologiques ou encore, celles liées à la parole, au langage ou à l’apprentissage. Bien que ces règles couvrent un éventail varié de problématiques, elles ne peuvent prétendre répondre aux besoins des personnes avec tous les types, les degrés ou les combinaisons possibles de limitations fonctionnelles. Ces règles rendent également les contenus Web plus utilisables par les individus dont les capacités changent en raison du vieillissement et améliorent souvent l’utilisabilité pour l’ensemble des utilisateurs.”

Elles se décomposent en quatre grands principes :

• Perceptible
• Utilisable
• Compréhensible
• Robuste

Ces principes sont ensuite déclinés en 12 règles, elles-mêmes étant validées à l’aide de “critères de succès”. Il est évident que tout site web, même répondant à tous ces critères, ne pourra pas couvrir toutes les situations existantes, il s’agit donc de proposer un site web le plus accessible possible.

Nous voulions que notre site remplisse l’intégralité des critères et règles WCAG, et c’est chose faite.

Charte graphique et logo : une affaire de contraste…

Pour composer notre logo, nous avons reçu l’aide de Louise Jeanne et Tom Sagit. Mais le travail est loin d’être facile !

Le choix des couleurs dans un site web est primordial pour le rendre accessible , certains contrastes ne pouvant être pris en compte par des personnes malvoyantes ou daltoniennes. Les normes et recommandations en ce sens s’appliquent uniquement aux textes et boutons, mais nous avons décidé d’un commun accord que notre logo devait être aussi lisible que le reste du site, dans le prolongement de nos valeurs.

Dans notre cas, tous les textes (y compris les textes larges et les logos) respectent un contraste de 4.5:1 entre deux couleurs, soit la recommandation la plus stricte en ce sens. Pour les images, notre contraste minimum est de 3.75, soit plus que la norme imposée pour les textes de grande taille par la règlementation WCAG (à l’exception d’un élément que nous détaillons par la suite).

Nous avons parfois du faire le choix de rajouter un encart sombre autour de certaines zones de textes, renonçant ainsi à l’aspect esthétique pour privilégier l’inclusion.

Quelques exemples de contrastes :

• 

• 

• 

Pour la version initiale du logo, nous avions opté pour un contour de feuille dans un autre ton de vert. Changer ce contour nous a permis de renforcer le contraste entre les différentes couleurs : le contraste entre la feuille et son contour est de 3.75:1 et et celui entre le contour est le soleil est de 7.13:1. Seul le sourire comporte un ratio de contraste faible (1.26:1) mais reste tout de même compatible avec la norme d’exigence maximum.

Les textes affichés sur fond vert sont affichés soit en jaune, soit en blanc, soit un contraste minimum supérieur à 7.1. Inversement, sur fond blanc, nos textes sont affichés soit en gris (5.74), soit en noir (21) soit en vert très foncé (8.95). Aucune décoration ou image d’arrière-plan ne vient “polluer” ce contraste. Nos boutons sont en noir sur fond jaune – un ratio supérieur à 16 ! – et nous avons fait le choix d’ajouter un liseré noir autour de tous nos boutons, pour rendre ceux-ci distinguables même sur fond blanc. Le résultat final est accessible aux personnes malvoyantes ou daltonniennes.

Images, Champs, Captcha : de l’utilité des textes alternatifs

Nous avons fait attention à ce que tout contenu non textuel sur notre site ne soit là qu’à des fins décoratives – aucune information n’est présenté dans ces contenus. Pour autant, chaque image ou décoration est présentée avec un texte alternatif décrivant son contenu. Le texte alternatif s’affiche par défaut en remplacement de l’image lorsque celle-ci ne peut être affichée sur une page web.

Nous avons fait le choix de ne pas utiliser de captcha car la majorité des outils gratuits ne proposent pas d’alternatives inclusives aux caractères dans une image, et ne peuvent donc pas être utilisés par de nombreuses personnes.

Nous avons également exclu tout contenu vidéo ou audio, ceux-ci amenant des problématiques plus poussées pour toutes les personnes ne pouvant pas consulter ces contenus : nous préférons une information accessible pour toustes qu’une information présentée de façon dynamique. Nous évitons également tout contenu “animé” pouvant augmenter les temps de chargement de la page, le besoin de scroller ou dont le nombre d’image par seconde pourrait déclencher des troubles – en accord avec les recommandations WCAG.

A partir de ces mêmes recommandations, nous avons fait attention à ne pas inclure de texte dans notre image de logo, mais à mettre le nom de l’association comme le slogan à coté du contenu image : ces textes sont ainsi lisibles par des outils de lecture automatique, et peuvent être sélectionnés ou copiés. Préférer le contenu texte au contenu image permet également un zoom important sur celui-ci – la recommandation minimale étant de 200%.

Savoir où cliquer et pourquoi : souligner pour mieux guider !

Les liens sont identifiables à l’aide d’effets de style : changement de couleur, ou soulignés. La souris s’adapte également pour montrer quels liens sont cliquables (effets “hover”). Plusieurs menus permettent de naviguer sur le site : un menu principal, mais également un footer. Les éléments ayant un style semblable d’une page à l’autre ont un objectif commun.

La navigation sur notre site peut se faire à l’aide du clavier uniquement, pour les personnes ne pouvant utiliser un pad ou une souris.

La mise en page du site est faite de manière à être lue sur différents écrans, qu’il s’agisse d’un ordinateur, mais également d’une tablette ou d’un mobile. L’affichage s’adapte de manière à permettre à chacun de consulter celui-ci en utilisant l’interface avec laquelle il est le plus à l’aise. Nous avons également fait attention à ce que la navigation sur mobile n’impose pas de “renverser” l’écran, ce mouvement étant inaccessible pour certains.

Ecrire pour toustes : comment ?

Utiliser du contenu texte permet que celui-ci soit zoomé jusqu’à et au delà des 200% proposés par les recommendations. La non-utilisation de vidéos ou de textes au format image permet également que celui-ci soit accessible à tous. Muzett a ainsi vérifié que l’intégralité des textes présents sur le site réponde à cette exigence.

Le site peut également être intégralement lu, et de façon cohérente, par les différents outils lecture : pas de liste de navigation interminable et difficile à appréhender pour les personnes utilisant un lecteur vocal, ni d’incohérence dans la structure (niveau du titre, définition de ce qui est un paragraphe, une emphase, etc…) qui feraient croire à une erreur.

Les paragraphes sont systématiquement alignés à gauche, facilitant la perception des retours à la ligne et la structure globale.

Un point plus complexe fut le choix du français : nous avions envie d’utiliser l’écriture inclusive avec point médian, car celle-ci permet de visibiliser tous les genres et pas uniquement le genre masculin, dans le prolongement de notre réflexion pédagogique.

Cependant, le vocabulaire de l’inclusif – notamment les pronoms neutres – peuvent être inconnus pour beaucoup. “Toustes” étant l’essence même de notre marque, nous avons fait le choix de le garder dans notre slogan, et dans le titre correspondant. Le “chacun·e” est son répondant. Nous avons essayé de privilégier des tournures de phrases non genrées, pour limiter l’utilisation de ce vocabulaire spécifique, mais ils reste tout de même présent sur le contenu du site. Nous savons également que de nombreux outils de lecture ne comprennent pas les points médians.

Nous avons donc dupliqué le site dans une version sans point médian ni pronom neutre, et un bouton en bas de page permet de basculer vers cette version, plus accessible pour beaucoup. Nous cherchons actuellement une solution technique pour que ce bouton soit affiché plus haut sur la page, en attendant, nous avons éliminé ceux-ci de notre page d’accueil – à l’exception du “toustes” et du “chacun·e”, éléments de marque expliqués plus tôt. Les lecteurs fonctionnent donc sur la page principale le temps d’accéder au bouton permettant le changement.

Nous avons également pris soin de systématiquement expliquer les abréviations qui peuvent ne pas être comprises par tout le monde. Nous travaillons également à mettre en place un glossaire ou un outil pour donner la définition des termes issus du monde de l’animation, de la sociologie ou de l’informatique, qui pourraient nuire à la compréhension des personnes qui nous lisent.

Nous avons fait le choix d’écrire tous nos textes dans la police Luciole, une police spécialement conçue pour les personnes malvoyantes. Pour en savoir plus sur la police Luciole, cliquez ici.

Sources

Vous trouverez ci-dessous nos ressources et boîtes à outils utilisés pour la construction de notre site web :

• WCAG Guidelines 2.0
• Are my colours accessible ? : un site permettant de vérifer le contracte entre les différentes couleurs d’une interface
• Les méthodes et outils de test d’Accessibilité Numérique Orange
• Le compte @Accessi_Net sur Twitter, qui fait de la veille sur la prise en compte des handicaps sur Internet
• L’article “Ecriture inclusive au point médian et accessibilité” de la Lutine du Web, qui propose beaucoup de solutions

Et ensuite ?

Nous sommes conscients que ce travail reste imparfait : l’accessibilité et l’inclusion sont des idéaux vers lesquels tendre, mais il reste toujours des situations que nous n’avons pas anticipées, des tests techniques supplémentaires à mettre en place, etc… Nous souhaitons réellement continuer notre démarche d’amélioration continue et sommes, par conséquent, ravi·es de récolter vos retours et suggestions pour un site internet pour toustes. N’hésitez pas à utiliser le formulaire ci-dessous pour nous faire vos suggestions !

---

Découvrez nos valeurs ->