Strutturare la pagina con tag HTML che dicono il loro ruolo
Descrizione
Questo criterio verifica che il codice della tua pagina indichi il ruolo di ogni parte. iPand controlla tre punti: un elemento <main> (o role="main") e almeno due elementi tra <header>, <nav> e <footer>; almeno metà del testo principale in elementi di testo (paragrafi, elenchi, titoli, celle di tabella, citazioni, didascalie); un attributo lang valido (BCP 47) su <html>.
Il secondo punto non è valutato quando il testo principale ha meno di 100 parole.
Perché è importante per le AI
I tag semantici separano il contenuto principale dall’intestazione, dal menu e dal piè di pagina, e dicono cos’è ogni blocco: paragrafo, elenco, tabella. Un programma che legge il codice individua così il testo utile della pagina senza doverlo indovinare dall’impaginazione.
- <main> distingue il contenuto proprio della pagina da ciò che si ripete su tutto il sito.
- Un testo in paragrafi ed elenchi si suddivide in modo più netto di un testo inserito in <div> senza ruolo.
- Secondo il W3C, l’attributo lang serve ai motori di ricerca, agli strumenti di traduzione e alle sintesi vocali.
Come correggere
- 1 Delimita le zone principali della pagina Racchiudi il contenuto proprio della pagina in un solo elemento <main>, l’intestazione del sito in un <header>, il menu in un <nav> e il piè di pagina in un <footer>. Se il tuo tema usa solo dei <div>, chiedi al tuo sviluppatore o all’autore del tema di sostituirli.
- 2 Scrivi il testo in paragrafi ed elenchi Inserisci ogni paragrafo in un <p>, gli elenchi in <ul> o <ol> con un <li> per voce, i dati confrontabili in una <table>. Evita il testo inserito direttamente in <div> o <span>: almeno metà del testo principale deve trovarsi in elementi di testo.
- 3 Dichiara la lingua della pagina Aggiungi l’attributo lang al tag <html> con un codice BCP 47: lang="it" per l’italiano, lang="it-CH" per l’italiano della Svizzera, lang="en" per l’inglese. Su un sito in più lingue, ogni versione dichiara la propria lingua.
- 4 Verifica la struttura Nello strumento di ispezione del browser, individua gli elementi <main>, <header>, <nav> e <footer>, poi l’attributo lang del tag <html>. Controlla anche che il testo principale si trovi in <p> e <li> piuttosto che in <div>.
In breve
Zone con un nome, un testo in paragrafi e una lingua dichiarata rendono la pagina leggibile senza indovinarne l’impaginazione. iPand verifica ogni giorno questi tre punti nel codice della pagina.
