Accessibilità e usabilità
Ho cercato in ogni modo di rendere il più possibile accessibile questo sito web, cioè di facilitarne al massimo l'uso da parte di chi sia portatore di qualche handicap fisico, e di renderlo altamente usabile, nel senso di razionale e facile da navigare anche per un visitatore occasionale.
Questi problemi sono trattati in linea teorica nella pagina "Estetica, usabilità e accessibilità dei siti web - Introduzione al problema", ma hanno costituito l'aspetto principale della progettazione e realizzazione di questo sito web: questa pagina serve per spiegarti in pratica come ho progettato e realizzato il mio sito internet e, contemporaneamente, per darti stringatissimi consigli validi per il tuo.
Di fatto, questa pagina è il compendio dell'intero sito e tutto il resto serve per argomentare in dettaglio su quanto è sintetizzato qui.
Le prima fase delle operazioni
Definire gli scopi del sito:
Ho stabilito i suoi contenuti generali ed i destinatari degli stessi, con un'analisi impietosa delle esigenze da soddisfare.
I miei contenuti "è":
- Spiegare come si svolge la progettazione e realizzazione di buoni siti web, accessibili, usabili, facilmente indicizzabili dai motori di ricerca e ben posizionati sugli stessi.
I miei destinatari sono:
- I possibili committenti — piccole e medie aziende, organizzazioni non-profit — che, visitando il sito, si convincano delle mie capacità professionali ed entrino in contatto con me per valutare se affidarmi un incarico professionale: questo è il mio sito professionale, non un hobby.
Definire l'organizzazione logica dei contenuti:
Le sezioni e le sottosezioni in cui devono essere raggruppati i contenuti, con i loro titoli provvisori.
Questo sito internet è composto da due sezioni:
- La prima costituisce il corpo principale del sito ed è suddivisa in due sottosezioni: la Newsletter ed i capitoli del manuale.
- La seconda dà tutte le informazioni necessarie per descrivere la mia attività professionale e le caratteristiche di questo sito ed è suddivisa in tre sottosezioni: questa stessa pagina, che costituisce una sottosezione a sé stante; i contatti e la mia storia professionale e personale, la seconda; le informazioni relative a copyright e privacy, la terza.
La seconda fase
Ho creato una successione di bozze tecnico-logiche del sito
Con i soliti strumenti di sviluppo per il web, ho dato forma alla struttura della pagina tipo con le sue barre di navigazione, inizialmente una struttura estremamente povera e priva di qualsiasi attenzione all'estetica.
Ho creato alcune delle pagine previste, riempiendole con delle bozze molto rudimentali del testo che puoi trovarvi oggi, ed ho verificato con Lynx che tutto fosse perfettamente leggibile e bene organizzato.
Lynx — in bibliografia trovi i riferimenti per il download — è il primo e più semplice strumento per verificare l'accessibilità di un sito. Si tratta di un browser che legge unicamente la componente testuale di una pagina web e, da questo punto di vista, si comporta esattamente come la barra Braille con cui un cieco può navigare in rete.
Questo esame mostra immediatamente un primo problema, comune a tutti i siti: le barre di navigazione devono essere lette tutte, riga per riga, carattere per carattere, dalle dita di un non vedente prima di arrivare agli effettivi contenuti della pagina. Le barre di questo sito sono molto semplici e di immediata comprensione, ma sarebbe assurdo costringere un visitatore cieco a scorrerle ogni volta che apre una nuova pagina del sito. La soluzione esiste e si chiama "Skip navigation".
All'estremo superiore sinistro della fascia verde scuro che contiene l'intestazione di questo sito, in ogni pagina, è nascosto un link otticamente invisibile con le parole: "Skip navigation". Esso porta direttamente ai contenuti della pagina e, se vuoi provarne una simulazione, puoi fare click sul link qui sotto, tenendo conto che tu puoi vedere la barra laterale, ma un non vedente si trova sotto le dita la "A" di "Accessibilità".
Non è di certo un'idea mia: è presente in questa forma o in altre equivalenti in tutti i siti in cui sia stata ben curata l'accessibilità. Inserire questo sussidio non costa niente e produce un'ulteriore vantaggio: in attesa che il linguaggio HTML5 fornisca una codifica specifica per identificare gli strumenti di navigazione di un sito, consente ai motori di ricerca di arrivare ai contenuti della pagina e di indicizzarli con maggior facilità.
Progettare bene la struttura della pagina
A questo punto ho potuto realizzare la prima vera bozza della "pagina tipo", con la fascia d'intestazione in alto e le due barre di navigazione, a sinistra quella con le informazioni sulla mia attività professionale, a destra quella con i capitoli del manuale. L'ho clonata in pochi esemplari, riempiti con del testo fittizio o estremamente provvisorio, ed ho provato a navigare in quella che era finalmente diventata la prima bozza funzionante di questo sito internet.
Ci ho navigato un po' con il mio solito browser e con Lynx, ho provato qualche variazione ed ho cambiato subito idea: le informazioni generali su di me e sul sito in alto ed i titoli dei capitoli nella barra sinistra. È la soluzione più classica ma è anche la più chiara e comprensibile: non voglio che i visitatori debbano fare il minimo sforzo per capire come navigare in questo sito.
La terza fase
Questa è la fase in cui si devono prendere alcune decisioni fondamentali. Ecco le mie, pensate per ottenere la massima semplicità di navigazione nel sito e leggibilità delle pagine, cioè per garantire l'usabilità del sito.
- Le scelte cromatiche:
- Bianco puro per lo sfondo;
- Nero puro per il testo;
- Verde scuro per lo sfondo dell'intestazione ed i titoli e sottotitoli delle pagine;
- Bianco per titolo e sottotitolo generali di questo sito;
- Grigio acciaio per lo sfondo dei link bianchi nella barra di navigazione orizzontale;
- Giallo vivo, con testo verde scuro, per lo sfondo del link che porta a questa pagina: volevo che spiccasse e credo di esserci riuscito.
- Sono tutti contrasti forti, cromatici e di luminosità, che dovrebbero essere nettamente evidenti anche a chi è daltonico.
- L'aspetto definitivo dell'intestazione:
- Scritte bianche grandi su sfondo verde scuro, nessun fronzolo, nessun logo, nessun disegnino: non voglio trattenere l'attenzione dei visitatori sull'intestazione, voglio che vadano subito a leggersi le pagine, questa su cui ti trovi, possibilmente, per prima.
- L'aspetto definitivo degli strumenti di navigazione:
- I più semplici possibili, in questo sito non serviva usare JavaScript per gli effetti di transizione e sono stato felice di poterne fare a meno: quello che non c'è non si rompe.
- La barra orizzontale è suddivisa da una maggior spaziatura per evidenziare le tre sottosezioni, avrei voluto inserire spazi più ampi, ma ciò avrebbe generato problemi a quei navigatori, miopi o presbiti, che avessero impostato uno zoom della pagina al 125% su schermi con risoluzione 1024x768 pixel.
- La barra verticale sinistra comincia con il link alla pagina per l'iscrizione alla Newsletter, se l'avessi posto sotto l'elenco dei capitoli, finirebbe con lo scomparire entro pochi mesi dal monitor e, soprattutto, sarebbe scomodo da trovare per un non vedente.
- I font, cioè i tipi di
carattere, da usare per i titoli e per il testo e le relative dimensioni:
- Anche qui ho optato per la massima leggibilità ed ho scelto l'Arial per titoli e sottotitoli ed il Times New Roman per il testo.
- Il testo è scritto in un carattere molto più grande del solito, perché le pagine sono lunghe da leggere e da scorrere sino in fondo e rischiano di affaticare il lettore; con la grandezza scelta per il corpo del testo, su monitor alti 768 pixel, i più diffusi oggi, ogni schermata presenta circa 1'800 caratteri, tanti quanti ne contiene una cartella standard editoriale, che è ottimizzata per facilitare la concentrazione del lettore.
- L'uso delle immagini nel sito:
- Questo sito non contiene immagini: non contiene immagini inutili.
- Voglio dire che le immagini sono utilissime e indispensabili nella quasi totalità dei siti internet, ma devono essere illustrazioni, non decorazioni e, soprattutto, non devono essere messe lì a casaccio tanto per dare colore alla pagina.
- Ti faccio un esempio: se io avessi pescato in rete la foto di un distinto signore, dall'aria felice e compiaciuta, intento ad osservare il monitor di un computer e l'avessi posta nella barra laterale, saresti così stupido da pensare che si tratta dell'autentica fotografia di un mio cliente, soddisfatto per le prestazioni professionali ricevute? No, non credo proprio che tu sia così stupido. E allora non ho messo né quell'immagine né altre equivalenti.
- Oltretutto io non ho mai creato un logo per la mia attività professionale: non mi serve, non vendo prodotti inscatolati da riconoscere a colpo d'occhio sullo scaffale di un supermercato. Quindi anche l'intestazione delle pagine di questo sito web non ha nessun bisogno di contenere immagini di alcun tipo.
- Questo sito conterrà immagini, quando scriverò un capitolo in cui esse siano necessarie per chiarire un concetto, non prima di allora.
In questa fase si devono anche inserire i testi "definitivi" — e le illustrazioni — delle pagine che si ritiene essere particolarmente complesse.
- Le pagine particolarmente complesse — penso in particolare a quelle dedicate a prodotti dalla descrizione lunga e articolata — possono riservare sorprese. Sorprese nel senso che è possibile si debba scomporne i contenuti su più pagine, per facilitarne la lettura, e si debba pensare a creare degli appositi strumenti di navigazione interni al singolo prodotto. Poiché l'usabilità del sito richiede che questi strumenti di navigazione siano identici in tutte le pagine dello stesso tipo, occorre progettarli con cura in questa fase dello sviluppo del sito, non più avanti.
- E, naturalmente, occorre studiare accuratamente che formato, che taglio, dare alle illustrazioni da inserire nelle pagine: c'è una bella differenza fra mostrare delle bottiglie in piedi o delle bottiglie coricate.
E, finalmente, è arrivato il momento di progettare sul serio l'home page del sito.
- Tutte le bozze della pagina principale del sito, la più importante e significativa, che si sono fatte sino a questo momento, sono state solo un pour parler: prima di questa fase della progettazione e realizzazione di un sito web non se ne conoscono in maniera adeguata i contenuti e la loro organizzazione interna, che devono essere riepilogati e resi raggiungibili dalla home page.
- Lo so, caro sperato committente, che pochi giorni dopo che mi avrai affidato l'incarico, vorrai vedere una bozza della tua futura home page, ed io te la farò vedere: ci mancherebbe che non ti accontentassi in un desiderio così umano e naturale. In ogni caso, quando arriveremo a questo punto dei lavori — a meno che il tuo sito non sia molto semplice e lineare come struttura e contenuti — stravolgeremo insieme tutto, tu non te ne accorgerai nemmeno e troverai logica e razionale quella nuova.
-
- La cosa è talmente vera che la mia home page originale era completamente diversa dall'attuale: non più brutta, diversa.
A questo punto, iniziano le vere prove e verifiche da eseguire sul sito.
- Lasciar passare qualche giorno:
- Arrivati a questo punto della progettazione e realizzazione di un sito web, è opportuno tirare il fiato per almeno due o tre giorni lavorativi o, meglio, una settimana: si sono prese un sacco di decisioni importanti da sottoporre alla verifica definitiva ed è meglio farlo a mente fresca. Non bisogna farsi prendere dall'impazienza, potremmo definirla una prova di carattere.
- Navigare in lungo e in
largo sul sito con tutti i
browser:
- Occorre verificare che, qualsiasi browser si usi, a partire dall'obsoleto ma ancora diffuso Microsoft Internet Explorer 6 sino all'ultimissima versione di FireFox o Safari, le pagine mostrino sempre lo stesso aspetto. Tutti questi controlli sono da svolgere con tutte le risoluzioni del monitor e su diversi sistemi operativi, cambiando anche lo zoom della pagina, come farebbe un visitatore molto miope o molto presbite.
- È opportuno fare qualche prova anche con gli apparati mobili, la resa — a meno che il sito non sia ottimizzato proprio per loro — non potrà essere eccezionale, ma non dovrà nemmeno essere troppo scadente.
- Vivisezionare il sito con
Lynx:
- In questa fase Lynx è fondamentale per esaminare il vero contenuto delle pagine, depurate dalle immagini e da qualsiasi altro elemento di contorno. Se quello che si legge non contiene, ben articolato e perfettamente comprensibile, ciò che si intende comunicare con la singola pagina, allora è necessario rivedere il testo e le — obbligatorie ai fini dell'accessibilità — didascalie delle immagini.
- Validare il
codice del sito:
- La correttezza del codice — HTML o XHTML e CSS — con cui è realizzata una pagina può essere controllata — validata — con gli strumenti messi a disposizione dal World Wide Web Consortium (W3C). Quest'analisi, se superata, certifica l'aderenza agli standard ed è praticamente indispensabile se si vuole garantire l'accessibilità di un sito: non costa niente, solo il tempo necessario per eseguirla e rieseguirla un sacco di volte — e il tempo, purtroppo, costa — ma non farla è un vero suicidio.
- Siti specificamente
progettati per portatori di gravi handicap:
- Se il sito è destinato specificamente a portatori di gravi handicap, che usino ausili particolari per la navigazione, in questa fase è obiettivamente indispensabile cercare qualche volontario che faccia dei test di accessibilità, con gli strumenti a sua disposizione, sull'intera bozza del sito.
L'attività di questa terza fase è estremamente reiterativa: ogni cambiamento nelle impostazioni impone di ripetere un set completo di prove e verifiche: infatti, molto spesso variazioni, che sembrerebbero trascurabili, provocano effetti indesiderati e sgradevoli, soprattutto sui browser più vecchi di casa Microsoft.
La quarta fase
Bene: siamo arrivati quasi in fondo, ecco cosa resta ancora da fare
- Finire il sito:
- Realizzare le pagine mancanti, completare quelle rimaste in bozza, preparare ed inserire tutte le illustrazioni eventualmente rimaste in sospeso, e via dicendo.
- Sembra facile, ma è un'altra faticaccia e, tipicamente, si finisce per lavorare anche di notte.
- Eseguire un ultimo ciclo di verifiche e controlli:
- Tanto per incominciare occorre controllare che tutte le pagine del sito siano raggiungibili dalle barre di navigazione o, eventualmente, tramite un link collocato nel testo. E occorre esaminare ogni singolo link del sito per verificare che punti alla pagina giusta: posso garantirti che, arrivati a questo punto, per quanti controlli si siano già fatti, c'è sempre almeno un link che finisce nel nulla per un minuscolo errore d'ortografia.
- Ripetere i soliti controlli con tutti i browser su tutto il sito e con Lynx sulle ultime pagine realizzate.
- Fare un'ultima validazione del codice: non si sa mai.
- Se il sito è destinato specificamente a portatori di gravi handicap, occorre ripetere un ciclo di controlli di accessibilità sull'intero sito.
- Pubblicare il sito:
- Finalmente si può rendere www.ma_che_meraviglioso_sito.it visibile all'universo mondo!
La quinta fase
Ecco cosa mi resterà ancora da fare, quando, dopo aver scritto queste parole e, fra qualche ora, dopo aver fatto gli ultimi frenetici controlli, avrò finalmente pubblicato questo sito web.
- Non pensarci per qualche giorno:
- È un consiglio tassativo che dò anche a te: comunque stiano le cose, dopo tutti questi sforzi il sito non può essere venuto troppo male. E se ci fosse qualcosa di vistosamente sbagliato, qualche anima pia che gentilmente ti avverte salta fuori sempre, quindi non ti preoccupare, rilassati e pensa ad altro.
- Rivolgermi a qualche
conoscente, di cui possa fidarmi che non dica: "Bello,
bellissimo, una vera meraviglia", solo per farmi un
piacere, e chiedergli un'analisi impietosa di questo sito.
- Per questa operazione la difficoltà consiste proprio nella ricerca di cavie, sufficientemente cortesi e pazienti da esaminare bene il sito e sufficientemente sincere da fornire una risposta «onesta».
- Prendere in seria
considerazione i problemi evidenziati dall'esame degli estranei:
- Non dovrò necessariamente fare le modifiche suggerite — a meno che non si tratti di errori ortografici o link sbagliati — e, soprattutto, non dovrò farle subito: prima dovrò confrontarle accuratamente con le statistiche di accesso al sito.
- Verificare regolarmente
le statistiche di accesso fornitemi da Google Analytics:
- Dovrò chiedermi perché alcune pagine siano più visitate di altre, analizzare le parole chiave usate dai navigatori per rintracciare questo sito con i motori di ricerca, pormi un sacco di domande e cercare altrettante soluzioni: non è mai un compito facile, ma è il mio mestiere.
E poi, ma questa è un'attività che proseguirà negli anni, dovrò aggiungere sempre nuove pagine a questo sito, nuovi capitoli a questo manuale.
Ma, soprattutto, dovrò curare in modo particolare la Newsletter, che mi manterrà in contatto con quanti troveranno così interessante questo sito da volersi tenere aggiornati.
Se vuoi far parte del gruppo, questo è il link alla pagina per l'iscrizione alla Newsletter.