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.
Nessun commento:
Posta un commento