Ingegner Martino Benzi

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.

Come descriverò meglio al fondo di questa pagina, questo sito è stato completamente riprogettato nel febbraio 2013 secondo i principi del Responsive Web Design, in modo da consentirne il miglior uso sugli apparati mobili, smartphone e tablet. I testi sono, però, rimasti praticamente invariati, tranne dove era necessario per spiegare il nuovo schema progettuale usato, questa pagina è proprio una di quelle in cui le variazioni sono state più importanti.

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.

[ Leggi tutto... ]

Di fatto, questa pagina è il compendio dell'intero manuale

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 eventuali sottosezioni in cui devono essere raggruppati i contenuti, con i loro titoli provvisori.

Questo sito internet è composto dall'home page e da cinque sezioni:

  • La prima sezione è il corpo del "Manuale di progettazione e realizzazione dei siti web";
  • La seconda sezione spiega cosa fa "Lo Studio Benzi";
  • La terza, "Portfolio", parla dei miei clienti e dei lavori da me realizzati;
  • La quarta, "Disclaimer", contiene le indispensabili informazioni legali su privacy, copyright e accessibilità di questo sito;
  • La quinta è dedicata ai contatti e all'iscrizione alla  newsletter.

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

Skip navigation

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;
    • Verde scuro e bordeaux per l'intestazione generale di ogni pagina;
    • Nero (in realtà un grigio scurissimo che garantisce una leggibilità migliore) per il testo;
    • Verde scuro per i titoli e sottotitoli delle pagine;
    • Grigio acciaio per lo sfondo dei link nella barra di navigazione superiore;
    • Sono tutti contrasti forti, cromatici e di luminosità, che dovrebbero essere nettamente evidenti anche a chi è daltonico.
  • L'aspetto definitivo dell'intestazione:
    • Sui tablet e sui monitor ad alta risoluzione la barra di navigazione superiore ha sfondo verde ed ogni link è bianco su sfondo grigio acciaio; i due colori si invertono al passaggio del mouse. La sezione attiva è evidenziata dal corrispondente link nero su sfondo bianco.
    • Sui tablet e sui monitor ad alta risoluzione il menù laterale sinistro è fatto da scritte nere su sfondo bianco, separate da una sottile riga; al passaggio del mouse lo sfondo diventa verde e la scritta bianca, colori che evidenziano il link alla pagina attiva.
    • Sugli smartphone la barra di navigazione superiore e il menù laterale collassano in due barre alternativamente espandibili bordeaux con scritte bianche; espanse assumono per lo sfondo il solito verde scuro e grigio acciaio per evidenziare la sezione e la pagina attiva.
  • 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à e ho scelto il font Calibri per tutto il sito: ha una leggibilità altissima su schermi di tutte le dimensioni e ci sono eccellenti tipi di caratteri equivalenti per ogni sistema operativo, in grado di ottenere lo stesso effetto anche per chi non usa le ultime versioni di MS Windows.
    • Il testo è scritto in un carattere 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.
    • Questo sito conterrà immagini, quando scriverò un capitolo in cui esse siano necessarie per chiarire un concetto, non prima di allora.
      (A febbraio 2013 mi sono deciso a inserire le prime immagini: le puoi trovare nel portfolio e sono screenshot di siti da me realizzati).

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 Chrome, FireFox o Safari, le pagine non perdano la loro leggibilità e fruibilità; l'aspetto sui browser più datati sarà meno "bello", ma la possibilità di usare il sito deve essere garantita. 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.
    • E, se il sito è progettato secondo i criteri del Responsive Web Design, occorre naturalmente testarlo in lungo e in largo anche alle risoluzioni dei dispositivi mobili, smartphone e tablet, e fare qualche prova "dal vivo".
  • 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.

La sesta fase

La sesta fase di questo sito web è cominciata all'inizio del 2013:  è stato interamente riprogettato secondo i principi del Responsive Web Design.

I contenuti, tranne dov'era strettamente necessario, non sono cambiati; l'estetica generale ha subito variazioni modeste ma adesso il sito è perfettamente fruibile su schermi che vanno dallo smartphone con risoluzione 240x320 pixel sino al monitor grafico ad altissima risoluzione.

I motivi sono banali: i dispositivi mobili stanno diventando la principale via di accesso al web e non è più possibile trascurarne le esigenze tecniche ed estetiche.