Création de site Internet à Reims, Epernay, Paris ⭐️

Accessibilité-numérique-site-mairie Solution d'accessibilité numérique pour les sites internet de mairies

Solution d'accessibilité numérique pour les sites internet de mairies

A compter de Janvier 2020, le site web de votre collectivité devra être en conformité avec la directive européenne portant sur l'accessibilité numérique, qui consiste à rendre accessible le site web de la collectivité à tous les internautes, y compris ceux en situation de handicap (notamment les personnes malvoyantes et aveugles ou dans l'impossibilité d'utiliser une souris). Cela va demander certaines adaptations techniques et ergonomiques de notre côté, et organisationnelles du vôtre (intégration des médias avec des légendes, océrisation des documents disponibles en téléchargement, etc.)


Côté Développeur, Qu'implique La Mise En Conformité Avec L'accessibilité Numérique ?

Chaque cas étant unique, nous allons devoir en premier lieu procéder à un audit d'accessibilité afin de déterminer les opérations que nous allons mener sur le site, lorsque cela est possible, pour obtenir un niveau d'accessibilité approprié.

Voici la liste des opérations qui devront être menées à minima pour franchir avec succès les audits d'accessibilité :

Ajustement du code source du template graphique

  • Adaptations aux normes RGAA
  • Intégration d'un module d'agrandissement des polices
  • Intégration d'un sélecteur de contraste
  • Intégration de la navigation au clavier
  • Ajout d'un menu d’accessibilité rapide
  • Intégration de la prise de focus
  • Ajout d'un plan du site
  • Transformation de l'outil de gestion documentaire pour l'intégration des infos doctype

En fonction de « l'âge» de votre site internet et de la validité de son code, ces opérations vont pouvoir être menées plus ou moins rapidement.

Notez enfin que nous vous fournirons par ailleurs des suggestions pour l'intégration des contenus afin de vous inculquer les bonnes pratiques pour garantir l'accessibilité des contenus que vous intégrerez, comme nous l'expliquons en détails dans le chapitre suivant.


Côté mairie, qu'est-ce-que cela va changer au niveau de la gestion quotidienne du site web de la collectivité ?

A propos de la publication des délibérations sur le site web de la collectivité
VEILLER CONSCIENCIEUSEMENT À LA LISIBILITÉ DE VOS DOCUMENTS !


Vos pdf ne doivent en aucun cas être « aplatis » (par exemple les délibération scannées doivent être océsirées avant d'être publiées sur le site web), sous peine de léser les personnes malvoyantes ou aveugles qui ne pourront pas faire déchiffrer ou vocaliser vos documents par leurs outils d'aide à la lecture. Cela peut être considéré comme une discrimination et donc à ce titre constituer une infraction passible de sanctions financières dans le cadre de la directive européenne qui entre en vigueur au 1er Janvier 2020.

 

En ce qui concerne l'intégration de documents en général
Lorsque vous invitez un usager à télécharger un ficher (pdf, doc, zip … ), vous devez l'informer sur la nature de ce fichier (type Mime) ainsi que sa taille finale.

Exemple : cliquez ici pour télécharger le dernier bulletin municipal (PDF – 11,9Mo)

Exemple d'insertion d'un document avec son type mime et son poids

Notre plug-in « ajouter un document » vient d'être mis à jour et permet désormais d'intégrer automatiquement ces informations lors de l'insertion du lien.

 

Description des images
Il est indispensable de renseigner l'attribut « ALT » des images avec une description courte. Cet attribut (alternative textuelle) permet de décrire l'image aux utilisateurs malvoyants ou aveugles qui disposent d'un logiciel d'aide à la lecture. Il faut donc bien entendu que cette alternative textuelle soit pertinente.

Ajout d'un attribut alt dans une image

 

Avertir l'utilisateur de l'ouverture de liens externes
Si vous ajoutez un texte contenant un lien sortant dans votre contenu, vous devrez désormais informer les internautes en complètent l'attribut HTML « Title (titre)»

Informer l'utilisateur sur le type de lien

 

Veiller à respecter la structure standard de vos pages
Des styles préformatés sont accessibles dans l'éditeur de Joomla afin de vous permettre de structurer les titres de vos contenus. Pour cela on utilise des balises HTML nommées "heading" (H1, H2, H3 etc...)

Le titre de l'article (balise html : h1) doit être unique

Les sous-titres doivent respecter un ordre logique (h2 > h3 > h4 … )

Autre exemple ( (h2 → h3 + h3 + (h3 → h4)) / (retour sur h2 → h3))
Cela est primordial aussi bien pour les moteurs de recherche que pour les outils des personnes déficientes visuelles qui vont pouvoir analyser la structure de la page et proposer des raccourcis vers certains paragraphes en naviguant avec le clavier.

Respecter l'ordre et la logique des titre Hn

 

Évitez l'ajout de styles « inline » superflus et "polluants"
Évitez autant que possible de forcer une couleur sur un texte et/ou de modifier sa taille.

Certaines personnes en situation de handicap utilisent des outils d'aide à la lecture, qui facilitent par exemple le amélioration de la taille des polices, ou encore de leur couleur afin d'ajouter du contraste pour un meilleur confort visuel. Si vous forcez les styles de l'un de ces deux éléments, vous pénalisez ces internautes qui ne pourront pas changer la taille ou la couleur des titres avec leur navigateur.

 

Veillez aussi à la vitesse de chargement de vos pages web
L’accessibilité prend aussi en compte la vitesse de chargement des pages afin de garantir l'accès à vos contenus quel que soit l'emplacement des utilisateurs ou de leur moyen d'accéder à internet (ADSL bas-débit, EDGE, 3g, internet par satellite … )

Pour cela, il est capital d'optimiser vos images avant de les charger sur le serveur. Si vous ajoutez à vos contenus des images venant d'un appareil photo récent, celles-ci pourront aisément excéder la dizaine de méga-octets (Mo). Un utilisateur qui voudra charger votre page web depuis un téléphone mobile ou disposant d’une mauvaise connexion devra attendre quelques secondes, voire plus d'une minute avant que votre page web ne soit complètement chargée.


Méthodologie de test

Introduction

Ce document a été établi dans le cadre des ressources venant accompagner la prise en main de la version 4.0 du référentiel général d’amélioration de l’accessibilité (RGAA 4).

À noter qu’une mise à jour prochaine sera publiée pour la version RGAA 4.1.

Il est destiné à toute personne soucieuse de vérifier la conformité d’un contenu web au RGAA 4. Il s’agit d’une méthodologie de tests documentant les étapes permettant de vérifier si un critère du RGAA 4 est conforme ou non. Cette méthodologie est donc à utiliser en complément du référentiel technique du RGAA et ne peut être utilisée seule. Elle ne dispense donc pas d’une lecture approfondie du référentiel technique, ni d’une formation au RGAA.

Pour chacun des tests d’un critère correspond une procédure de test ; la mise en oeuvre de cette procédure peut recourir parfois l’usage d’outils spécifiques, autrement un navigateur suffit pour effectuer la majorité des tests.

Une liste d’outils est aussi proposée pour aider à la réalisation des tests ; ils ont été retenus à la fois parce qu’ils sont fréquemment utilisés par les experts du métier et parce qu’ils facilitent la recherche de certains résultats.

Outils

L’outil le plus utile reste l’inspecteur de code que propose chaque navigateur. Il permet de rechercher facilement les éléments et les attributs requis pour un examen par un test d’accessibilité.

Les aides techniques listées dans l’environnement de test retenu constituent un second ensemble d’outils indispensables (voir la rubrique Environnement de test) ; ils sont, en effet, requis pour s’assurer d’une restitution correcte de contenus accessibles (les alternatives aux images, les intitulés de lien, les titres de tableau, …) dans le cas notamment où l’examen du code seul ne suffirait pas.

D’autres outils sont disponibles pour aider à la recherche des éléments de contenu ; ils se présentent souvent comme des extensions au navigateur et permettent d’explorer un ou plusieurs aspects d’un test d’accessibilité.

Les barres d’outils sont des extensions du navigateur qui vont faciliter le repérage visuel de certains éléments dans un document :

Au-delà de la simple barre d’outil, d’autres outils fournissent une analyse complète du document en signalant visuellement sur la page les erreurs d’accessibilité ou à l’inverse les éléments qui lui sont bénéfiques ; des filtres permettent alors souvent de n’afficher que certains de ces aspects. C’est ce que propose Wave, une solution disponible à la fois en ligne (http://wave.webaim.org) et comme extension de navigateur (https://wave.webaim.org/extension/).

La validation du code source d’un document HTML utilise le validateur en ligne du W3C (https://validator.w3.org/) ; À noter que pour valider le code source généré par le navigateur, il faut utiliser l’option “Validate by Direct Input” en y copiant la source HTML proposée par l’inspecteur de code du navigateur. Des extensions de navigateur sont aussi disponibles, mais il faut être vigilant, car les algorithmes de validation de ces extensions ne sont pas forcément à jour par rapport au validateur du W3C et les résultats obtenus peuvent donc être différents.

La vérification des contrastes de couleurs bénéficie de différents outils :

La vérification de l’arborescence du document et de la hiérarchie des titres dispose d’une extension très utile :

L’analyse des fichiers bureautiques peut être réalisée au moyen de différents outils en fonction du format du fichier :

Enfin, un logiciel ancien mais toujours utile pour évaluer la potentialité de certains contenus web à causer des crises d’épilepsie : PEAT (Photosensitive Epilepsy Analysis Tool) pour Windows (https://trace.umd.edu/peat).