headings, prima parte

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.

Interfaccia di Document Map

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.

Active Accessibility Event Tester in azione

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)

Annunci

15 pensieri su “headings, prima parte

  1. beh… tratti argomenti usando un linguaggio che è particolare, dato gli argomenti, ma per chi non se ne intende è come se dialogassero un cinese e un arabo, per fare una metafora …
    🙂 non è una critica, è il mio impatto…che sono una che di questi argomenti non se ne intende, al massimo riesco a manipolare un pò l’htlm del mio blog, provando e riprovando a tentativi.

    Ma dato che sono qui e che da alcune ore mi sto dannando ad un problema con un file, chissà se mi puoi svelare tu l’arcano?

    Vorrei capire perchè dopo aver caricato delle immagini prese da Google earth, facendo copia dalla videata di Google earth, e incollando direttamente su file Power point… le immagini al mio Macintosh si vedono in tutto il file power point composto…invece al computer PC al Ministero, dove oggi ho consegnato il lavoro, NON SI VEDONO….cliccando sopra si vede solo la forma del riquadro e bianco…. e data la scadenza imminente … non mi resta che piangere! perchè riprendere tutte quelle immagini da Google Earth è da infarto!

    😦

    Phil

  2. Infatti in un altro file ho fatto salva immagine e poi le ho caricate sul power point e poi si vedeva tutto sia al Mac che al PC.
    Invece nel secondo file, per accorciare i tempi ho fatto copia immagine e poi ho incollato nel file senza salvare prima l’immagine: credo sia lì l’intoppo: strano però che sul mio computer vedo tutto e altrove e al PC no!
    Poi, per risolvere nel pomeriggio, ho pensato di salvare in pdf e si vede tutto perchè l’ho bloccato…
    Grazie cmq della consulenza: prima mi hai regalato gli “effetti” in Second life, adesso ho ricevuto pure consulenza tecnica: mi sento un pò sfruttatrice…
    Grazie ancora
    Phil

  3. Pingback: Codice semantico e accessibilità | Italian webdesign

  4. Tu nel post Livio scrivi:

    “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?”

    Ci sono casi in cui gli h* vengono nascosti e fatti passare per testo normale, e credo che quello sia anche peggio di nessuno stile.

  5. Se vengono nascosti via CSS e su una pagina Web poco male, sono comunque disponibili (però qui siamo alla seconda parte :-). Non ho capito però cosa intendi con “fatti passare per testo normale”. Significa usati per formattare testo normale in modo che sia più grande? Se sì, è ovvio che si tratta di un gigantesco errore.

  6. Pingback: <headings>, seconda parte | biroblu

  7. Si beh…potrebbero anche essere ridimensionati e settati a tal punto da figurare nel browser come testo normale….ma a parte il fatto che non ne vedo davvero lo scopo (a questo punto non metti nemmeneno i tag h* se il risultato è lo stess no??), è un’operazione che fai tramite css, quindi a parte per il lettore comune, che si affida alla grafica renderizzata dal browser, il codice interpretato dai vari tool per l’accessibilità sarebbe “salvo”…con tutti i suoi h*, ul, etcetc….

    Ciaociao! Bell’articolo!

  8. Si riferiva a una dubbia tecnica che cerca di sfruttare un comportamento di google, che assegna valore agli elementi .
    Ti ringrazio, va che c’è anche la parte due e tre 🙂

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

  10. Pingback: Navigare il Web con lo screen reader: Giuseppe, i suoi esperimenti e la fondamentale importanza dei titoli | biroblu

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...