Perché dovresti scegliere l’articolo HTML5 rispetto alla sezione

About The Author

Bruce si occupa di accessibilità, standard web e browser dal 2001. Ecco perché ha un aspetto così brutto. Puoi seguirlo su @brucel, o leggere il suo …Altro suBruce↬

Qualche giorno fa, stavo facendo una chiacchierata con alcuni amici, uno dei quali mi ha chiesto la differenza tra <article> e <section> in HTML. Questo è uno degli eterni misteri dello sviluppo web, lassù con “perché è white-space: nowrap, non white-space: no-wrap?” e “perché il CSS ‘gray’ è un colore più scuro di ‘darkgray’?”.

Ho dato la mia solita risposta: pensate a <article> non solo come un articolo di giornale, o un post di blog, ma come un articolo di abbigliamento – un’entità discreta che può essere riutilizzata in un altro contesto. Così i vostri pantaloni sono un articolo, e potete indossarli con un vestito diverso; la vostra camicia è un articolo, e può essere indossata con pantaloni diversi; i vostri stivali a spillo di vernice al ginocchio sono un articolo (non ne indossereste solo uno, vero?).

Le specifiche dicono:

“L’elemento article rappresenta una composizione completa, o autocontenuta, in un documento, pagina, applicazione o sito e che è, in linea di principio, distribuibile o riutilizzabile indipendentemente, ad esempio in syndication. Questo potrebbe essere un post di un forum, un articolo di una rivista o di un giornale, un post di un blog, un commento inviato dall’utente, un widget interattivo o un gadget, o qualsiasi altro elemento indipendente di contenuto.”

Quindi una homepage con una lista di post del blog sarebbe un elemento <main> che avvolge una serie di elementi <article>, uno per ogni post del blog. Usereste la stessa struttura per una lista di video (pensate a YouTube) con ogni video avvolto in un <article>, una lista di prodotti (pensate ad Amazon) e così via. Ognuno di questi <article> è concettualmente sindacabile – ognuno potrebbe stare da solo nella sua pagina dedicata, in una pubblicità su un’altra pagina, come voce in un feed RSS, e così via.

WatchOS di Apple contiene Reader che utilizza l’elemento <article> per conoscere il contenuto primario della vostra pagina. Apple dice:

“Abbiamo portato Reader in watchOS 5 dove si attiva automaticamente quando si seguono i link a pagine web con molto testo. È importante assicurarsi che Reader metta in evidenza le parti chiave della vostra pagina web utilizzando il markup semantico per rafforzare il significato e lo scopo degli elementi nel documento. Facciamo un esempio. Per prima cosa, indichiamo quali parti della pagina sono le più importanti avvolgendole in un tag articolo.”

Combinando <article> con i microdati HTML5 aiuta Reader a costruire la visualizzazione ottimale per i piccoli schermi degli orologi:

“In particolare, racchiudendo questi elementi di intestazione all’interno dell’articolo si assicura che appaiano tutti in Reader. Reader inoltre stilizza ogni elemento di intestazione in modo diverso a seconda del valore del suo attributo itemprop. Utilizzando itemprop, siamo in grado di garantire che l’autore, la data di pubblicazione, il titolo e il sottotitolo siano ben visibili.”

E allora che dire di <section>?

Il mio solito consiglio continua: non preoccupatevi di <section> o preoccupatevi di come differisce da <article>. È stato inventato come un involucro generico per le intestazioni in modo che il browser potesse determinare il contorno del documento HTML5.

Il cosa? L’algoritmo di contorno del documento è un modo per usare un solo tag di intestazione – <h1> – e farlo magicamente “diventare” il corretto livello di intestazione (per esempio trasformarsi in un <h2><h3>, ecc.), a seconda di quanto profondamente è annidato negli elementi di sezionamento HTML5:<article><section>, e così via.

Quindi, per esempio, ecco cosa avete digitato nel vostro CMS:

<h1>My Fabulous article</h1><p>Lorem Ipsum Trondant Fnord</p>

Questo funziona brillantemente quando viene mostrato come articolo a sé stante. Ma che dire della vostra homepage, che è una lista dei vostri ultimi articoli?

<h1>My latest posts</h1><article> <h1>My fabulous article</h1> <p>Lorem Ipsum Trondant Fnord</p></article><article> <h1>Another magnum opus</h1> <p>Magnum solero paddle pop</p></article>

In questo esempio, secondo le specifiche, i <h1> all’interno degli elementi <article> “diventano” logici <h2>, perché <article>, come <section>, è un elemento di sezionamento.

Nota: Questa non è un’idea nuova. Nel lontano 1991, Sir Uncle Timbo scrisse:

“Preferirei infatti, invece di <h1><h2>, ecc. per le intestazioni di avere un elemento nestabile <SECTION></SECTION>, e un generico <H></H> che a qualsiasi livello all’interno delle sezioni produrrebbe il livello richiesto di Heading.”

Purtroppo, però, nessun browser implementa l’HTML5 outlining, quindi non ha senso usare <section>. Ad un certo punto, il lettore di schermo JAWS ha tentato di implementare l’algoritmo di outlining del documento (in IE, ma non su Firefox), ma lo ha implementato in modo buggato. Sembra che gli sviluppatori di browser semplicemente non siano interessati (ulteriori sordidi dettagli nella sezione Further Reading per i veri anoraks).

“Ma,” ha interposto un altro amico nella conversazione, “ora i browser visualizzano font di dimensioni diverse a seconda di quanto profondamente il <h1> è annidato nei <section>s”, e ha continuato a provarlo. Mind blown!

Ecco una demo simile. La colonna di sinistra mostra quattro <h1>, annidati in sezioni; la colonna di destra mostra un, <h1><h2><h3><h4> senza annidamento. Lo screenshot di Firefox mostra che i <h1> annidati hanno lo stesso carattere dei tag tradizionali <h1><h4>:

I risultati sono gli stessi in Chrome, derivati di Chromium come Edge beta per Mac, e Safari su Mac.

Quindi questo significa che dovremmo tutti felicemente iniziare ad usare <h1> come unico elemento di intestazione, annidandolo in <section>s?

No. Perché questo è solo un cambiamento nello stile visivo degli h1. Se apriamo l’ispettore dell’accessibilità di Firefox in devtools, possiamo vedere che il testo “livello 2” è stilizzato per sembrare un H2, ma è ancora impostato a “livello 1” – l’albero dell’accessibilità non è stato modificato per essere di livello 2.

Confronta questo con il vero H2 nella colonna di destra:

Questo mostra che l’albero dell’accessibilità è stato correttamente informato che questo è un titolo di livello 2. In effetti, Mozilla ha provato a comunicare il livello calcolato all’albero dell’accessibilità:

“Abbiamo sperimentato un po’ con questo… ma abbiamo dovuto rinunciare perché le persone del nostro team a11y si lamentavano di troppe regressioni (abbassando accidentalmente <h1> i livelli e così via).”

Per gli utenti di tecnologie assistive, una corretta gerarchia dei titoli è vitale. Come mostra l’ottavo sondaggio WebAIM sugli utenti di screenreader,

“L’utilità di strutture di intestazione adeguate è molto alta, con l’86,1% degli intervistati che trovano i livelli di intestazione molto o abbastanza utili.”

Pertanto, si dovrebbe continuare ad usare <h1> fino a <h6>, e ignorare section.

Mai dire mai

“Ma…” potreste ora balbettare indignati, “c’è un elemento <section> proprio in questa pagina! E avresti ragione, caro lettore. Il “riassunto rapido” è avvolto in un <section>, per ragioni di accessibilità. Quando l’utente di screen reader Léonie Watson ha tenuto il suo webinar “How A Screen Reader User Accesses The Web”, ha indicato un’area in cui il markup di Smashing Magazine potrebbe essere modificato per rendere la sua esperienza migliore.

Come si può vedere dallo screenshot, gli articoli di Smashing sono preceduti da un rapido riassunto, seguito da una linea orizzontale che separa il riassunto dall’articolo vero e proprio.

Ma il separatore è puramente decorativo, quindi Léonie non riusciva a capire dove finisce il sommario e inizia l’articolo. Ha suggerito una soluzione: abbiamo avvolto il sommario in un elemento <section>:

<section aria-label="quick summary"> Summary text</section>

Nella maggior parte degli screen reader, un elemento <section> non viene annunciato a meno che non abbia un nome accessibile. In questo caso, il testo dell’etichetta aria. Ora, il suo lettore di schermo ha annunciato “Regione riassuntiva veloce”, e dopo il riassunto “Regione riassuntiva veloce fine”. Questo semplice markup rende anche possibile per un utente di screen reader di saltare il sommario se lo desidera.

Avremmo potuto usare un semplice <div> ma poi, come scrive Marco Zehe,

“Come regola generale, se etichettate qualcosa tramite aria-label o aria-labelledby, assicuratevi che abbia un widget appropriato o un ruolo di riferimento.”

Quindi, piuttosto che usare <div role=”region” aria-label=”quick summary”>, abbiamo scelto <section> in quanto ha un ruolo built-in di regione e si applica l’infallibile legge di Bruce di ARIA™: built-in batte bolt-on. Bigly.

Conclusione

urtroppo, siete venuti via con questi suggerimenti:

• Non usate un sacco di <h1>s. Fate <h1> il titolo principale della vostra pagina, poi usate <h2><h3><h4>, ecc. in una corretta gerarchia senza saltare i livelli.
• <section> può essere usato con aria-label per segnalare a un utente di screen reader dove inizia e finisce una particolare sottoparte di un articolo. Altrimenti, dimenticatelo, o usate un altro elemento, come <aside aria-label=”quick summary”> o <div role=”region” aria-label=”quick summary”>.
• <main><header><footer> e <nav> sono molto utili per gli utenti di screen reader, e completamente trasparenti per coloro che non usano tecnologie assistive. Quindi usateli.
• <article> non è solo per i post del blog – è per qualsiasi cosa autonoma. Aiuta anche WatchOS a visualizzare correttamente i tuoi contenuti.

Sono grato a Léonie Watson per avermi aiutato a scrivere questo articolo. Qualsiasi errore è totalmente colpa sua.

Altre letture

• “Headings And Sections,” HTML 5.2W3C Recommendation (14 Dec. ’17)Si noti il suo avvertimento: “Attualmente non ci sono implementazioni native conosciute dell’algoritmo di contorno … Pertanto non si può fare affidamento sull’algoritmo di contorno per trasmettere la struttura del documento agli utenti. Gli autori dovrebbero usare il rango dell’intestazione (h1-h6) per trasmettere la struttura del documento.”
• “There Is No Document Outline Algorithm,” Adrian RoselliTutti i dettagli cruenti di come è cambiata la specifica per l’algoritmo di sezionamento.
• “ARIA in HTML,” W3C Editor’s Draft (19 dic. ’19)Regole da seguire se vi trovate ad aggiungere ruoli e attributi ARIA all’HTML.
• The Practical Value Of Semantic HTML,” Bruce LawsonIl mio stesso articolo, che si collega ai dettagli di come WatchOS usa HTML5 e i microdati.

(ra, il)