Chez TECHSYS on aime faire par nous-même et on aime faire de notre mieux. Améliorer notre communication externe en partageant plus de contenus c’est bien, mais créer des contenus accessibles aux personnes en situation de handicap, c’est mieux !
Dans cet article on partage avec vous nos bonnes pratiques de création de contenus Web pour qu’ils soient accessibles à toutes et à tous.
Références
Référentiel général d’accessibilité pour les administrations. Ce guide s’adresse aux intégrateurs chargés de réaliser les gabarits HTML et CSS :
-> Guide de l’intégrateur RGAA 3 (disic.github.io)
Référentiel d’accessibilité pour les administrations. Ce guide s’adresse aux contributeurs créant du contenu Web depuis un CMS :
-> Guide « Contribuer sur le Web de manière accessible » (disic.github.io)
Guide pour l’accessibilité du Web du World Wide Web Consortium (W3C) :
A chacun son métier
Les guides de l’administration différencient les rôles d’intégrateur (création de gabarits HTML et CSS) et de contributeur (création de contenus en utilisant un CMS), et mettent en garde sur les interventions directes sur le code pouvant avoir des impacts non maîtrisés sur les contenus, et rendant leur réparation difficile voire impossible. N’étant pas compétents dans la gestion des gabarits HTML et CSS, les contenus du site web https://techsys.fr/ sont créés depuis un CMS sans intervention directe sur le code HTML généré. Notre rôle est celui de contributeur tel que décrit dans le guide de l’administration « Contribuer sur le web de manière accessible » en référence.
Mise en application des bonnes pratiques
Nous synthétisons ci-dessous les bonnes pratiques proposées dans les liens en référence et applicables au contexte TECHSYS.
Les images
Seules les images porteuses d’information doivent être enrichies d’un texte alternatif. Les images de décoration ne sont pas traitées.
Un bon texte alternatif retranscrit les informations essentielles et suffisantes apportées par l’image. Il doit donc synthétiser le sens de l’image sans en faire une description détaillée. Si la retranscription en texte dépasse une phrase, alors la création d’un paragraphe descriptif associé à l’image est indispensable.
A FAIRE :
- Le texte alternatif est renseigné via le champ TEXTE ALTERNATIF (ALT) en cliquant sur l’image
- S’il est renseigné, le titre doit être identique au texte alternatif
- En cas de nécessité d’un paragraphe descriptif, indiquer le titre du paragraphe descriptif dans le champ TEXTE ALTERNATIF, et commencer le paragraphe descriptif par ce titre (exemple : Plan d’accès à TECHSYS (description détaillée))
A NE PAS FAIRE :
- Insérer des mots clés dans le texte alternatif pour améliorer le référencement
- Décrire les images de décoration ce qui polluera la lecture par un lecteur d’écran
- Insérer les crédits (auteur, date, …) de l’image dans le texte alternatif. Utiliser un paragraphe descriptif
Les couleurs
L’utilisation des couleurs doit faire l’objet d’une compatibilité concernant le contraste et l’information induite par leur utilisation. La compréhension des informations par un texte lisible doit être assurée.
TECHSYS utilise le orange comme couleur de son identité visuelle. Les couleurs appropriées ont été calibrées depuis le site Contrast Finder qui reprend les préconisations du W3C en la matière :
- Sur fond blanc : #C75300 – R199/G83/B0
- Sur fond noir : #EC7135 – R236/G113/B53
A FAIRE :
- Utiliser les oranges calibrés ci-dessus pour les textes. A défaut utiliser le noir et le blanc
- Utiliser la couleur dans le texte uniquement à des fins de décoration
- Décrire par le texte les images comme décrit dans le paragraphe « Les images ».
A NE PAS FAIRE :
- Utiliser la couleur d’un texte pour le prioriser ou faire comprendre son importance
Les tableaux
Les tableaux sont très complexes à retranscrire et à appréhender pour les personnes malvoyantes ou en déficience cognitive.
A FAIRE :
- Eviter l’utilisation de tableaux
- Utiliser les tableaux uniquement pour une présentation tabulaire
Les liens
Les informations liées à un lien inséré doivent permettre à l’utilisation d’un lecteur d’écran de prendre sa décision de la suivre ou non, et d’accéder au lien. Il faut donc apporter l’information utile et au bon endroit.
A FAIRE :
- Utiliser le texte alternatif d’un lien cliquable depuis une image pour décrire la fonction du lien
- Pour les liens hypertextes, décrire la fonction du lien dans le titre
- Si votre lien ouvre une nouvelle fenêtre, indiquer le dans la description du lien sous la forme « <description du lien> – nouvelle fenêtre »
A NE PAS FAIRE :
- Modifier l’apparence par défaut d’un lien hypertexte (couleur, surlignage, etc…)
- Utiliser des intitulés/descriptions identiques pour des liens différents
Les titres, les puces, les listes numérotées
Tout élément qui structure un contenu est recommandée car il facilite la navigation des personnes en situation de handicap.
A FAIRE :
- Structurer le contenu par des titres et des sous-titres, des puces et listes numérotées
- Privilégier des sessions courtes entre les titres
- Respecter la hiérarchie des titres, à minima : titre de l’article 1 – sous-titre 2
A NE PAS FAIRE :
- Utiliser la mise en gras du texte pour « simuler un titre »
- Utiliser des tirets pour « simuler une liste »
Les textes multilingues
La synthèse vocale utilisée par certaines personnes en situation de handicap détecte les changements de langues et donc de prononciation si ce changement est indiqué dans l’éditeur de texte. Cette option n’est pas disponible dans le CMS actuellement utilisé, ni dans la plupart des CMS ou éditeurs de textes. Pour changer temporairement la langue de référence d’un texte, il faut intervenir sur le code source du contenu.
Pour palier à ce manque, pour un contenu en langue française, il est essentiel de respecter le dictionnaire français, à l’exception des noms propres.
A FAIRE :
- Limiter l’utilisation de plusieurs langues aux mots inclus dans le dictionnaire de la langue de référence
A NE PAS FAIRE :
- Mélanger les langues dans un texte
Les citations
Pour les citations courtes ou longues, l’utilisation des blocs de citation est la meilleure méthode pour assurer une accessibilité optimale aux personnes en situation de handicap.
A FAIRE :
- Insérer un bloc de citation
A NE PAS FAIRE :
- Intégrer une citation à un texte en la mettant entre guillemets
La mise en forme des textes, les mots complexes et les abréviations
Les préconisations ci-dessous sont réputées difficiles à mettre en œuvre, et sont pour cela qualifiées d’optimales mais non nécessaires. Elles concernent essentiellement les personnes soufflant de déficiences cognitives comme la dyslexie.
Il est possible de palier à la difficulté de mise en forme des textes en proposant une version adaptée du site web via un bouton spécifique : suppression des justifications de texte, ajout de grands interlignages. En attendant ce contournement, les préconisations ci-dessous seront respectées le plus possible.
A FAIRE :
- Interlignage minimum d’1,5 fois la taille du texte
- Lorsqu’il y a une difficulté propre à la prononciation, une version facilement reconnaissable par une synthèse vocale. Exemple : Les poules du couvent [couvant] couvent
- Indiquer la signification d’une abréviation entre parenthèse lors de sa première occurrence dans un texte
- Utiliser un langage correspondant à un niveau de lecture en classe de 6ème, ou intégrer un glossaire reprenant les définitions des mots complexes
A NE PAS FAIRE :
- Justifier le texte
Cas non traités dans la mise en application
Ci-dessous sont référencés les types de contenus qui ne sont pas actuellement utilisés par TECHSYS. S’ils devaient l’être, l’étude de leur intégration de façon accessible sera faite, et ces bonnes pratiques mises à jour.
Les cadres
Les cadres permettent de faire figurer des éléments (des portions de sites web, des vidéos, un site web en entier) en provenance d’autres sites web. Ils sont utilisés pour intégrer des contenus issus des réseaux sociaux, insérer des vidéos dans un contenu…
Les cadres doivent avoir un titre qui résume leur contenu.
Les vidéos et les audios
Les vidéos doivent être sous-titrées pour retranscrire les informations parlées, mais aussi les informations affichées utiles à la compréhension du sens de la vidéo (exemple : le nom de l’intervenant affiché dans la vidéo sans être lu).
Une retranscription en texte doit être proposée pour les contenus audios et vidéos, soit dans la page Web, soit via un lien vers une autre page situé sous le contenu audio ou vidéo.
Les médias audio et vidéo doivent être intégrés à une page Web avec un titre.
La validation automatique des contenus
Que ce soit par un lecteur d’écran ou un module de test automatique, le meilleur moyen pour valider l’accessibilité de nos contenus est de tester. La mise en œuvre de ces tests peut entrer dans une démarche d’amélioration des contenus TECHSYS.