Elettroni (un sito di scienza e varia umanità)

Nello sviluppo de Il Pesa-Nervi sono state utilizzate una serie di misure per favorire l'accessibilità e l'usabilità, alcune piuttosto innovative, come l'apertura e la chiusura dinamiche della colonna dei menu e dei singoli menu e l'incremento proporzionale dei margini del testo.

Misure di accessibilità e usabilità

Nella costruzione di questo sito ho cercato di fare un passo avanti rispetto alla sola ricerca dell'accessibilità. Ho cercato infatti di realizzare un'interfaccia che fosse allo stesso tempo accessibile e largamente usabile.

Nella ricerca dell'accessibilità si tende spesso a ricorrere a soluzioni che, per l'utente non disabile, possono risultare scomode. Un esempio tipico è la rinuncia alla doppia o alla tripla colonna. Più colonne affiancate creano infatti problemi a chi naviga a basse risoluzioni, a causa della scomparsa di una parte dei contenuti al di fuori della finestra visibile.

Ne Il Pesa-nervi il problema di coniugare le opposte esigenze è stato risolto grazie ad un uso piuttosto intensivo di JavaScript. Per mezzo di appositi script il menu di navigazione, posto sulla destra della pagina, può essere fatto comparire e scomparire a piacere. Chi ha bisogno dello schermo occupato solo dai contenuti ingranditi (gli ipovedenti per es.), troverà comodo nascondere il menu non appena ha finito di usarlo.

Un'altra soluzione che avvantaggia l'usabilità è il ricorso ad uno script che adatta la larghezza del testo degli articoli alla larghezza della finestra del browser. Quando la finestra è molto stretta (come nei palmari), i margini destro e sinistro sono ridotti al minimo; quando invece la finestra del browser si allarga, i margini crescono progressivamente. Ciò consente di non avere mai, alle alte risoluzioni, una colonna di testo larga quanto tutto lo schermo, cosa che produce di solito ai lettori un notevole fastidio.

Un difetto di usabilità di moltissimi siti è costituito dall'enorme allungarsi verso il basso delle colonne laterali, che di solito contengono lunghe serie di link e di menu. Nel menu di navigazione de Il Pesa-Nervi, il problema di evitare l'eccessivo allungamento è stato risolto con il ricorso ad uno script che apre ciascun sottomenu chiudendo contemporaneamnte tutti gli altri. Ciò porta due vantaggi:

• Le principali voci di menu sono sufficientemente vicine da poter essere osservate sinotticamente;
• Rimane aperto un solo sottomenu per volta, riducendo di molto l'allungamento dei contenuti e la necessità di effettuare lo scorrimento verso il basso, al di sotto della piega della finestra del browser.

Vi sono poi accorgimenti a vantaggio dei non vedenti, di cui i due più importanti sono:

• il menu di navigazione segue nel codice i contenuti principali. In tal modo chi ascolta trova i contenuti prima del menu, con grande risparmio di tempo nella ricerca dei punti di interesse nel testo;
• Il primo contenuto della pagina è un brevissimo menu di scelte rapide: consente di arrivare in un colpo solo all'inizio del testo o all'inizio del menu di navigazione principale.

Un lavoro notevole è stato fatto per consentire una degradazione della pagina senza perdite d'informazione, nel passaggio da un browser grafico con supporto attivo per JavaScript e fogli di stile ad un browser testuale, nel quale manchino entrambi i supporti.

A quanto detto fin qui si aggiungono i consueti accorgimenti per l'accessibilità:

• Tasti di accesso rapido per le funzioni principali:
  • tasto 5 per il salto all'inizio dei contenuti;
  • tasto 6 per il salto all'inizio del menu di navigazione (se visualizzato);
  • tasto - per posizionare il cursore nella casella di ricerca, se il menu di navigazione è visualizzato;
  • tasto 8 per avviare la ricerca (pulsante Cerca), se il menu di navigazione è visualizzato;
  • tasto ù per posizionare il cursore all'inizio della finestra Testo, nella pagina che contiene il modulo per inviare un commento ad un articolo;
  • tasto à per posizionare il cursore nella casella Autore, nella pagina che contiene il modulo per inviare un commento ad un articolo;
  • tasto ò per posizionare il cursore nella casella Sito web o e-mail, nella pagina che contiene il modulo per inviare un commento ad un articolo;
  • tasto \ per attivare o disattivare la casella di spunta Ricorda autore e sito/e-mail, nella pagina che contiene il modulo per inviare un commento ad un articolo;
  • tasto , (virgola) per attivare il pulsante Invia, nella pagina che contiene il modulo per inviare un commento ad un articolo;
• Etichette (elemento label) associate ai campi modulo; uso di fieldset e legend per racchiudere e definire campi modulo omogenei;
• Campi modulo autoevidenziati alla selezione: il cambio di colore rende più facile agli utenti ipovedenti capire quale campo è in un certo momento attivo per la compilazione;
• Colori che soddisfano i requisiti di contrasto cromatico e di luminosità previsti dal W3C;
• Misure del testo definite in percentuale ed in em, per consentire la ridimensionabilità con tutti i browser; grandezza predefinita dei caratteri non inferiore al 100%, per consentire un'agevole lettura a chi non abbia la vista di un'aquila;
• Blocchi di testo che si adattano alla finestra del browser, evitando per quanto possibile la comparsa della barra di scorrimento orizzontale.

Ho ritenuto infine di non seguire alcune linee guida di accessibilità. I campi modulo, per esempio, non hanno un testo segnaposto predefinito: questo accorgimento, infatti, sembra solo un residuo del passato, reso necessario da tecnologie assistive ormai non più utilizzate. Inoltre è possibile che alcuni collegamenti nella stessa pagina abbiano il medesimo testo visibile pur rimandando a destinazioni differenti (per es., il link permanente, che rimanda all'indirizzo univoco di un articolo). L'utente capirà facilmente dal contesto a cosa ciascun link si riferisce. Differenziare il testo di tutti i collegamenti avrebbe comportato un appesantimento notevole e francamente non necessario dei contenuti.

Rispetto degli standard W3C

E' noto che esistono, tra i vari browser di ultima e penultima generazione, profonde differenze nella resa degli stili definiti per mezzo dei CSS (sigla che deriva dall'inglese Cascading Style Sheets, in italiano Fogli di stile a cascata).

Gli sviluppatori cercano di uniformare la visualizzazione dei contenuti ricorrendo a una serie di trucchi, noti come hack. Ho preferito rinunciare completamente all'introduzione di simili trucchi nel codice de Il Pesa-Nervi. Il motivo di questa rinuncia è che il sistema dei trucchi è antieconomico e va nella direzione di sostenere la politica di rispetto imperfetto degli standard, praticata da alcuni produttori di browser. Questo sito punta invece sul rispetto puro e semplice della sintassi dei linguaggi XHTML 1.0 strict e CSS level 2.

Chi usa browser grafici che non supportano pienamente la sintassi di tali linguaggi, rischia di vedere una versione degradata del sito. Non si tratta di una scelta discriminatoria nei confronti degli utenti: i contenuti, infatti, rimangono in ogni caso fruibili. E' una scelta, piuttosto, coerente con l'idea di partecipare allo sviluppo di un Web fatto di contenuti realmente accessibili a tutti e interoperabili.

I browser che supportano nativamente il tipo di contenuto MIME application/xhtml+xml (per es. Opera e Mozilla Firefox), ricevono le pagine di questo sito in quel formato. Gli altri browser le ricevono, invece, con il tipo MIME text/html. Pubblicare pagine XHTML servite come tali, obbliga gli autori ad avere pagine sempre ben formate, altrimenti il loro caricamento nei browser conformi si blocca. Questo rischio è stato evitato ne Il Pesa-Nervi grazie ad un sistema di controllo che avvisa gli autori di articoli e di commenti della presenza di errori di codice nei loro testi. Gli avvisi contengono l'indicazione del tipo di errore, in modo da consentire agli autori le opportune correzioni. Saranno perciò pubblicati solo articoli e commenti composti da codice ben formato, nel pieno rispetto di quanto richiesto dalle regole di XHTML.

Ringraziamenti

Nello sviluppo de Il Pesa-Nervi sono debitore, per i preziosi suggerimenti e per le critiche costruttive ricevute, verso Luca Mascaro, James Siddall jr, Ascer David Habib, Lorenzo Spallino, Giovanni Acerboni, Vittorio Bica, Donato Taddei, Germano Carella, Elena Brescacin. Un ringraziamento particolare va a Sofia Postai, Franco Frascolla, Gianluca Troiani, Gianluca Affinito e Maurizio Boscarol per il tempo che hanno perso ad analizzare la struttura del sito, fornendomi anche catture di schermo ed indicazioni dettagliate.