Di conseguenza, ecco che <h1> diventa il nome del sito, e via così. Vale questo comportamento per un sito? Nì. Sembra più una consuetudine, che il frutto di un’analisi.

Da qualsiasi punto di vista si osservi l’outline (semantica, accessibilità, SEO, usabilità, architettura), a me sembra che la scelta di usare <h1> in modo ripetitivo come nome del sito su tutte le pagine sia poco sensata. Sulla home page ok, <h1> è il nome del sito, stabilisce un contesto corretto.

Ma per tutte le pagine successive <h1> dovrebbe essere il titolo che descrive, introduce l’argomento principale (come da definizione, “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”.

Mai più che il nome del sito descrive l’argomento della sezione che introduce. Quindi, per questo sito per ora ho deciso di fare così: nella home il nome del sito è <h1>, mentre per le singole pagine il tag viene attribuito al titolo del post. Mi sembra più pulito e chiaro.

Anche guardando la pagina con Document Map mi sembra tutto più chiaro e significativo, e ho scoperto (sic, era sotto il naso da anni) un illustre sito che fa la stessa cosa.

Ho aggiunto anche degli <h2> nascosti, che servono a introdurre le sezioni a cui si riferiscono, e fine della saga. Per ora…

Appendice

Ma come faccio a farlo con Wordpress?

Giusta domanda. Ci vogliono due header diversi, uno per la home e uno per le pagine singole. Di solito nei template Wordpress il nome del sito è in header.php, poi c’è index.pxp che carica il loop e mostra gli ultimi post, clic sul titolo di un post e questo viene rappresentato in single.php.

Sì, ma come faccio ad avere header diversi in modo da attribuire elementi diversi al nome del sito?

Abbastanza semplice. Basta cercare nella cartella del tema il file che carica il contenuto della home, di solito index.php. Osservando il codice, all’inizio ci sarà certamente una riga simile a questa:

<?php get_header(); ?>

Il nostro obiettivo è fare in modo che single.php (il post) carichi invece di header.php un altro header, in cui il nome del sito non sia marcato <h1>. Nel mio caso ho chiamato questo file header_single.php. È del tutto uguale a header.php, tranne che per il nome del sito ho usato un semplice <p>.

Ok, ma come faccio a caricare questo file? In single.php, ho sostituito la riga precedente con questa:

<?php include(TEMPLATEPATH . '/header_single.php'); ?>

La costante TEMPLATEPATH è una cosa piuttosto interessante, che approfondirò. Ok, magari è una banalità, ma io sono un principiante…

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¹ 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ì:

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.

Perché i titoli, quelli marcati con i tag da <h1> a <h6> in HTML o con i vari stili Titolo n in un word processor sono così importanti per l’accessibilità e per la comprensione del documento? Non basta che siano più grossi ed evidenti? Che cosa sono gli elementi bridge di HTML? Questo ed altro su Rieducational Channel.

Allegato: (in PDF, 380 Kb) Appendice C del volume Cascading Style Sheets – Guida pratica, di Bert Bos e Hakon Wium Lie, ISBN 9788871922829, Addison Wesley 2006, per concessione di Pearson Education Italia.

Li avete visti un miliardo di volte, i titoli. È facile riconoscerli a colpo d’occhio in una pagina. Sono impaginati in modo completamente diverso dal testo normale, di solito più grandi, spaziati.

Si capisce immediatamente a colpo d’occhio che sono dei titoli. Da vocabolario:

tì|to|lo
s.m.
FO
nome o breve frase, anche di fantasia, con cui si indicano l’argomento, il soggetto di uno scritto, di un testo, di un’opera d’arte e sim.| intestazione dei singoli capitoli o delle varie parti di un volume, di partite, di conti, bilanci, registrazioni e sim. (abbr. tit.)

Finché c’è di mezzo la vista, va tutto abbastanza bene. Ma se per un qualsiasi motivo gli attributi grafici non sono visibili? E se non è disponibile nemmeno uno stile di default? Diventa una bella lotta trovare i titoli, e soprattutto è impossibile identificarne la gerarchia (come distinguere un Titolo1 da uno di secondo livello se la formattazione è assente?).

Invece, come è facile capire l’organizzazione degli argomenti del documento se la titolazione è visibile e chiara. Ma un computer, o uno screen reader, come può ricavare queste informazioni di logica intrinseca da un documento se non sono esplicitamente dichiarate?

Questo non vale soltanto per i documenti HTML, bensì per qualsiasi documento riprodotto elettronicamente. Che succede a un documento quando viene caricato, per esempio, in Windows? Perché si dice che è accessibile, o meno?

Provate a riflettere un attimo. Forse avete sentito dire che i ciechi con un PC possono leggere. Sembra quasi una banalità, ma non è straordinario? Però, leggere è una cosa, riuscire a comprendere il testo un’altra. Per comprendere il testo, la prima cosa necessaria è una corretta strutturazione logica dei titoli. Poiché il PC non può dedurre questa struttura guardando il documento (un PC è cieco, non dimentichiamolo), l’unico modo possibile per dirgliela è marcare esplicitamente con dei flag questi elementi informativi. Come si fa? con i tag, appunto. Anche se non è correttissimo, possiamo far finta che gli elementi <hn > di XHMTL e gli stili di paragrafo predefiniti per i titoli di un qualsiasi programma di gestione dei testi siano analoghi. userò i tag perché mi viene più semplice, ma il ragionamento può essere trasposto, perché per ora ci interessa capire come funziona questo meccanismo che permette a un PC di capire quali siano i titoli e di conseguenza estrarli dal testo normale e renderli navigabili.

Piccolo esperimento pratico. Se non l’avete, scaricate Jaws dal sito di Freedom Scientific, oppure Firevox se usate Firefox, o un qualsiasi screen reader. Se usate Firefox, scaricate l’addon Document Map e installatelo (servirà per tante cose). Inoltre, scaricate gli Active Accessibility 2.0 SDK Tools dal sito Microsoft, se usate Windows. Se usate Firefox, potete anche scaricare (lo consiglio) l’addon Firefox Accessibility Extension.

Tutti questi strumenti permettono di fare molte cose, ma per ora ce ne interessa una soltanto: usarli per capire perché i titoli sono così importanti.

Per esempio, se avete installato Document Map, andate su un sito che conoscete bene e in Firefox fate Visualizza>Barra laterale Document Map. Sulla sinistra della finestra, dovrebbe apparire una struttura ad albero che rappresenta l’indice del documento corrente, in cui la gerarchia dei titoli viene rappresentata con dei rientri.

Se il tree è vuoto, meditate . Se è visibile, provate a verificare se effettivamente i titoli rispecchiano il contenuto e possono essere di aiuto oltre che alla comprensione anche alla navigazione della pagina. Per esempio il tree di questo sito non è un granché, lavorerò per renderlo più efficace. Corollario: l’accessibilità aumenta la qualità del vostro sito, per tutti gli utenti.

I titoli mostrati in Document Map sono navigabili, dopo qualche clic cominciate a sospettare dove voglio arrivare? Ora provate a installare e usare un po’ gli Active Accessibility 2.0 SDK Tools e spiate cosa sta facendo Windows.
Il seguito alla prossima puntata, dopo un po’ di esperimenti.

Se avete fegato, potete anche provare a guardare le vostre pagine con Amaya 10. Oltre a essere diventato decisamente più stabile, il menu Viste di questo browser/editor permette di osservare il documento in due finestre, una con l’anteprima del sito, l’altra con viste alternative. Fra queste, Mostra sommario è quella adatta a questo argomento.

(continua in Headings, seconda parte)