Charte éditoriale pasdecalais.fr

Bonnes pratiques éditoriales pour du numérique accessible

Introduction

besoin d'une intro ?

Abbréviation, accronyme et sigle

Il faut veiller :

  1. qu'ils soient écrits en majuscules sans point ou caractère de séparation. Exemple : EPCI
  2. qu'ils soient décrits entre parenthèse à sa première utilisation. Exemple : EPCI (Établissement Public de Coopération Intercommunal) ou balisé comme abbréviation

Il n'est pas nécessaire, pour un même sigle, de réitérer le point 2

Accents sur les capitales

Les accents sont obligatoires car ils peuvent modifier le sens de la phrase

UN INTERNE TUE peut signifier :

  • un interne tue
  • un interné tue
  • un interne tué
  • un interné tué

Pour vous aider, vous pouvez utiliser la table des caractères

Anglicisme et mots étrangers

À baliser "changer de langue" en inscrivant le code ISO du pays

Exemple :

  • en pour anglais
  • nl pour néerlandais

Pour vous aider, vous pouvez consulter la Tables des codes de pays (lien externe)

Chiffres et unités

  • doivent être écrits en lettres jusqu'à dix inclus (exceptions : dates, mesures, chiffres accompagnés d'une décimale ou d'un symbole, comparaisons ou listes de données chiffrées)
  • remplacez la virgule par un point
  • laissez un espace entre les chiffres et l’unité de mesure ; exemple : 3.3 cm, 3 000 000.50 €
  • pour permettre une synthèse vocale parfaite sur l'ensemble du site, les mots "premier" et "second" doivent être rédigés entièrement (sauf dates) ; les adjectifs numéraux suivants doivent être rédigés de la façon suivante : 6ième, 11ième, 100ième, etc.
  • les chiffres romains dans les titres sont interdits, car les titres ne permettent pas les déclarations d'acronymes
  • tout chiffre romain ou adjectif numéral ordinal inférieur à 11 doit être balisé en "abréviation", même au sein d'une date

Dates

Les dates sont présentées dans des formats explicites :

  • S’assurer que le mois est écrit en toutes lettres (décembre) ou en abrégé (déc.), mais pas au format numérique.
  • Indiquer les 4 chiffres de l’année.

Objectif

  • Éviter aux utilisateurs les risques de méprise sur le sens d’une date.
  • Faciliter la compréhension et la réutilisation des contenus concernés.

Document PDF ou Word

Il faut veiller :

  • qu'il soit accessible grâce au vérificateur pdf
  • ou que son contenu soit dans la page web
  • ou fournir une alternative accessible via un Word sans mise en page avec le contenu du document

Le Word sans mise en forme est l'alternative accessible la plus facile à mettre en place.

Dans le cas spécifique de documents assez lourds, il est possible d'avoir une dérogation pour charge disproportionnée. Comme pour les enquêtes publiques, il faut a minima décrire l'enquête publique et les différents documents sans devoir donner plus de détails.

La taille des fichiers internes proposés en téléchargement est indiquée.

  • Informer de façon préventive les utilisateurs sur la quantité de données à télécharger.
  • Permettre aux utilisateurs de différer le téléchargement en connexion bas débit ou mobile.
  • Améliorer l’accessibilité des contenus aux personnes handicapées

Le nommage des fichiers internes proposés en téléchargement permet d'en identifier le contenu et la provenance.

  • Améliorer l’identification des fichiers internes.
  • Éviter les confusions pour l’utilisateur.

La langue des fichiers en téléchargement est précisée lorsqu'elle diffère de celle de la page d'origine.

Cas particulier

13.3 : Ajout d’un cas particulier pour l’accessibilité des documents en téléchargements

Si les fichiers bureautiques (ex : PDF, documents Microsoft ou libreOffice etc.) ont été publiés avant le 23 septembre 2018 (sauf si ce sont des documents nécessaires pour accomplir une démarche administrative relevant des tâches effectuées par l’organisme concerné), ils sont exemptés de l’obligation d’accessibilité.

Motif : Contenus exemptés par la Directive Européenne (Article premier). Voir son application dans le décret de juillet 2019

Écriture inclusive

L'orthographe inclusive, surtout le point médian, pose des difficultés pour les personnes avec :

  • Déficience visuelle : les lecteurs d'écrans ont des difficultés à prendre en compte l'orthographe inclusive
  • Troubles DYS : la ponctuation peut présenter une difficulté, accentuée par le point médian
  • Déficience intellectuelle : l'introduction d'une ponctuation inhabituelle présente un nouveau challenge, avec un risque que l'information ne soit pas comprise

Et cætera et points de suspension

  • remplacez les points de suspension par etc.
  • etc. n’est jamais suivi de points de suspension
  • à déclarer en abréviation et à baliser "et cætera"

Exposants

  • sont à bannir
  • doivent être déclarés comme abréviation et balisés
  • exemple : Mlle doit être balisé "Mademoiselle" ou et m2 doit être balisé "Mètres carrés"

Graphiques

Pour chaque graphique représentant des données numériques (courbe, diagramme, histogramme, camembert etc.):

  • Afficher de manière structurée, dans le contexte immédiat du graphique, toutes les données numériques qu’il représente, par exemple sous forme de tableau de données.
  • Ou fournir dans le contexte immédiat du graphique un lien vers un contenu du même type.

Objectif

  • Permettre ou améliorer la compréhension du graphique.
  • Faciliter le partage des données.
  • Améliorer l’accessibilité des contenus aux personnes handicapées.
  • Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation.

Images

Images décoratives

Les images décoratives ont une alternatives textuelles (alt) vide :

  • Éviter aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d’écran, navigateur avec images désactivées) d’être perturbés par des informations sur des images qui leur sont inutiles.
  • Fournir aux robots d’indexation uniquement des informations pertinentes.
  • Améliorer l’accessibilité des contenus aux personnes handicapées.
  • Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation

Images liens

Les images liens ont une alternatives textuelles appropriées, indiquant la cible ou le rôle du lien :

  • Permettre aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d’écran, navigateur avec images désactivées) de comprendre le sens des liens présents sur des images qu’ils ne peuvent voir.
  • Permettre aux robots d’exploiter l’information véhiculée par les images-liens (pour le référencement, l’indexation, la traduction automatique des alternatives d’images-texte).
  • Permettre l’affichage d’un texte pertinent pendant le chargement des images.
  • Améliorer l’accessibilité des contenus aux personnes handicapées.
  • Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation

Images porteuses d'informations

Les images liens ont une alternatives textuelles appropriées avec un alt approprié reprenant l'information :

  • Permettre aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d'écran, navigateur avec images désactivées) de comprendre le sens des images qu'ils ne peuvent voir.
  • Permettre aux robots d'exploiter l'information véhiculée par les images (référencement, indexation, traduction automatique des alternatives d’images-texte).
  • Permettre l'affichage d'un texte pendant le chargement des images.
  • Améliorer l’accessibilité des contenus aux personnes handicapées.
  • Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation

Cas particulier : les images complexes

La description de l'image peut être dans le contenu de la page, dans le contexte immédiat de l’image. Dans ce cas, l'image devient décorative et l'alternative textuelle doit être vide.

Italique

Éviter l’italique, qui est très compliqué à lire pour les personnes dyslexiques

Justification

  • Ne jamais justifier le texte ! Lorsque l’on justifie un texte, des espaces non homogènes sont insérés entre les mots. Cela rend alors la lecture plus complexe pour une personne dyslexique, puisque le texte devient moins fluide et agréable à lire.
  • Aligner les textes à gauche

Liens

Indiquer sans ambiguïté le contenu de la page cible du lien, la fonction du lien ou son comportement, le cas échéant, dans le libellé des liens.

  • Permettre aux utilisateurs d'identifier précisément la nature du lien et d'éviter des actions erronées.
  • Permettre aux outils d'indexation d'associer un libellé à une ressource.
  • Permettre aux lecteurs d'écran d'en indiquer la cible de façon explicite et d'éviter de désorienter les utilisateurs.
  • Améliorer l’accessibilité des contenus aux personnes handicapées.
  • Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation

Cas particulier : liens externes et nouvelles fenêtres

  • Les liens internes et externes sont différenciés
  • Les liens internes vers les contenus à accès limité sont différenciés
  • Les liens provoquant l'ouverture d'un logiciel externe ont un libellé explicite. Par exemple, il est préférable de rédiger les liens mailto sous la forme "Envoyer un mail" plutôt qu'un simple lien "Contact"
  • L'utilisateur est averti des ouvertures de nouvelles fenêtres

Ce qu'il faut éviter :

Liste et sous liste

  • Doivent être utilisées dès que deux éléments au minimum sont à développer.
  • Ne mettre aucun tiret.
  • Les listes à numéros doivent être employées lorsque :
    • l'ordre de lecture est important
    • le nombre d'éléments est mentionné dans la phrase d'accroche

Objectif

  • Permettre aux aides techniques de restituer à l’utilisateur une liste dont l’organisation est clairement perceptible et qui facilite le passage d’un élément de la liste à un autre.
  • Favoriser un rendu approprié des listes déroulantes complexes dans tous les navigateurs.
  • Améliorer l’accessibilité des contenus aux personnes handicapées

Liste déroulante

  • Les éléments d'une liste déroulante qui peuvent être regroupés le sont de manière appropriée :
    • Permettre aux aides techniques de restituer à l’utilisateur une liste dont l’organisation est clairement perceptible et qui facilite le passage d’un élément de la liste à un autre.
    • Favoriser un rendu approprié des listes déroulantes complexes dans tous les navigateurs.
    • Améliorer l’accessibilité des contenus aux personnes handicapées
  • Les listes d'options de formulaires sont présentées dans un ordre identifiable :
    • Permettre aux utilisateurs d'accéder rapidement à l'item de liste recherché.
    • Améliorer l’accessibilité des contenus aux personnes handicapées

Majuscules

Les mises en majuscules à des fins décoratives sont effectuées à l'aide des styles

  • Permettre un copier-coller des contenus indépendamment de la mise en forme entièrement en majuscules.
  • Faciliter l'adaptation de la mise en forme pour les utilisateurs ayant des difficultés de lecture des textes entièrement en majuscules.

Médias temporels audio et vidéo

Ce qu'il faut faire :

  • Identifier le média : veiller à ce qu'un titre précède bien la vidéo ou l'audio
  • Permettre la compréhension d’un média sans le son :
    • Accompagner chaque média d’une transcription textuelle ou d’une audiodescription synchronisée qui reprend
      • la totalité de ce qui y est exprimé oralement
      • toutes les informations descriptives nécessaires à une compréhension équivalente de l’action.
      • des informations présentées dans l’ordre chronologique de leur apparition dans la vidéo
    • Fournir des sous-titres synchronisés pour chaque vidéo.
  • Veiller à ce que le média temporel soit contrôlable par l'utilisateur (clavier ou tout autre dispositif), éviter les lancements automatiques
  • La durée doit être indiquée

Médias non temporels

Par "médias non temporels", le RGAA désigne des médias créés avec des technologies différentes de HTML, CSS et JavaScript. Il s’agit en général d’animations ou d’activités interactives réalisées à l’aide d’une technologie qui nécessite une extension comme Flash, Java ou Silverlight.

Pour chaque média non temporel, il est demandé :

  • à ce qu’une alternative accessible soit fournie
  • à ce que cette alternative soit manipulable au clavier

  • à ce que cette alternative soit accessible à l’aide d’un lien présent sur la même page
    • Ce lien devra être clairement identifiable et situé à proximité du contenu
    • Devra mener à l’alternative accessible, soit dans la page elle-même soit dans une autre page.
  • Note : les médias produits avec svg ou canvas ne sont pas considérés comme des médias non temporels. En effet, ce sont des médias avec lesquels on utilise généralement JavaScript, qui est une technologie parfaitement accessible.

Soulignement

Le soulignement est réservé aux hyperliens

  • Éviter les clics inutiles sur des contenus soulignés perçus comme des hyperliens.
  • Faciliter l’identification des liens.

Symboles

€, %, /, -, etc.

  • laissez un espace avant le signe
  • pas de slashs ni de tirets, sauf pour les mots nécessitant un trait d’union et pour l'expression "et-ou" (les tirets sont lus comme le signe "moins")
  • les symboles &, #, {}, €, $, £, @, µ n'ont pas besoin de balise

Tableaux

  • les cellules des tableaux de données sont reliées à leurs en-têtes.
  • les titres des tableaux de données sont renseignés
  • les tableaux de données ne sont pas remplacés par des images
.

Objectifs

  • Permettre aux aides techniques de restituer l'information contenue dans les tableaux de données de manière compréhensible
  • Permettre aux utilisateurs d'aides techniques (lecteurs d'écran) d'identifier aisément la nature des informations fournies par un tableau.
  • Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation
  • Améliorer l’accessibilité des contenus aux personnes handicapées

Titres et sous-titres

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée.

  • Permettre aux utilisateurs qui le souhaitent de visualiser la structure du contenu de la page et d’y naviguer.
  • Permettre aux machines et aux outils d’indexation d’extraire le plan de chaque page.
  • Améliorer le référencement en facilitant l’interprétation du contenu par les robots d’indexation.
<h1>Titre 1</h>
  <h2>Titre 2</h2>
    <h3>Titre 3</h>
    <h3>Titre 3</h>
  <h2>Titre 2</h2>
    <h3>Titre 3</h>

Texte mis en forme

Les textes pouvant être mis en forme via des styles ne sont pas remplacés par des images.

  • Faciliter l’adaptation du rendu au media (mobile ou autre) ou aux besoins de l’utilisateur (agrandissement de la taille des caractères, modification des couleurs, de la police, de la graisse, de la justification, etc.).
  • Améliorer l’accessibilité des contenus aux personnes handicapées.
  • Améliorer la prise en compte des contenus par les moteurs de recherche et outils d’indexation.

Pour plus d'information

Michael Lenglart
Gestionnaire de projet multimédia
Bureau des outils numériques
Lenglart.Mickael@pasdecalais.fr
03 21 21 91 28

Géraldine Falek
Chargé(e) de Conception Rédaction
Responsable éditorial numérique
Falek.Geraldine@pasdecalais.fr
03 21 21 35 03

Romain Lamirand
Chargé(e) de Conception Rédaction
Responsable éditorial 62 coeur
Lamirand.Romain@pasdecalais.fr
03 21 21 91 25

Ressources