L’accessibilité de notre site web

Temps de lecture estimé : 5 minutes.

🤷‍♂️ Le saviez-vous ? En Europe, plus de 100 millions de personnes de tout âge, en situation de handicap sont concernées par l’accessibilité numérique dont 9,6 millions en France.
Source : Rapport mondial sur le handicap de l’OMS, 2010.

Je souhaite une aide à la navigation sur ce site !

Ci-dessous, des éléments pour optimiser votre confort de navigation sur ce site.

Navigation

Le site https://aggelos.fr/ respecte les normes d’accessibilité et vous permet de nombreux ajustements. Vous pouvez par exemple zoomer dans une page sans pour autant perdre en confort de lecture. Utilisez pour cela les options de votre navigateur ou la molette de votre souris en pressant, en même temps, la touche CTRL de votre clavier.

Retour à la page d’accueil du site

Le logo « Ecosphère Aggelos » vous permet, par un simple clic, de retourner sur la page d’accueil.

Taille des textes

La taille de caractère des contenus peut être modifiée dans la plupart des navigateurs. Pour cela, utilisez les commandes suivantes :

• Touche « CTRL » et « molette de la souris »
• Touches « CTRL » et « + » (agrandir la taille du texte) ou « – » (diminuer la taille du texte)
• Menus du navigateur : Affichage > Taille du texte

Navigation par tabulation

On peut naviguer d’un lien à l’autre à l’aide de la touche de « Tabulation » (appuyez sur la touche « Tab » et répétez jusqu’à sélectionner le lien désiré, validez avec la touche « Entrée »).

Navigation par titres

La plupart des technologies d’assistance et des navigateurs facilitent la navigation par les titres. La plupart des lecteurs d’écran fournissent une fonctionnalité pour sauter au titre suivant, par exemple :

• La touche « H » mène au titre suivant
• La touche « 1 » mène au prochain titre de niveau 1
• La touche « 2 » mène au prochain titre de niveau 2

La combinaison des touches « Insert » + « F6 » fournit une liste des titres, qui peut être triée par ordre de tabulation ou par ordre alphabétique

Compatibilité avec les navigateurs

Ce site suit les préconisations faites par le W3C et est compatible HTML 5 et CSS3.

Il est donc accessible via de nombreux navigateurs :

• sous Windows : Firefox, Opera, Edge, Chrome
• sous Mac OS X : Firefox, Opera, Safari, Chrome
• sous GNU/Linux : Firefox, Opera, Chromium

Compatibilité avec les différents types d’écran

Le site tout entier a été conçu en responsive design et s’adapte à tous les types d’écrans : smartphone, tablette et ordinateur.

Couleurs et images

Le site propose des contrastes de couleurs suffisamment importants pour une lecture aisée ainsi que des textes alternatifs aux images et aux animations présentes.

Module « Accessibilité »

Le site propose un outil d’optimisation de votre confort visuel nommé « OptimAccess ».
En cliquant sur le pictogramme d’accessibilité présent sur chaque page du site, vous pourrez :

• Modifier les contrastes : pour modifier les couleurs de fond et contenu.
• Modifier la taille des textes : pour agrandir ou rétrécir les textes
• Modifier la police d’affichage : pour utiliser sur tout le site une police optimisée pour la lisibilité.

Qu’est-ce que l’accessibilité sur un site web ?

L’accessibilité d’un site web vise à penser au plus de contexte utilisateurs possible et proposer un site optimisé pour les personnes ayant besoin d’un confort de lecture différent.

L’accessibilité implique une réflexion sur toutes les étapes de la création du site web pour proposer un contenu, un agencement optimal et des options pour personnaliser la navigation selon l’internaute. 

Les 4 grands principes de l’accessibilité numérique pour un site : 

1. Perceptible : l’accès à chaque information pour tout utilisateur. Il s’agit notamment ici de proposer du contenu de remplacement pour les médias, vidéos, audio et de permettre de personnaliser l’affichage d’une page.
2. Utilisable : la navigation au clavier doit-être possible, la lecture fluide, ne pas desservir de contenu susceptible de susciter des crises et permettre à l’internaute de facilement se repérer sur le site.
3. Compréhensible : rendre le contenu lisible et compréhensible, offrir une navigation prévisible et homogène et aider l’internaute à corriger ses erreurs de saisies.
4. Robuste : assurer une compatibilité avec les agents utilisateurs (dont les navigateurs) actuels/futurs et notamment les technologies d’assistance (dont lecteur audio) 

Source : Rapport du conseil national sur l’accessibilité numérique

Pourquoi cette démarche d’accessibilité ?

Voici une vidéo qui, selon nous, représente tout l’enjeu de l’inclusion numérique et de l’accessibilité des sites web.

Retranscription de la vidéo synthétique intitulée « CAPTCHA : le retour au moyen âge » : un homme malvoyant est dans l’impossibilité de renseigner des éléments visuels d’une scène. La vidéo dresse le constat que certaines étapes de validation, sont, à ce jour, inaccessibles à certains contextes utilisateurs.

Et concrètement, pourquoi nous inscrire dans cette démarche d’accessibilité ? 

• Parce que l’inclusion fait partie des valeurs phares de l’Écosphère Aggelos
• Parce que ça tient à coeur à notre équipe web d’échanger, d’apprendre et se perfectionner sur ce sujet majeur
• Pour être cohérent avec notre démarche de responsabilité numérique des entreprises
• Pour proposer un site ouvert au plus grand nombre et lutter contre l’exclusion numérique
• Parce que nous sommes conscients que les contextes utilisateurs sont différents d’un internaute à l’autre
• Pour une centaine de raisons supplémentaires environ…

Comment avons-nous optimisé l’accessibilité sur ce site ?

Nous avons réalisé ce site en intégrant le plus de bonnes pratiques d’accessibilité possible.

Webdesign

Quelques bonnes pratiques prisent en compte lors du webdesign : 

• Optimisation des contrastes
• La taille des éléments cliquables est suffisante.
• Effet de survol pour facilité la compréhension des éléments cliquables
• Espacement entre les zones pour fluidifier la lecture et faciliter le clic
• Utilisation d’une police simple, sans artifice

Développement et intégration

Nous avons veillé à écrire un code et intégré le contenu respectueux des standards d’accessibilité, par exemple :

• Ajout de balises d’attributs pour donner des instructions aux assistants vocaux
• Intégration des balises alternatives sur les visuels
• Les informations contextuelles se rapportant à un champ de formulaire lui sont visuellement rattachées.
• En cas de rejet des données saisies dans un formulaire, les champs contenant les données rejetées sont indiqués à l’utilisateur.
• Le titre de chaque page permet d’identifier son contenu.
• Chaque lien est doté d’un intitulé dans le code source.

Le module WordPress “OptimAccess” développé par Aggelos

Notre DevLab de recherche et développement s’est penché sur les solutions existantes en ligne. Notre constat sur les solutions existantes : parfois payantes, souvent trop complexes à utiliser et administrer, régulièrement non-personnalisables…

Nous avons donc décidé de développer notre outil avec 4 objectifs principaux :

1. La simplicité d’usage pour les internautes 
2. Une solution facile à implémenter et personnaliser pour les éditeurs de site.
3. Développer un module léger, pour conserver notre démarche d’écoconception.
4. Le rendre disponible à tous gratuitement sur le WordPress Repository.

Le résultat :
Un outil permettant d’optimiser le confort de lecture pour tous et simple à utiliser.

Il propose à l’internaute 3 fonctions pour améliorer son confort de lecture : 

• Modifier les contrastes : pour modifier les couleurs de fond et contenu.
• Modifier la taille des textes : pour agrandir ou rétrécir les textes
• Modifier la police d’affichage : pour utiliser sur tout le site une police optimisée pour la lisibilité.

Remarque : il est important de distinguer un site accessible d’un module qui vise à optimiser le confort de navigation. Pour qu’un site soit totalement accessible, cela implique que le développement soit optimisé en amont.

Quelles sont les référentiels d’accessibilité ?

Il existe de plus en plus d’initiatives et de collectifs qui œuvrent pour un web plus accessible.

Nous avons sélectionné 3 référentiels reconnus comme références par les experts de l’accessibilité :

• RGAA : référentiel général d’amélioration de l’accessibilité porté par la direction interministérielle du numérique (DINUM). Il compte à ce stade 106 critères.
• WCAG : les Web Content Accessibility Guidelines (WCAG) sont des standards international porté par la Web Accessibility Initiative / la W3C.
• OPQUAST : référentiel qui a pour objectif d’agir pour permettre au plus grand nombre d’accéder aux services web. Ancelio Massing (développeur) et Jérémy Dimino (chef de projet web) de l’équipe web ont obtenu cette certification avec un score “Avancé”.

Vous souhaitez obtenir des suggestions d’optimisations d’accessibilité de votre site ?
Nous vous suggérons de renseigner votre site sur ACHECKER, outil de vérification de l’accessibilité de votre site (gratuit et Open Source).

En savoir plus sur l’accessibilité numérique :

• Mieux comprendre les niveaux d’accessibilité d’un site
• Les mythes sur l’accessibilité et le handicap
• Outil d’accessibilité développé par Facili’Ti (entreprise B Corp)
• Vidéo d’une personne qui navigue un site avec un lecteur vocal
• Constrastchecker : outil en ligne permettant de vérifier le niveau de contraste entre 2 couleurs

Des difficultés de navigation sur notre site ?
Merci de nous le signaler sur notre page de contact, nous ferons tout pour l’optimiser !