Aller au contenu
Mera News

Guide de l'éditeur, chapitre 6

Données pour les lecteurs d'écran et les machines

Dernière révision : novembre 2026

Un lecteur d'écran, un moteur de recherche et un lecteur de flux dépendent tous de la structure de votre site. Un HTML clair, des données structurées et un flux propre donnent à chacun ce dont il a besoin.

Partir du HTML

Ces éléments donnent à une page ses repères, pour qu'un utilisateur de lecteur d'écran puisse aller directement à l'article.

<html lang="en">
<body>
  <a href="#main">Skip to the article</a>
  <header>
    <nav aria-label="Main">...</nav>
  </header>
  <main id="main">
    <article>
      <h1>Article headline</h1>
      <p>By <a href="/authors/jane-doe">Jane Doe</a></p>
      <p><time datetime="2026-11-05T08:00:00+01:00">Published 5 November 2026</time></p>
      <h2>First section</h2>
      <p>Article text.</p>
    </article>
    <aside aria-label="Related articles">...</aside>
  </main>
  <footer>...</footer>
</body>
</html>
  • Repères : utilisez header, nav, main, aside et footer pour ce pour quoi ils existent. Quand une page comporte plusieurs nav, étiquetez chacun.
  • Lien d'évitement : il permet aux utilisateurs du clavier de passer la navigation répétée, ce qui aide à respecter le critère de succès 2.4.1 de WCAG. Rendez-le visible au focus.
  • Titres : utilisez un seul h1 pour le titre de l'article et gardez les niveaux dans l'ordre. Un h4 juste après un h2 est le genre de saut à éviter. Choisissez un niveau de titre selon sa place dans le plan, jamais selon sa taille.
  • Listes et tableaux : utilisez de vrais éléments ul, ol et table, pour que leur structure soit lisible par les logiciels (critère de succès 1.3.1).

Langue

Définissez lang sur l'élément html dans chaque version linguistique (critère de succès 3.1.1). Sans cela, un lecteur d'écran peut lire votre article avec la mauvaise voix. Signalez aussi les passages dans une autre langue (critère de succès 3.1.2).

<p>The minister called it <span lang="fr">une erreur historique</span>.</p>

Images

  • Rédigez un texte alt qui apporte au lecteur ce que l'image ajoute à l'article.
  • Utilisez alt="" pour les images purement décoratives. N'omettez pas l'attribut, car certains lecteurs d'écran liront le nom du fichier à voix haute.
  • Utilisez des arrière-plans CSS pour la décoration pure quand vous le pouvez.
  • Utilisez figure et figcaption pour les légendes et les crédits photo.

Sur chaque écran

Les exigences WCAG 2.2 AA qui comptent le plus pour un modèle d'article :

ExigenceObjectifCritère
Contraste du texte4,5:1, ou 3:1 pour le grand texte1.4.3
Redimensionnement du texteJusqu'à 200 % sans rien perdre1.4.4
Réorganisation320 pixels CSS de large sans défilement horizontal1.4.10
Focus visibleUn indicateur de focus clavier visible2.4.7
Focus non masquéLe focus n'est jamais entièrement caché2.4.11
Taille des ciblesAu moins 24 sur 24 pixels CSS2.5.8

Sur mobile, testez avec VoiceOver ou TalkBack, et avec le réglage de texte le plus grand. Sur ordinateur, parcourez la page en utilisant uniquement les touches Tab, Entrée et Échap.

Publiez une déclaration d'accessibilité qui indique ce que vous respectez, ce que vous ne respectez pas encore et comment signaler un problème.

L'Acte européen sur l'accessibilité

La directive (UE) 2019/882 s'applique aux services listés fournis aux consommateurs après le 28 juin 2025. La liste comprend les services de commerce électronique, les livres numériques et les services d'accès aux médias audiovisuels. Les services de commerce électronique sont définis comme des services fournis à distance, par des sites web et des services pour appareils mobiles, à la demande d'un consommateur, en vue de conclure un contrat. Les microentreprises qui fournissent des services sont exemptées.

L'Acte ne mentionne pas les sites d'actualité en tant que tels. Un site qui vend des abonnements en ligne, ou qui vend des livres numériques ou un accès à des vidéos, peut tout de même entrer dans son champ, et les lois nationales apportent des précisions. Vérifiez votre situation avec un conseil.

Données structurées pour les articles

Le balisage NewsArticle aide Google à comprendre la page. Le guide de Google indique qu'aucune propriété n'est obligatoire : ajoutez celles qui s'appliquent.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "datePublished": "2026-11-05T08:00:00+01:00",
  "dateModified": "2026-11-05T09:20:00+01:00",
  "author": [{
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://example.com/authors/jane-doe"
  }]
}
</script>
  • Utilisez des dates ISO 8601 avec un fuseau horaire.
  • Gardez dans le balisage les mêmes dates que dans la page, et affichez-les avec une étiquette comme « Publié » ou « Dernière mise à jour ».
  • Fournissez des images en 16x9, 4x3 et 1x1, chacune d'au moins 50 000 pixels une fois la largeur multipliée par la hauteur.
  • Utilisez des images éditoriales, jamais votre logo.
  • Gardez le même balisage sur mobile et sur ordinateur.

Un flux RSS propre

Votre flux est la version lisible par machine la plus simple de votre site, et vous décidez exactement de ce qu'il contient.

<item>
  <title>Article headline</title>
  <link>https://example.com/news/article-headline</link>
  <guid isPermaLink="true">https://example.com/news/article-headline</guid>
  <pubDate>Thu, 05 Nov 2026 07:00:00 GMT</pubDate>
  <description>One or two sentences that describe the article.</description>
  <category>Politics</category>
</item>
  • Chaque canal a besoin de title, link et description.
  • Donnez à chaque élément un guid stable, et utilisez le permalien quand vous le pouvez.
  • Écrivez pubDate au format RFC 822 montré ici.
  • Utilisez les URL canoniques des articles.
  • Gardez description courte et n'y mettez pas de texte payant.
  • Ajoutez un lien de découverte dans le head de chaque page.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Envoyez des en-têtes ETag ou Last-Modified, et répondez 304 Not Modified lorsque If-None-Match ou If-Modified-Since d'un lecteur de flux montre que rien n'a changé. Les récupérations fréquentes restent ainsi peu coûteuses pour votre serveur.

Liste de contrôle

  • Ajoutez lang à l'élément html dans chaque version linguistique.
  • Ajoutez un lien d'évitement et un seul repère main à chaque modèle.
  • Étiquetez chaque nav et chaque aside.
  • Faites un contrôle du plan des titres sur votre modèle d'article.
  • Auditez les textes alt dans votre CMS et rendez le champ obligatoire pour les images éditoriales.
  • Vérifiez le contraste des liens, des légendes et des signatures.
  • Testez au clavier, et avec VoiceOver ou TalkBack.
  • Publiez une déclaration d'accessibilité avec une adresse de contact.
  • Demandez à un conseil si l'Acte européen sur l'accessibilité s'applique à vos services.
  • Ajoutez du JSON-LD NewsArticle avec des dates qui correspondent à la page.
  • Validez votre flux et confirmez qu'il envoie ETag ou Last-Modified.

Sources