Siti internet accessibili: uso semantico del codice di marcatura

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.

Accessibilità siti web: come migliorare la navigazione dei siti internet

Progettare e realizzare siti internet di qualità richiede conoscenze e capacità che non possono non includere due aspetti fondamentali del web design moderno: accessibilità siti web ed usabilità.
I siti internet accessibili ed usabili risultano ben strutturati ed organizzati, con meccanismi di navigazione chiari ed efficienti. Questo migliora la fruizione dei contenuti, rendendo l'esperienza dell'utente piacevole e soddisfacente.
Un meccanismo di navigazione è qualsiasi strumento tramite il quale un utente può navigare una pagina o un sito web. Alcuni esempi di meccanismi sono le barre di navigazione, le mappe del sito, i sommari.
Implementare un modello di navigazione chiaro e coerente è fondamentale per migliorare l’accesso ai contenuti da parte delle persone affette da disabilità cognitive, motorie e da cecità, ma risulta vantaggioso anche per gli utenti normodotati.

In questo articolo vengono forniti alcuni suggerimenti su come progettare la navigazione di un sito internet utilizzando i principi dello sviluppo accessibile.

Partiamo dai link, ovvero i collegamenti ipertestuali, che rappresentano lo strumento base della navigazione in quanto consentono di spostarsi all’interno della pagine e tra le pagine. E’ fondamentale che i link siano autodescrittivi, ovvero che il testo usato come ancora sia auto esplicativo e chiarisca da solo la destinazione del collegamento; in pratica il significato di un link deve essere indipendente dal contenuto del testo in cui è immerso. Questo vuol dire che non ha senso utilizzare un link del tipo “Clicca qui” in quanto non chiarisce da solo la destinazione ma è necessario desumerla dal testo che precede o segue. Ciò diviene un problema notevole per gli utenti che fanno uso di screen reader e che navigano saltando di link in link: giungendo su un collegamento non autodescrittivo non hanno modo di capire dove punta, rendendo inagevole, di fatto, la navigazione.

Poi ci sono le barre di navigazione costituite da un insieme di link che definiscono i menu principali e secondari dei siti web. Innanzitutto è importante che mantengano la coerenza visiva e funzionale, ovvero che compaiano sempre nella stessa posizione all’interno delle pagine dello stesso sito e che i collegamenti uguali puntino alle stesse pagine. Poi è necessario che i menu siano strutturati come elenco e non semplicemente come un insieme di link e che ogni gruppo di collegamenti sia preceduto da un link che ne consenta il salto diretto.

Quello dei link di salto è un discorso che va esteso a tutti i gruppi di contenuti ripetitivi; permettere il salto di contenuti che si ripetono sempre nelle varie pagine di un sito agevola la navigazione e la rende più veloce e diretta, soprattutto per gli utenti che non fanno uso del mouse o navigano con screen reader e che sono costretti, quindi, a scorrere il contenuto delle pagine in maniera sequenziale. Oltre ai link di salto, sono opportuni anche i collegamenti che permettono di tornare all’inizio della pagina o a determinate sezioni della stessa (per esempio form della ricerca, indici e sommari, ecc.).

Un altro utile sistema di navigazione consiste nell’impiego di un sommario dei contenuti posto all’inizio della pagina e contenente un elenco di link interni che puntano alle sezioni principali. Questo permette di semplificare la ricerca dei contenuti di interesse nella pagina rendendone più immediata la fruizione.

Esistono poi numerosi altri meccanismi di navigazione il cui utilizzo è raccomandato in base alle dimensioni del sito ed alla quantità di contenuti.
Tra di essi trovano posto la mappa del sito, necessaria per rintracciare i contenuti principali in siti internet con molte pagine, i motori di ricerca interni, per reperire particolari informazioni nella pagina, le briciole di pane (breadcrumbs), ovvero la sequenza di link, in genere posta ad inizio pagina, che riassume il percorso logico che porta dalla home page alla sezione attualmente visitata, i tasti di accesso rapido (accesskey) che permettono, tramite opportune combinazioni dei tasti della tastiera, di accedere direttamente a sezioni del sito.

Le informazioni fornite in questo articolo, senza nessuna pretesa di completezza od esaustività, possono servire come valido spunto per tutte quelle web agency che decidono di avviare un progetto web moderno e che intendono approfondire i temi dell’accessibilità siti web e dell’usabilità delle interfacce dei siti internet.