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,asideefooterper lo scopo per cui sono stati pensati. Quando una pagina ha più di unnav, 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
h1per il titolo e mantieni i livelli in ordine. Unh4subito dopo unh2è 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,oletable, 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
altche 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
figureefigcaptionper didascalie e crediti delle foto.
Su ciascuno schermo
I requisiti WCAG 2.2 AA più importanti per un modello di notizia:
| Requisito | Obiettivo | Criterio |
|---|---|---|
| Contrasto del testo | 4,5:1, oppure 3:1 per il testo grande | 1.4.3 |
| Ridimensionamento del testo | Fino al 200% senza perdere nulla | 1.4.4 |
| Reflow | 320 pixel CSS di larghezza senza scorrimento orizzontale | 1.4.10 |
| Focus visibile | Un indicatore di focus da tastiera visibile | 2.4.7 |
| Focus non oscurato | Il focus non è mai nascosto del tutto | 2.4.11 |
| Dimensione dell'area di tocco | Almeno 24 per 24 pixel CSS | 2.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,linkedescription. - Dai a ogni elemento un
guidstabile e usa il permalink quando puoi. - Scrivi
pubDatenel formato RFC 822 mostrato qui. - Usa URL canonici degli articoli.
- Mantieni breve
descriptione lascia fuori il testo a pagamento. - Aggiungi un link di individuazione nell'
headdi 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
langall'elementohtmlin ogni lingua. - Aggiungi un link per saltare e un solo landmark
maina ogni modello. - Etichetta ogni
naveaside. - Esegui un controllo dello schema dei titoli sul tuo modello di articolo.
- Verifica il testo
altnel 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
NewsArticlecon date che corrispondono alla pagina. - Convalida il tuo feed e verifica che invii
ETagoLast-Modified.
Fonti
- Page Regions, W3C WAI
- Headings, W3C WAI
- Decorative Images, W3C WAI
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute, W3C WAI
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C
- Directive (EU) 2019/882 on the accessibility requirements for products and services, Official Journal of the EU, Publications Office
- Learn About Article Schema Markup, Google Search Central
- Add a Byline Date to Google Search Results, Google Search Central
- RSS 2.0 specification, RSS Advisory Board
- RSS autodiscovery, RSS Advisory Board
- RFC 9110: HTTP Semantics, IETF