Quelques règles simples pour un contenu web accessible

Le principe de la pyramide inversée

Pour un bon contenu web accessible il est nécessaire d’utiliser cette méthode
Afin que votre contenu apporte les meilleures réponses aux internautes.

L’utilisation de la méthode QQOQCP

C’est une règle qui permet de reprendre l’ensemble des questions que peuvent se poser les internautes lors de leurs recherches. QQOQCP signifie : Qui ? Quoi ? Où ? Quand ? Comment ? Pourquoi ?
Il faut utiliser cette méthode pour rédiger chaque contenu de votre site web et optimiser le contenu d’un site.

Des title et alt pour les images

Les images jouent un rôle important en termes d’impact visuel et d’attention pour appuyer vos propos et les mettre en avant.

Les bonnes pratiques consistent à remplir l’attribut title avec un titre explicite (c’est-à-dire celui qui sera affiché par certains navigateurs lors du survol de l’image), et l’attribut alt avec une description de ce que contient votre image.

Aussi appelé texte alternatif, ce texte sert à décrire une image et apparaîtra à l’écran lorsque cette dernière ne pourra pas être affichée à vos visiteurs
(ex : votre site n’arrive pas à se charger ou l’image est introuvable).  

Le balisage des titres hn

Les balises de titres H1, H2… H6 (parfois notées Hn) sont des balises servant à définir les différents niveaux de titres pour structurer un contenu éditorial sur une page HTML.

Dans la norme HTML, il existe 6 niveaux de titres : H1 est le plus important, H6 le moins important.

  • Votre titre H1 doit être le plus important.
  • Les H2 constituent les parties principales de votre article.
  • Les H3 représentent les sous-parties de vos H2.
  • Les H4, H5 et H6 sont des balises moins utilisées qui peuvent apporter un complément d’information.

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.

Des abréviations explicitées

Donner la signification des abréviations, sigles et acronymes dès leur première occurrence dans le contenu.

Un titre et en-tête pour les tableaux

Le titre doit être balisé avec <caption>

Des listes avec marquage html ul li ou ol li

Différencier les listes non ordonnées (à puces) et ordonnées (numérotées).

Des liens logiques

Les liens doivent être explicites et compréhensibles.

Le libellé de chaque hyperlien décrit sa fonction ou la nature du contenu vers lequel il pointe.
Évité les liens comme « Cliquer ici » et « En savoir plus »

Des accents sur les lettres capitales

En effet il faut faire attention car la synthèse vocale des lecteurs d’écran ne saura pas corriger un caractère qui n’a pas été accentué.
Ex. « École maternelle » et non « Ecole maternelle »

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é.

Quelques bonnes pratiques supplémentaires

  • Des mots simples et courts, la lecture devient plus facile et plus rapide.
  • Des phrases courtes à la voix active, les structures de phrases simples et directes sont plus compréhensibles.

Les mauvaises pratiques

  • Le texte justifié est mal géré par les navigateurs. La justification du texte peut entraîner des difficultés de lecture, en particulier pour les personnes dyslexiques ou souffrant de troubles cognitifs. Il est donc impossible d’en faire.
  • Le texte en italique ou en majuscule est proscrit du fait de sa difficulté à le lire. Pour information, quand le texte est en majuscule, le lecteur audio crie.
  • Ne pas surcharger la page avec les mots clefs.

Cette information vous a été utile ?

Articles liés