Vai al contenuto
Mera News

Guida per gli editori, capitolo 6

Dati per screen reader e macchine

Ultima revisione novembre 2026

Uno screen reader, un motore di ricerca e un lettore di feed dipendono tutti da come è strutturato il tuo sito. Un HTML chiaro, dati strutturati e un feed pulito danno a ciascuno ciò di cui ha bisogno.

Parti dall'HTML

Questi elementi danno alla pagina i suoi punti di riferimento, così chi usa uno screen reader può saltare direttamente all'articolo.

<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>
  • Landmark: Usa header, nav, main, aside e footer per lo scopo per cui sono stati pensati. Quando una pagina ha più di un nav, etichetta ciascuno.
  • Link per saltare: Permette a chi usa la tastiera di superare la navigazione ripetuta, e aiuta a rispettare il criterio di successo 2.4.1 delle WCAG. Rendilo visibile quando riceve il focus.
  • Titoli: Usa un solo h1 per il titolo e mantieni i livelli in ordine. Un h4 subito dopo un h2 è il tipo di salto da evitare. Scegli un titolo in base al suo posto nello schema, mai in base alla sua dimensione.
  • Elenchi e tabelle: Usa veri elementi ul, ol e table, così la loro struttura può essere letta dai software (criterio di successo 1.3.1).

Lingua

Imposta lang sull'elemento html in ogni lingua (criterio di successo 3.1.1). Senza, uno screen reader può leggere il tuo articolo con la voce sbagliata. Segna anche i passaggi in un'altra lingua (criterio di successo 3.1.2).

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

Immagini

  • Scrivi un testo alt che dia al lettore ciò che l'immagine aggiunge alla storia.
  • Usa alt="" per le immagini puramente decorative. Non omettere l'attributo, perché alcuni screen reader leggeranno ad alta voce il nome del file.
  • Usa sfondi CSS per la pura decorazione, quando puoi.
  • Usa figure e figcaption per didascalie e crediti delle foto.

Su ciascuno schermo

I requisiti WCAG 2.2 AA più importanti per un modello di notizia:

RequisitoObiettivoCriterio
Contrasto del testo4,5:1, oppure 3:1 per il testo grande1.4.3
Ridimensionamento del testoFino al 200% senza perdere nulla1.4.4
Reflow320 pixel CSS di larghezza senza scorrimento orizzontale1.4.10
Focus visibileUn indicatore di focus da tastiera visibile2.4.7
Focus non oscuratoIl focus non è mai nascosto del tutto2.4.11
Dimensione dell'area di toccoAlmeno 24 per 24 pixel CSS2.5.8

Su mobile, prova con VoiceOver o TalkBack e con l'impostazione del testo più grande. Su desktop, percorri la pagina usando solo i tasti Tab, Invio ed Esc.

Pubblica una dichiarazione di accessibilità che dica cosa rispetti, cosa non ancora e come segnalare un problema.

L'European Accessibility Act

La direttiva (UE) 2019/882 si applica ai servizi elencati forniti ai consumatori dopo il 28 giugno 2025. L'elenco comprende i servizi di commercio elettronico, gli e-book e i servizi che danno accesso a media audiovisivi. I servizi di commercio elettronico sono definiti come servizi forniti a distanza, tramite siti web e servizi basati su dispositivi mobili, su richiesta di un consumatore per concludere un contratto. Le microimprese che forniscono servizi sono esentate.

L'Act non elenca come tali i siti di notizie. Un sito che vende abbonamenti online, oppure e-book o accesso a video, può comunque rientrarvi, e le leggi nazionali aggiungono dettagli. Verifica la tua posizione con un consulente.

Dati strutturati per gli articoli

Il markup NewsArticle aiuta Google a capire la pagina. La guida di Google dice che non ci sono proprietà obbligatorie, quindi aggiungi quelle che si applicano.

<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>
  • Usa date ISO 8601 con un fuso orario.
  • Mantieni le date nel markup uguali a quelle sulla pagina e mostrale con un'etichetta come «Pubblicato» o «Ultimo aggiornamento».
  • Fornisci immagini in 16x9, 4x3 e 1x1, ciascuna di almeno 50.000 pixel quando si moltiplicano larghezza e altezza.
  • Usa immagini editoriali, mai il tuo logo.
  • Mantieni lo stesso markup su mobile e desktop.

Un feed RSS pulito

Il tuo feed è la versione leggibile dalle macchine più semplice del tuo sito, e sei tu a decidere esattamente cosa contiene.

<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>
  • Ogni canale richiede title, link e description.
  • Dai a ogni elemento un guid stabile e usa il permalink quando puoi.
  • Scrivi pubDate nel formato RFC 822 mostrato qui.
  • Usa URL canonici degli articoli.
  • Mantieni breve description e lascia fuori il testo a pagamento.
  • Aggiungi un link di individuazione nell'head di ogni pagina.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Invia le intestazioni ETag o Last-Modified e rispondi 304 Not Modified quando If-None-Match o If-Modified-Since di un lettore di feed mostrano che nulla è cambiato. Così le richieste frequenti costano poco al tuo server.

Checklist

  • Aggiungi lang all'elemento html in ogni lingua.
  • Aggiungi un link per saltare e un solo landmark main a ogni modello.
  • Etichetta ogni nav e aside.
  • Esegui un controllo dello schema dei titoli sul tuo modello di articolo.
  • Verifica il testo alt nel tuo CMS e rendilo un campo obbligatorio per le immagini editoriali.
  • Controlla il contrasto di link, didascalie e firme.
  • Prova con la tastiera e con VoiceOver o TalkBack.
  • Pubblica una dichiarazione di accessibilità con un indirizzo di contatto.
  • Chiedi a un consulente se l'European Accessibility Act si applica ai tuoi servizi.
  • Aggiungi JSON-LD NewsArticle con date che corrispondono alla pagina.
  • Convalida il tuo feed e verifica che invii ETag o Last-Modified.

Fonti