Charte éditoriale pasdecalais.fr
Bonnes pratiques éditoriales pour du numérique accessible
Introduction
Abbréviation, accronyme et sigle
Il faut veiller :
- qu'ils soient écrits en majuscules sans point ou caractère de séparation. Exemple : EPCI
- 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
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 :
- Cliquez ici
- Cliquez ici
- Cliquez sur ce lien
- https://www.pasdecalais.fr/Le-Conseil-departemental/Projet-de-mandat
- Cliquez sur l'image avec une image sans alt ou avec une alt vide comme lien
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.
- Accompagner chaque média d’une transcription textuelle ou d’une audiodescription synchronisée qui reprend
- 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
- Formation DOCEO62 Handicap et accessibilité numérique
- RGAA (Référentiel Général d’Amélioration de l’Accessibilité)
- Checklist Opquast assurance qualité web
- Script de diaporama AccesSlide développé par Access42 sous licence GPL Dépôt GitHub Access42
Navigation
Pour passer d’une page à une autre, vous disposez des boutons « Suivant » et « Précédent ».
Sur appareil mobile, vous avez la possibilité de changer de page en balayant l’écran :
- de la droite vers la gauche, pour passer à la page suivante ;
- de la gauche vers la droite, pour revenir à la page précédente.
Navigation avec lecteur d’écran sur appareils mobiles
Si vous utilisez un lecteur d’écran sur mobile, ces actions sont différentes selon votre logiciel :
- sur Android avec TalkBack : l’action se réalise avec deux doigts sur l’écran (les deux doigts doivent être suffisamment espacés l’un de l’autre) ;
- sur iPhone avec VoiceOver : effectuer un double tap prolongé et maintenir le doigt appuyé quelques secondes puis balayer l’écran vers la gauche ou la droite.
- Si ces actions ne sont pas effectives, vous devez retourner en haut de page pour atteindre les boutons « Suivant » et « Précédent ».
Navigation au clavier
Touche | Action |
---|---|
CTRL + Espace | Page suivante avec la dernière version de NVDA ou JAWS 18 |
Espace ou Flèche droite | Page suivante dans les autres cas |
MAJ + CTRL + Espace | Page précédente avec la dernière version de NVDA ou JAWS 18 |
MAJ + Espace ou Flèche gauche | Page précédente dans les autres cas |
Début | Première page |
Fin | Dernière page |
ALT + 0 (zéro) | Sommaire |
Options d’accessibilité
AccessReader propose plusieurs options d’accessibilité à configurer dans le volet « Configuration ».
Dyslexie
Pour un meilleur confort de lecture, cochez les options « Police adaptée » et « Interlignage adapté ».
Contraste
AccessReader propose trois niveaux de contraste :
- par défaut ;
- inversé ;
- renforcé.
Vocalisation
Vous pouvez sélectionner, à la section « Accessibilité », différentes options sonores.
Vous pouvez choisir les actions qui déclencheront un signal sonore (chaque signal sonore est différent en fonction de l’action) :
- Page : émet un bip lorsque vous arrivez sur une nouvelle page
- Début : émet un bip lorsque vous atteignez la première page
- Fin : émet un bip lorsque vous atteignez la dernière page
Vous pouvez également choisir des éléments supplémentaires à vocaliser :
- Numéro : vocalise le numéro de la page à son affichage
- Titre : vocalise le titre de la page à son affichage
Conseils pour l’utilisation d’AccessReader avec un lecteur d’écran
Note : AccessReader a été utilisé avec les lecteurs d’écran suivants :
- Windows : NVDA 2017.3 avec Firefox 55 et Internet Explorer 11 ;
- Windows : JAWS version 18 avec Internet Explorer 11 ;
- Mac : Sierra avec VoiceOver et Safari.
- Linux : Ubuntu 14 avec Orca et Firefox 30.
Recommandations pour la configuration avec un lecteur d’écran
- Rechercher le bouton « Ouvrir la configuration » (il se trouve en bas de page).
- Choisir la police, l’interlignage et les contrastes les plus adaptés à sa vision.
- Dans la partie « Accessibilité », on peut choisir de cocher ou non des cases à cocher pour :
- vocaliser les numéros de page,
- entendre des bips quand on arrive à la première ou la dernière page,
- vocaliser le titre de la page en cours.
- Veiller à ce que la case « désactive l’action du clic pour afficher la page suivante » soit décochée, (NVDA et JAWS). Pour VoiceOver et Orca, cela ne semble pas avoir d’incidence.
- Dans la partie « lecteur », on peut choisir d’afficher ou non le sommaire et de consulter le document en mode page à page ou en mode plan. Dans le cas du mode plan, toutes les pages seront affichées en mode linéaire. Elles seront séparées par des titres de niveau 2. Dans le cas du mode page, il faudra appuyer sur suivant ou sur espace pour afficher la page suivante.
Note sur l’utilisation des commandes du lecteur avec un lecteur d’écran
L’appui sur la barre d’espace pour aller à la page suivante ne fonctionne pas avec NVDA et Firefox ≥55, ni avec JAWS et Internet Explorer ≥11. Dans ces deux cas, il faut utiliser le raccourci CTRL + Espace pour passer à la page suivante, et MAJ + CTRL + Espace pour passer à la page précédente.
L’appui sur les autres touches pour aller au début et à la fin du document ne fonctionnent pas non plus avec JAWS et NVDA. Pour pallier ce problème :
- dans NVDA, appuyer sur NVDA + F2 pour ignorer l’appui sur la touche suivante ;
- dans JAWS, appuyer sur JAWS + 3 du pavé alphanumérique pour ignorer l’appui sur la touche suivante.
VoiceOver et Orca gèrent très bien la navigation à la page suivante, avec espace, page précédente avec SHIFT + espace, début et fin de support de présentation.
Par contre l’utilisation des flèches droite et gauche ne fonctionne avec aucun des lecteurs d’écran mentionnés ci-dessus.
Utilisation du dialogue de configuration avec un lecteur d’écran
Lorsqu’on ouvre la configuration, une « Fenêtre » apparaît. VoiceOver annonce « paramètres » avec 7 éléments. Chaque catégorie est annoncée comme « groupe » par VoiceOver : exemple dyslexie, contrastes, accessibilité, effets (groupe). VoiceOver annonce le nombre d’éléments dans chaque catégorie. Pour ouvrir une catégorie, appuyer sur VO + Majuscule + flèche bas.
Pour modifier les paramètres accessibilité, une fois que VoiceOver annonce accessibilité, interagir à l’aide de VO+majuscule+flèche bas et se déplacer parmi les boutons. VoiceOver n’annonce pas le titre associé à chaque bouton.
Avec les autres lecteurs d’écran, il suffit, une fois que la fenêtre a été ouverte, d’utiliser la tabulation et d’effectuer les choix souhaités en cochant les éléments à l’aide de la barre d’espace.
Veillez à ne pas dépasser le bouton « Enregistrer » car on risque de se retrouver dans la barre d’adresses du navigateur et il est difficile de revenir en arrière.
Autres petits dysfonctionnements des lecteurs d’écran
NVDA et Orca
Lorsqu’on passe à la page suivante ou précédente et que la vocalisation des numéros de pages est cochée, NVDA et Orca annoncent « null » puis le numéro de page. Pour les chiffres supérieurs à 10, ils continuent d’annoncer 1, 2, 3… Seules les dizaines, 10, 20, 30… sont annoncées correctement.
L’annonce des numéros de pages est correcte avec JAWS à partir de la version 15 et VoiceOver.
JAWS
Si vous utilisez JAWS, la version 14 du logiciel ne fonctionne pas bien avec Firefox. Préférer l’utilisation du lecteur avec Internet Explorer. JAWS 14 ne vocalise pas les numéros de page ni leur titre.
Pour toute question concernant l’utilisation d’Accessreader avec un lecteur d’écran, ne pas hésiter à nous contacter.
Structure des titres
Le premier titre de niveau 1 (h1
) rencontré dans la page contient le titre du support de présentation. Ce titre de niveau 1 reste le même tout au long du support de présentation.
Ensuite, chaque grande section du support de présentation est titrée par un titre de niveau 2 (h2
).
À l’intérieur d’une grande section, les sous-sections peuvent être titrées par des titres de niveau 3 (h3
) ou par un niveau de titre encore inférieur.
Cette structure de titres peut sembler incohérente lorsqu’elle est vocalisée : en effet, on passe parfois d’un h1
à un h3
, voire à un titre de niveau inférieur. Elle n’en reste pas moins cohérente à l’échelle du document, et parfaitement valide au regard de la norme HTML 5.
Par ailleurs, lorsqu’on se trouve dans une sous-section, un fil d’ariane cliquable apparaît après l’en-tête du document, et permet de retourner au début de la grande section concernée si besoin.