headings, seconda parte

A questo punto non resta che usarli, questi titoli. È necessario però aprire un inciso, perché la questione in una pagina HTML può essere insidiosa. Nel senso, se la pagina è semplice nessun problema: basterà usare la semantica degli elementi <hn> per delineare la struttura logica del contenuto, da <h1> a <h6> in ordine di importanza (anche se è consigliabile non oltrepassare il livello <h3>).

Però, HTML non prevede elementi specifici per la navigazione, entra in un qualche dettaglio riguardo le interfacce soltanto per i moduli. Per costruire la navigazione è consuetudine usare elenchi non ordinati di link, a cui vengono applicati stili CSS opportuni per ottenere una varietà di rappresentazioni: orizzontali, verticali, a pulsantiera con effetti rollover o meno, e così via. E anche queste liste avranno un titolo.

Inoltre, se vogliamo creare una struttura logica della pagina che sia veramente rappresentativa e accessibile, dobbiamo considerare alcune cose.

HTML ci dice:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Inoltre, una buona regola di accessibilità funzionale ci dice:

Navigation Bars

Each ol or ul element that appears to be a navigation bar or menu should be immediately preceded by a header element (h2..h6).
FAE considers a list of links to be a navigation bar or menu. A list of links is defined as an ol or ul element where each li element (with one exception allowed) has as its sole content either a single text link (a element) or a nested list of links.

Poi abbiamo un problema un po’ spinoso, h1.
Occorre sapere che quando un utente legge la pagina con uno screen reader il primo elemento letto è <title>, ovvero il testo che compare nella barra del titolo della finestra del browser.

Purtroppo è frequente vedere siti che trascurano del tutto questo elemento importantissimo, invece, per fornire contesto all’utente. Oltre a questo, c’è anche un altro elemento di ambiguità: molte volte <title> e <h1> coincidono, e non variano per tutto il sito. Vi immaginate che due palle[1. Il termine usato dall’amico citato in seguito era ben più colorito e circostanziato] sentirsi leggere sempre la stessa cosa mille volte volte, senza poterne ricavare informazioni utili per comprendere la propria posizione e avere un’idea del contenuto della pagina? D’altra parte, è giusto che il contenuto di questi due elementi in parte coincida, il primo fornirà il contesto e il secondo una più ampia descrizione del contenuto. Però, non è corretto che siano identici, è un’informazione del tutto ridondante e ripetitiva.

Una volta ho chiesto a un amico cieco come si regolasse quando arriva su una pagina Web che non conosce. Semplice, mi dice lui. Faccio come quando vado in un albergo, percorro i muri pian piano cercando di non sbattere e cerco di memorizzare la posizione dei mobili e delle porte.

Ecco, i titoli dovrebbero essere i cartelli che identificano le stanze del contenuto dell’intera pagina.

Tornando a quanto accennato in precedenza, in una pagina Web non abbiamo soltanto dei contenuti, testo o grafica che siano: ci sono anche gli elementi che servono a fruire di tutto il sito, per esempio i link che disposti negli elenchi non ordinati ci permettono di cambiare pagina. “A link is a connection from one Web resource to another”, dice HTML. Sì, lo sappiamo, è l’elemento che caratterizza il Web.

Ogni elenco non ordinato, o qualsiasi altro tipo di elenco, utilizzato per creare una barra di navigazione dovrebbe avere un suo titolo.

È contenuto? Difficile rispondere. Verrebbe da dire no, non ha niente a che fare con il “contenuto” della pagina, non leggo la barra di navigazione come se fosse il testo dell’articolo. Però in HTML, diversamente dai nuovi linguaggi di markup che stanno nascendo, non esiste un elemento <navigazione>, o qualcosa di analogo. C’era in HTML 3.2, non capirò mai perché l’hanno tolto in HTML4. Quindi dovrò usare anche per la navigazione gli stessi elementi che utilizzo per i contenuti. Per preservare la semantica ci verranno in aiuto l’elemento <div> e l’attributo id.

Quindi il flusso degli <hn> dei vari blocchi funzionali della pagina può essere considerato separatamente? Sì. In un documento HTML abbiamo a che fare con due tipi di struttura: una è quella logica del contenuto, l’altra è la struttura (tree) dell’intero documento HTML, come DOM prescrive. Dobbiamo descriverle contemporaneamente entrambe perché interfaccia e contenuto sono nella stessa pagina, e fare in modo che quando la pagina viene rappresentata senza stili o con Document Map (oppure, se utilizzate il W3C Validator attivate la casella di controllo Show Outline che appare in fondo alla finestra se fate clic su More Option, oppure ancora utilizzate il Semantic Data Extractor del W3C, e osservate il vostro outline e altre interessanti informazioni sulla vostra pagina, oppure un’altra volta se avete installato la Accessibility Toolbar per Firefox fate clic su Navigation > Headings) i titoli forniscano una semplice comprensione “al volo” della pagina. Proprio come fanno i titoli sulla carta stampata, avete presente?

A questo punto, è lecito riprendere la numerazione dei livelli nel tree? Sì, penso proprio di sì. Non è certo un errore utilizzare più <h2>, o elementi successivi, nel documento per delineare le diverse sezioni della pagina. E come la mettiamo con h1?
Sono indeciso. Da un lato, è il livello radice, il primo in assoluto. Però, non è il nome del sito, è il titolo principale del documento corrente. E in siti come questo, il titolo principale del documento corrente non è il titolo del post? Se uso <h1> invece di <h2> vado contro le regole di HTML? Eppure a me sembra proprio che ogni post dovrebbe avere come titolo <h1>. Ci penserò ben bene.

Inoltre, da un punto di vista accessibilità, perché uno se lo deve sentir ripetere a ogni pagina se c’è già nel <title>? A parte la noia, non viene fornita alcuna informazione utile.

Su questo angosciante quesito, chiudo la seconda parte con un link a un sito che a me piace molto, Web Usability. Il suo albero dei titoli appare così:

home page del sito webusability

Quello che normalmente viene descritto con <h1>, il nome del sito, qui è un div con id “logo”, e <h1> è il titolo della sezione che serve a introdurre i contenuti delle sezioni del sito. Non so, secondo me c’è da pensare. E ancora una volta l’accessibilità obbliga a migliorare la qualità del sito, fornisce contesto al design e ci regala motivi di riflessione.

E dire che i titoli sembravano una cosa così semplice.

Annunci

7 pensieri su “headings, seconda parte

  1. Pingback: <headings>, prima parte | biroblu

  2. Sai, secondo me entra in gioco anche un’altra cosa in questo caso: la SEO.
    Infatti dipende molto anche dagli obiettivi del sito, se si vuole “pompare” sul nome del sito tramite l’h1 o se si vuole dare maggiore importanza ai titoli degli articoli.

    Ad esempio wordpress, con “all in seo pack” ci insegna che la pagina che parla di un determinato argomento avrà già il title che entra subito in argomento, pertanto ribadire poi con un h1 il titolo del sito può essere utile in questo caso, ma poi per i “vedenti” ripetere il titolo dell’articolo con un h2 diventa poi indispensabile, seppur ridondante per i non vedenti.

    Meglio ripetere le cose che ometterle, secondo me 🙂

    Ottimo articolo!

  3. Ma io mica dicevo di togliere qualcosa, o forse non ho capito bene cosa intendi. Nel senso, un h1 statico, uguale su tutte le pagine del sito, non funziona nemmeno da un punto di vista SEO. Anzi, questo tizio suggerisce proprio quel che dicevo io: http://tiny.cc/liAyu

    “Change your static H1 into something dynamic that matches your current post. If you’re currently using H2 for that, change H1 to a DIV class and change H2 to H1″

    Cioè, per l’ennesima volta l’accessibilità migliora anche la SEO 🙂

  4. Pingback: Codice semantico e accessibilità: headings II by Livio | Italian webdesign

  5. infatti non avevo inteso che tu volessi togliere alcunchè.
    volevo solo sottolineare l’importanza dell’h1 dato che il title e h2 assolverebbero alla stessa funzione, in una pagina interna 😉

  6. Pingback: Cambio il web - il blog» Blog Archive » MICROFORMATS, empowering tour markup for web 2.0 di John Allsopp (2007)

  7. Pingback: MICROFORMATS, empowering your markup for web 2.0 di John Allsopp (2007) | Maurizio Petrelli

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...