Il primo passo verso la realizzazione di siti internet
accessibili consiste nel comprendere in che modo debbano essere organizzati
i documenti da pubblicare sul Web, ovvero come strutturare e presentare le
informazioni all’interno delle pagine di un sito.

A tal fine, è fondamentale conoscere bene il significato dei
concetti di contenuto, struttura e presentazione,
che sono essenziali per poter lavorare in modo accessibile sugli stili grafici
delle pagine web e sull’organizzazione logica delle informazioni in esse
contenute.

Il contenuto è
rappresentato dalle informazioni fornite da un documento: testi, immagini,
suoni, animazioni, grafici, ecc.

La struttura è la
rappresentazione semantica del contenuto mediante un linguaggio di marcatura
strutturale (es. HTML).

La presentazione
è l’insieme delle informazioni che definiscono lo stile e la formattazione dei
contenuti strutturati: allineamento del testo, colore e sfondo degli elementi,
dimensione dei caratteri, ecc.

I principi dello sviluppo accessibile dei siti web prevedono
che la realizzazione di un sito internet segua il seguente iter:

1. definizione dei
contenuti delle pagine;

2. scrittura del
codice di marcatura che descriva in maniera strutturata i contenuti
eliminando qualsiasi caratteristica di presentazione, o quasi;

3. presentazione dei
documenti mediante fogli di stile CSS.

Il punto 2 è cruciale ai fini dell’accessibilità siti web:
un codice di marcatura ridotto a contenuto strutturato privo di presentazione
consente una fruizione ottimale dei contenuti con browser testuali, screen
reader e dispositivi con schermo piccolo; permette, inoltre, di applicare al
documento un proprio foglio di stile personalizzato, in modo da ottenere una
presentazione accessibile, conforme alle proprie esigenze.

Per ottenere questo, però, è fondamentale che si faccia un uso semantico del codice di marcatura.

Utilizzare il codice di marcatura in modo semantico
significa descrivere i contenuti mediante gli elementi strutturali appropriati
previsti dal linguaggio utilizzato (HTML, XHTML, ecc.): <h1>..<h6>
per i titoli, <p> per i paragrafi, <ul> o <ol> per gli
elenchi, <q> o <cite> per le citazioni, <abbr> per le
abbreviazioni, <acronym> per gli acronimi, <address> per le
informazioni relative ai recapiti, e così via.

Gli elementi strutturali sono riconosciuti nativamente dai browser
anche se non vi sono fogli di stile associati; per esempio, i titoli vengono
rappresentati con caratteri più grandi rispetto ai paragrafi, le voci di elenco
sono segnate con opportuni marcatori, ecc.)

Ai fini dell’accessibilità, è importante, perciò, che gli
sviluppatori delle web agency applichino informazioni strutturali ai
contenuti, in modo che, anche se si elimina del tutto la presentazione affidata
ai fogli di stile, gli elementi essenziali della struttura rimangano visibili e
comprensibili per il lettore.

Sul Web sono numerosissimi i casi di utilizzo scorretto del
codice di marcatura nei siti internet; quelli più comuni riguardano l’uso improprio della formattazione per
simulare graficamente l’aspetto di determinati elementi strutturali, come
intestazioni (titoli e sottotoli), liste (elenchi puntati e numerati),
citazioni, e nell’uso improprio di
tabelle a scopo di impaginazione.

Nel caso dei titoli, ad esempio, capita spesso di trovare
siti web in cui le intestazioni sono realizzate mediante semplici paragrafi
formattati in grassetto e con una dimensione maggiore dei caratteri;
visivamente si ottiene “l’effetto titolo” ma semanticamente restano paragrafi e
ciò si può notare disabilitando i fogli di stile. Per i titoli andrebbero invece
utilizzati i tag di intestazione h1, h2, h3, h4, h4, h5 e h6, rispettando le
opportune gerarchie secondo cui un titolo di livello inferiore deve essere
preceduto necessariamente da uno di livello superiore.

Nel caso delle tabelle a scopo di impaginazione, invece,
viene snaturato il ruolo per il quale le tabelle sono state create, ovvero
impaginare i dati tabellari. I layout dei siti internet andrebbero realizzati
senza l’uso tabelle (layout tableless),
ricorrendo ai giusti marcatori per i contenitori, ovvero i tag <div>, ed
alle informazioni di stile, come float
e position, per disporli sullo
schermo in maniera opportuna.

In questi casi il contenuto delle pagine web risulta privo
di struttura logica e di semantica e diviene di fatto inaccessibile a tutti quegli utenti che non navigano in modalità
grafica, facendo uso, ad esempio, di browser testuali, di screen reader o di
altre tecnologie assistive.

Conoscere bene gli elementi strutturali del codice di
marcatura che si utilizza e farne un uso semantico diviene, quindi, un
presupposto indispensabile per realizzare siti internet accessibili, moderni e
di qualità, il cui contenuto sia davvero usabile da tutti e correttamente
interpretato da qualsiasi browser o tecnologia.