Produire du contenu web accessible : 20 règles faciles à appliquer

L’accessibilité d’un contenu web tient à quelques détails. Voici quelques règles trop simples pour se priver de les respecter. Pour vous marrer, allez directement à la onzième.

1. Le contenu important d’abord.
   Répondre directement à la question que se pose le visiteur. Le titre, le chapô et le premier paragraphe doivent délivrer l’essentiel de l’information. Penser à ceux pour qui la lecture est compliquée (mal voyants, dyslexiques…). Cerise sur la gâteau, vous augmentez vos chances d’être en position O sur les résultats de recherche Google.
2. Pas de portion de texte en italiques ou en majuscules.
   Le texte est tout simplement plus difficile à lire.
3. Des mots simples et courts.
   Et la lecture devient plus facile et plus rapide.
4. Des phrases courtes à la voix active.
   Les structures de phrases simples et directes sont plus compréhensibles.
5. Des liens qui ont du sens.
   L’intitulé d’un lien doit être explicite et compréhensible, indépendamment du texte qui l’entoure. Le Cliquer ici doit être proscrit.
6. Des liens différenciés visuellement.
   Simplifier l’apprentissage de l’interface avec un repérage facile des liens hypertextes et des éléments de navigation.
7. Des <alt> pour les images.
   Le texte de remplacement sert à indiquer le contexte d’utilisation de l’image, décorative ou informative. Si l’image est décorative, laisser vide la balise. Si l’image délivre une information, indiquer son contenu.
8. Des listes avec marquage html <ul><li> ou <ol><li>.
   Différencier les listes non ordonnées (à puces) et ordonnées (numérotées).
9. Des titres avec marquage html <h1><h2><h3>.
   Faciliter la compréhension de la structure du contenu en respectant la hiérarchie. Ne pas sauter d’un titre 2 à un titre 4 par exemple.
10. Un titre et en-tête pour les tableaux.
    Le titre doit être balisé avec <caption>
11. Des accents sur les lettres capitales.
    La synthèse vocale des lecteurs d’écran ne saura pas corriger un caractère qui n’a pas été accentué. Ex. AVOIR UN FILS DEPUTE ou UN FILS DÉPUTÉ.
12. Des abréviations explicitées.
    Donner la signification des abréviations, sigles et acronymes dès leur première occurrence dans le contenu.
13. Des citations déclarées.
    Annoncer avec <blockquote> la présence d’une citation aux aides techniques comme les plages braille ou les synthèses vocales.
14. Du texte associé aux symboles.
    Expliciter les pictogrammes et autres icônes facilite leur compréhension par tous et évite les malentendus.
15. Pas de texte justifié.
    Le texte justifié est souvent mal géré par les navigateurs et entraîne des espaces trop importants entre les mots. Privilégiez l’alignement à droite, solution simple et efficace.
16. Des contrastes suffisants.
    Se concentrer sur le contraste entre la couleur du texte et la couleur de l’arrière-plan. Des outils en ligne pour évaluer le contraste ?
17. Une description détaillée des contenus riches (graphiques, infographies…)
    La description fournit une information identique ou équivalente à celle véhiculée par le contenu riche complexe. Elle doit être accessible soit à proximité immédiate du contenu riche, soit via un lien (explicite !).
18. Une possibilité de mettre en pause des contenus dynamiques.
    Pouvoir mettre en pause un carrousel d’images, une vidéo ou un podcast pour que chacun puisse consulter le contenu à son rythme.
19. Une transcription et des sous-titres pour les vidéos.
    La transcription restitue l’ensemble des informations : paroles, identité des personnes, messages affichés à l’écran, etc. Intégrer les sous-titres sous forme de fichier séparé.
20. Une navigation possible au clavier.
    Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture et garantir la visibilité de la prise de focus au clavier.

Et voici une alternative visuelle au contenu texte :-)

Sources :

Notice d’accessibilité éditoriale (modèle)