1.4.1. Qu’est-ce que l’accessibilité ?#

Les règles d’accessibilité reprennent les conditions pour qu’un produit ou un service soit utilisable par le plus grand nombre. L’accessibilité dépend autant du contenu (actus, documents, …) que de la technologie de mise à disposition du contenu (CMS).
Il n’est pas rare d’associer accessibilité et déficiences visuelles, mais le rédacteur de contenu doit étendre son attention à un panel plus large d’utilisateurs.
Voici quelques critères à prendre en compte :
  • déficiences visuelles, auditives et motrices ;

  • déficiences intellectuelles ;

  • troubles de l’attention ;

  • troubles de la lecture ;

  • mobilité (utilisation d’un smartphone) ;

  • niveau d’éducation et aisance dans la langue (personnes jeunes ou moins lettrées).

Les Pouvoirs locaux sont investis d’une mission de service public et se doivent de rendre leur site internet accessible. Ce devoir est assorti d’une obligation légale depuis la Directive (UE) 2016/2102 (site internet) et sa transposition wallonne. L’obligation légale s’étend aux e-guichets.

1.4.2. Règles d’écriture#

Niveaux de titres dans un texte#

Au sein d’une page web, les niveaux de titres sont utilisés par les technologies assistives pour établir un aperçu du contenu. L’emploi non sémantique des balises de titrage perturbera donc la navigation des visiteurs malvoyants.
<h1> Service population </h1>
        <h2> Missions </h2>
        <h2> Démarches </h2>
               <h3> Cartes d’identité </h3>
               <h3> Passeport </h3>
        <h2> Membres du service </h2>
Les titres sont disponibles dans le menu Format de l’éditeur de Smartweb.

image001

Le titre principal d’un contenu (actu, document, dossier, démarche,…) est toujours de niveau 1.

image002

Le premier titre du champ Texte sera donc de niveau 2. Tout sous-élément d’un titre de niveau 2 deviendra un titre de niveau 3 et ainsi de suite.
Il est important de considérer le menu Format pour son aspect fonctionnel. La détermination du niveau de titre ne peut se faire selon un critère esthétique tel que agrandir ou diminuer une taille de texte.
De la même manière, la graisse d’un texte (bold) met l’emphase sur une partie du contenu. La graisse ne transforme nullement une ligne de texte en titre et ne peut se substituer à l’usage du menu Format. Les titres se détachent par essence du corps de texte, il ne faut donc pas les graisser.
Pour tout problème lié à l’apparence du contenu (taille, police, couleur des titres, etc.), veuillez contacter l’équipe Smartweb via Support iMio.

Énumérations#

Les énumérations figureront de préférence dans des listes à puces.

image003

Les procédures chronologiques seront quant à elles inscrites dans des listes ordonnées.

Liens accessibles#

  • Lien explicite

Tout lien doit décrire sa destination de manière explicite et rester compréhensible hors de son contexte.
Lien non explicite, à bannir :
Pour télécharger le formulaire cliquez ici.
Lien explicite, à favoriser :
Inscription “Je cours pour ma forme” 2020 (pdf, 0.8mb)
  • Signifier un changement de comportement

Changer de contexte implique souvent un nouveau mode de navigation pour l’utilisateur. Si un lien renvoie vers un site tiers ou un fichier à télécharger, il devient dès lors important de le préciser entre parenthèses.
MyMinfin (site internet, nouvelle fenêtre)

Bulletin communal - mai 2020 (pdf, 2.1 mb)

Dans le cas des fichiers, spécifier le poids du téléchargement peut orienter le choix de l’utilisateur mobile ou disposant d’un faible débit internet.
  • Lien sur image

Si une image est englobée dans un lien, le texte alternatif de l’image devrait décrire la destination du lien et non l’image. L’image d’un lien ne devrait donc comporter qu’une dimension illustrative.

image004

image005

Sauts de ligne#

Pour créer un saut de ligne dans l’éditeur de Smartweb, il convient d’entrer au clavier “SHIFT + ENTER“.

Attention

Taper “ENTER” à répétition génère des paragraphes vides et, par conséquent, non sémantiques.

1.4.3. Media#

Albums photos#

Chaque image téléversée comportera un titre. Ce titre apparaîtra comme description de l’image et décrira donc la personne, l’objet ou le lieu mis en avant.
Dans l’exemple suivant, le titre adapté est Sentier du Corainon.

image006

image007

Agenda#

Les événements s’accompagnent souvent d’une affiche. Or, les informations contenues sur une image ne peuvent être appréhendées par les technologies assistives.
La bonne pratique consiste donc à proposer une description textuelle complète de l’événement.

image008

Cette description se place dans le champ Texte de l’événement.

image009

Slider À la une#

Identiquement au banner, le texte sur les images du carrousel ou slider n’est pas interprété par les lecteurs d’écran.
L’exemple suivant est une meilleure pratique.

Vidéo#

La vidéo est un support de communication qui doit être également rendu accessible à tous.

Pour ce faire, il est nécessaire de proposer une description détaillée du média proposé par l’intermédiaire du champ Detailed description.

image012

Dans l’exemple suivant, la description résume le contenu de la vidéo.

image013

1.4.4. Formats de fichiers#

Fichiers PDF#

Le format PDF est nettement moins accessible que l’HTML. Par conséquent, la page web constitue un meilleur véhicule pour l’information que le fichier PDF.
L’argument se vaut également du point de vue ergonomique dans le cas des formulaires. Il est en effet nettement plus aisé de remplir un formulaire en ligne que d’imprimer un formulaire papier qu’il faudra ensuite scanner.
Si un fichier PDF s’avère malgré tout nécessaire, il sera alors primordial que le document soit interrogeable.

1.4.5. Déclaration d’accessibilité#

La Directive (UE) 2016/2102 (site internet) impose l’établissement d’une déclaration d’accessibilité sur les sites internet et les applications mobiles du secteur public. Nous vous recommandons l'assistant au remplissage de la déclaration sur l'accessibilité du BOSA (site internet, BOSA) pour vous assister.

Exemple de déclaration d'accessibilité

La déclaration d’accessibilité peut être introduite sur votre site web grâce au module Anysurfer disponible depuis le panneau de configuration.

Préparation de la déclaration#

Dans cette section, nous vous conseillons de mentionner : - une analyse technique du CMS Plone par iMio ; - une évaluation des fonctionnalités du CMS Plone par Anysurfer ; - une optimisation du CMS Plone par iMio.

A ces mentions, vous pouvez ajouter toute initiative propre pour évaluer l’accessibilité de votre site internet.

Exceptions#

Au minimum, l’exception suivante devrait être mentionnée sur votre site internet :

1.4.5 Texte sous forme d’image : Ce site est susceptible de présenter des logotypes dont le texte ne serait pas accessible.

D’autres exceptions peuvent s’ajouter selon la qualité d’édition de votre contenu.

Exemptions#

A moins d’avoir entrepris un travail spécifique pour éliminer les PDF moins accessibles, nous vous conseillons de mentionner une exemption à cet égard pour cause de difficulté disproportionnée.

Feedback#

Dans la section Feedback de votre déclaration, vous pouvez renseigner le courriel général de l’administration communale ou renvoyer vers le formulaire de contact du site internet. Une procédure de maintien devra par ailleurs être décrite en cas de manquement dans le respect des dispositions légales.

1.4.6. FAQ accessibilité#

Pouvez-vous confirmer que mon site est conforme à la norme WCAG 2.1 AA ?#

iMio a rendu Smartweb v4 techniquement conforme à la norme WCAG 2.1 AA grâce à l’accompagnement de l’asbl Anysurfer. L’accessibilité étant une démarche continue, notre équipe accueille cependant toute suggestion d’amélioration en la matière.

L’accessibilité d’un site comprend par ailleurs d’autres aspects que le code : le graphisme et le contenu sont également concernés. En matière de graphisme, notre équipe a entrepris divers efforts pour améliorer les contrastes sur les sites en Plone 4 (Smartweb v4).

En matière de contenu, la responsabilité relève des pouvoirs locaux exclusivement. En soutien, l’équipe web tente de sensibiliser les agents lors des formations à l’outil Smartweb. Cette démarche pédagogique a de plus été renforcée par la création du présent chapitre de notre documentation. iMio n’a cependant ni la prétention ni la vocation de se substituer à des experts en accessibilité.

Pour la validation de contenus existants et pour toute formation à la rédaction de contenu accessible, nous invitons nos membres à s’adresser à un organisme de formation et d’audit en la matière.

Comment s’assurer que notre site est dans la version Plone 4 / Smartweb v4 ?#

Un site internet en Plone 4 peut être identifié à la présence des entrées Je suis et Je trouve dans le menu principal ou dans le menu des actions (qui comporte le lien de connexion). Alternativement, un administrateur pourra se rendre dans le panneau de configuration du site (via le lien Configuration du site du menu des actions) et vérifier la version exacte du logiciel en bas de la page principale.

Comment avez-vous rendu Smartweb techniquement conforme à la norme WCAG 2.1 AA ?#

Smartweb se repose sur le CMS Plone, engagé de longue date dans le respect des standards en matière d’accessibilité. A la suite d’une analyse en interne, une série d’améliorations potentielles ont cependant été détectées. Cette analyse initiale a ensuite été enrichie d’une évaluation d’Anysurfer.

Divers points de Smartweb ont donc été améliorés. En voici la liste non exhaustive :
  • accessibilité de la navigation au clavier et pour les lecteurs d’écran ;

  • accessibilité des vues par facettes (annuaire, agenda,…) ;

  • accessibilité des images ;

  • titrage des pages ;

  • animation des carrousels ;

  • visibilité des liens ;

  • visibilité du focus ;

  • navigation sur smartphone (principalement via le thème NewDream) ;

  • contenu alternatif aux vidéos ;

  • niveaux de contraste ;

Comment rédiger la déclaration d’accessibilité de notre site internet ?#

La déclaration d'accessibilité

Peut-on contrôler automatiquement l’accessibilité du contenu ?#

L’accessibilité du contenu peut difficilement être contrôlée automatiquement car les règles en la matière se révèlent souvent subtiles.

Un exemple de règle serait l’application d’un texte alternatif aux images. Sur ce point, un dispositif informatique pourrait inspecter un site dans son intégralité et relever les images dépourvues d’alternative textuelle. Néanmoins, appliquer une alternative à des images illustratives n’est non seulement pas requis mais dégrade en outre l’accessibilité en rendant les lecteurs d’écran loquaces à l’excès. La distinction entre une image illustrative et une image significative demande aujourd’hui l’évaluation d’une intelligence humaine.

En conclusion, seuls une formation appropriée et un contrôle strict de l’édition permettent d’atteindre un contenu accessible.

Envisagez-vous de développer des technologies assistives ?#

Les technologies assistives ont pour objectif de faciliter l’accessibilité : elles comportent les lecteurs d’écran, les loupes, les modes haut contraste… Ces outils varient selon l’utilisateur mais également selon le contexte (système d’exploitation, type d’appareil utilisé…). Par ailleurs, les utilisateurs dépendant de ces technologies trouvent un confort dans des habitudes qu’il est important de respecter. Par conséquent, il est ressorti de notre accompagnement avec Anysurfer qu’intégrer des technologies assistives à la sauce iMio serait non seulement superflu mais pourrait de surcroÎt interférer avec des technologies standards. Nous avons donc retenu une approche plus universelle en facilitant la coexistence entre nos fonctionnalités et les technologies assistives les plus plébiscitées.

Le carrousel de notre page d’accueil ne s’anime plus. Pouvez-vous le réactiver ?#

La décision a été prise d’arrêter par défaut l’animation des carrousels au bénéfice de l’accessibilité des sites internet. En effet, les carrousels sont problématiques à plusieurs égards, notamment parce qu’ils distraient les personnes sensibles au mouvement et parce qu’ils représentent une difficulté pour les visiteurs qui lisent lentement.

Notre équipe a prévu un paramètre pour relancer l’animation des carrousels. Tout membre choisissant d’exploiter cette option devra néanmoins prévoir une exception sur sa déclaration d’accessibilité à la règle 2.2.2 Mettre en pause, arrêter, masquer.

Une bordure apparaît sur notre site autour des éléments cliqués. Peut-on empêcher ce comportement ?#

La règle 2.4.7 Visibilité du focus impose de rendre visible l’élément sur le point d’être visité. Cette règle a été concrétisée dans Smartweb au moyen d’une bordure discrète qu’il n’est pas souhaitable de supprimer sous peine de manquement au niveau AA de la norme WCAG. Une adaptation graphique pourra cependant être sollicitée par tout membre jugeant ce focus inesthétique.