Liste accessibili secondo gli standard web
Articolo a cura di: , pubblicato il 04.05.08
Tradotto dall’originale Accessible data visualization with Web Standards di Wilson Miner, pubblicato su www.alistapart.com
Abbiamo parlato del Web 2.0 per così tanto tempo che è diventato un argomento obsoleto tanto da non ricordarne il significato e la funzione. Ma una cosa è sicura, ci sono moltissimi dati sul web al momento. E come web designer, progettiamo moltissimi siti basati su dati.
Allo stesso modo, ci sono molte opzioni per la visualizzazione dei dati. Charts API, recentemente annunciato da Google, è un ottimo esempio ma vi sono diversi strumenti e servizi per creare diagrammi e grafici o realizzare visualizzazioni interattive con Flash.
Vi sono altresì solide tecniche standardizzate, come i grafici a barre CSS di Eric Meyer che trasformano in diagrammi le tabelle strutturate dal codice semantico e pulito.
Tutte queste opzioni sono estremamente utili quando abbiamo i dati davanti da cui ricavare un semplice diagramma. Ma che succede se vogliamo includere la visualizzazione dei dati come parte integrante del sito, non semplicemente come un’immagine isolata o un diagramma interattivo? Quando si progettano interfacce per siti basati sull’interrogazione dei dati, è significativa la capacità di creare elementi di navigazione che siano anche strumenti di visualizzazione. Possiamo informare l’utente durante l’esplorazione, così da possa prendere decisioni ottimali su ciò che sta cercando o visitando.
Potremmo costruire questo tipo di navigazione in Flash oppure generare immagini statiche ogni volta che i dati cambiano ma ciò può rappresentare un’impresa in termini di accessibilità e sostenibilità.
Persino con un codice standardizzato, ci sono inconvenienti. Se vogliamo semplicemente mostrare i dati, possiamo ricavare il massimo della ricchezza semantica e dell’accessibilità con una tabella. Ma se quello che stiamo costruendo è la navigazione, le tabelle sono uno strumento scomodo e spesso inadatto per il lavoro. Quello che ci serve è qualcosa di intermedio – un codice appropriato alla navigazione ma con alcuni extra semantici e strutturali.
Passeremo in rassegna tre tecniche principali per incorporare semplici visualizzazioni di dati in tipologie di navigazione standard. Tutte si basano sulle fondamenta della navigazione HTML: una lista non ordinata di link. Ritoccheremo un pò il codice e vi aggiungeremo alcuni punti chiave oltreché alcuni elementi stilistici ma, ad ogni modo, la forma è quella familiare a tutti.
Dal momento che non possiamo basarci su puri dati semantici di una tabella, useremo classi semantiche sull’esempio dei microformati per preservare il più possibile la struttura dei dati nel nostro codice. E dal momento che stiamo usando HTML e CSS, possiamo ricorrere alle unità em per fare in modo che i diagrammi si adattino alla risoluzione del testo dell’utente.
Diagrammi a barre orizzontali
Questa semplice tecnica aggiunge delle barre a una lista di voci dietro al testo (guarda l’esempio finale per capire di cosa parliamo). Funziona con liste di qualsiasi lunghezza. Le liste più lunghe vengono ordinate per conteggio poiché i valori relativi delle barre sono più facili da leggere quando si presentano in sequenza. In questo esempio, mostriamo il conteggio di ciascuna voce della lista ma possiamo anche tralasciarlo se il valore è meno importante di per sé e vogliamo semplicemente fare un raffronto tra i rispettivi valori.
Iniziamo con una semplice lista non ordinata di link.
<ul class="chartlist">
<li>
<a href="http://www.example.com/fruits/apples/">Apples</a>
</li>
<li>
<a href="http://www.example.com/fruits/bananas/"> »
Bananas</a>
</li>
<li>
<a href="http://www.example.com/fruits/cherries/"> »
Cherries</a>
</li>
<li>
<a href="http://www.example.com/fruits/dates/">Dates</a>
</li>
</ul>
La prima cosa da fare è aggiungere i valori a ciascuna voce della lista. Li raggrupperemo nei selettori span al di fuori dei collegamenti così da poter attribuire uno stile.
<ul class="chartlist">
<li>
<a href="http://www.example.com/fruits/apples/">Apples</a>
<span class="count">420</span>
</li>
<li>
<a href="http://www.example.com/fruits/bananas/"> »
Bananas</a>
<span class="count">280</span>
</li>
<li>
<a href="http://www.example.com/fruits/cherries/"> »
Cherries</a>
<span class="count">200</span>
</li>
<li>
<a href="http://www.example.com/fruits/dates/">Dates</a>
<span class="count">100</span>
</li>
</ul>
Per creare le barre, dobbiamo rendere le voci della lista come blocchi così da prendere l’intera lunghezza e attribuire un posizionamento relativo e collocare le barre le une in relazione alle altre. Dal momento che è la navigazione il principale scopo di questa lista, daremo display: block a ciascuna voce che abbia un link in modo che l’area del click riempia l’intera lunghezza della lista.
.chartlist li {
position: relative;
display: block;
}
Aggiungeremo anche altri stili per sfalsare i conteggi alla destra della lista per una facile lettura. Useremo il posizionamento assoluto invece di quello relativo cosicché i link e le barre possano sovrapporsi per l’intera lunghezza del diagramma senza annidarsi l’uno all’altro.
.chartlist .count {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0 0.3em;
text-align: right;
color: #999;
font-weight: bold;
font-size: 0.875em;
}
Poiché abbiamo usato il posizionamento assoluto per i conteggi, aggiungeremo un padding per essere sicuri che ci sia spazio per i numeri accanto ai link senza che si sovrappongano. Dobbiamo anche inserire una coppia di stili ai link per fare in modo che appaiano sempre sopra le barre che andremo a posizionare sotto di essi. Gli daremo position relative così da accettare il valore z-index e imposteremo z-index a un valore superiore allo zero cosicché stiano sopra la barra.
.chartlist li a {
display: block;
padding: 0.4em 4.5em 0.4em 0.5em;
position: relative;
z-index: 2;
}
Prima di dare uno stile alle barre, dobbiamo aggiungere un elemento al codice di ciascuna voce per memorizzare l’informazione che visualizza la barra. In questo caso, vogliamo mostrare il valore relativo di ciascuna voce della lista rispetto al conteggio totale dell’intera lista. Percui l’informazione che comunichiamo alle barre sarà una percentuale calcolata su questi due valori. Aggiungeremo un elemento al codice e gli daremo una classe di stile appropriata. Useremo la classe index per le percentuali di ciascuna barra del diagramma.
<ul class="chartlist">
<li>
<a href="http://www.example.com/fruits/apples/">Apples</a>
<span class="count">420</span>
<span class="index">(42%)</span>
</li>
<li>
<a href="http://www.example.com/fruits/bananas/"> »
Bananas</a>
<span class="count">280</span>
<span class="index">(28%)</span>
</li>
<li>
<a href="http://www.example.com/fruits/cherries/"> »
Cherries</a>
<span class="count">200</span>
<span class="index">(20%)</span>
</li>
<li>
<a href="http://www.example.com/fruits/dates/">Dates</a>
<span class="count">100</span>
<span class="index">(10%)</span>
</li>
</ul>
Una nota a proposito dei dati
In questo diagramma d’esempio stiamo mostrando ciascuna voce come percentuale sul totale (come un diagramma a torta), ma possiamo usare la stessa tecnica per mostrare percentuali relative al più alto valore della lista – cosìcché ci sia almeno una barra al 100% e tutte le altre siano una percentuale del valore massimo. Possiamo anche calcolare le percentuali relative al valore di base fissato (ad esempio, il 50%) e tutte le altre saranno superiori o inferiori rispetto a quest’ultima; i dati sulle prestazioni dei processori per pc o di prodotti simili ne sono un esempio.
La matematica che sta dietro a questi risultati esula dagli obiettivi di questo articolo ma il punto è che possiamo usare lo stesso codice e tecniche di stile per visualizzare diversi tipi di dati. Basta esser sicuri di usare titoli e descrizioni chiare per i nostri diagrammi cosicché i valori stessi abbiano un senso nel contesto.
In questi esempi useremo dati predefiniti ma esistono vari modi per calcolare le percentuali su un sito reale. Possiamo calcolarle nel back-end (amministrazione ndt) e presentarle in un template [...]. Possiamo usare JavaScript per estrarre il valore percentuale dal codice e applicarlo come larghezza alla barra. Per gli scopi di questi esempi, diamo per scontato che siano stati fatti i dovuti calcoli matematici, pertanto useremo uno stile inline per mostrare le larghezze delle barre come percentuali.
<ul class="chartlist">
<li>
<a href="http://www.example.com/fruits/apples/">Apples</a>
<span class="count">420</span>
<span class="index" style="width: 42%">(42%)</span>
</li>
<li>
<a href="http://www.example.com/fruits/bananas/"> »
Bananas</a>
<span class="count">280</span>
<span class="index" style="width: 28%">(28%)</span>
</li>
<li>
<a href="http://www.example.com/fruits/cherries/"> »
Cherries</a>
<span class="count">200</span>
<span class="index" style="width: 20%">(20%)</span>
</li>
<li>
<a href="http://www.example.com/fruits/dates/">Dates</a>
<span class="count">100</span>
<span class="index" style="width: 10%">(10%)</span>
</li>
</ul>
Completiamo il diagramma a barre
L’ultimo passo per questo diagramma è dare uno stile alle barre. Nasconderemo le reali percentuali (usando il trucco del testo rientrato esposto da Mike Rundle nella image replacement technique) poiché il valore esatto non è importante quanto la scala percentuale e la barra farà il suo lavoro decentemente. Se vogliamo mostare la percentuale, possiamo scegliere di mostrarla all’interno della barra o ricorrere a elementi separati per la barra e la percentuale.
Imposteremo un’altezza della barra pari a 100% e solo in un secondo momento la larghezza, percui sceglieremo una larghezza base pari a 0 così da nascondere del tutto le barre quando non diamo un valore esplicito. Abbiamo scelto un blu chiaro per le barre di sfondo, in questo modo i testi collegati saranno leggibili quando si sovrappongono alla barra ma quest’ultima sarà sempre visibile.
.chartlist .index {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #B8E4F5;
text-indent: -9999px;
overflow: hidden;
}
Aggiungeremo alcuni stili hover per le righe, i bordi e i posizionamenti per la leggibilità: ed ecco il nostro diagramma (guarda l’esempio completo). Una delle cose da notare è come appare senza fogli di stile. Poiché abbiamo inserito le percentuali nel codice, l’informazione che diamo con un diagramma “in stile” è comunque accessibile anche quando lo stile è disattivato.
Diagrammi temporali
Una volta stabilita la ricetta di base per una buona navigazione semantica con una spruzzata di dati e un pò di CSS per rendere i dati in un diagramma, ci sono moltissime variazioni che possiamo applicare a diversi tipi di dati. Un trucco facile è trasformare il diagramma in una sequenza temporale (guarda il secondo diagramma nell’esempio completo).
Inizieremo con un codice molto simile al primo diagramma. In questo caso, è una lista di giorni, con un valore per ciascun giorno. Dal momento che limitiamo lo spazio nel formato orizzontale per mostrare le etichette di ciascuna barra, mostreremo solo il giorno del mese nell’etichetta e un titolo sopra la lista per il mese. Poiché si tratta di navigazione e la barra porta con sé i valori relativi [...], ha un senso non mostrare qui tutta l’informazione. In più, aggiungeremo un titolo ai collegamenti con la data completa e il conteggio per quel giorno, cosicché i dettagli verranno evidenziati con un tooltip per ciascuna barra.
<ul class="timeline">
<li>
<a href="http://www.example.com/2007/dec/1/" »
title="December 1, 2007: 40">
<span class="label">1</span>
<span class="count">(40)</span>
</a>
</li>
<li>
<a href="http://www.example.com/2007/dec/2/" »
title="December 2, 2007: 100">
<span class="label">2</span>
<span class="count">(100)</span>
</a>
</li>
</ul>
Ripetiamo all’occorrenza. Nell’esempio, abbiamo creato un diagramma di 30 giorni con una barra per ciascun giorno, ma possiamo disegnare il diagramma della lunghezza e dimensione che ci occorrono. Se il diagramma ha meno barre, possiamo farle più grandi e dare più spazio alle etichette più lunghe.
Per essere sicuri che le etichette occupino lo spazio giusto sotto le barre, useremo come dimensioni per l’intero diagramma le unità em così da adattarsi al testo. Per rendere le cose più semplici, imposteremo la dimensione del testo per le etichette con l’elemento principale .timeline e ridimensionare tutto il resto in relazione a questo. Imposteremo il valore height dell’intero diagramma a 10 em, lasciando 8 em per le barre e 2 em con le etichette con un minimo di spaziatura.
.timeline {
font-size: 0.75em;
height: 10em;
}
.timeline li {
height: 8em;
}
Come in precedenza, imposteremo il posizionamento relativo per le voci della lista dovendo usare quello assoluto per allineare le barre alla base di ciascuna voce. [...] Faremo slittare (float) le voci a sinistra in modo da allineare le barre orizzontalmente. Imposteremo la larghezza delle barre a 1.5 em e l’altezza a 8 em per dare spazio in basso alle etichette a due cifre e le distanzieremo (padding) leggermente tra di loro. Useremo le unità em in modo da ridimensionare in proporzione etichette e barre secondo le scelte dell’utente.
.timeline li {
height: 8em;
position: relative;
float: left;
width: 1.5em;
margin: 0 0.1em;
}
Poiché vogliamo che tutta l’area della barra e dell’etichetta sia cliccabile, imposteremo i link su display: block e height: 100% così occuperanno lo spazio disponibile creato per le voci della lista.
.timeline li a {
display: block;
height: 100%;
}
Vogliamo che le etichette appaiano sotto le barre ma, poiché entrambe devono essere cliccabili, le inseriamo all’interno del tag a. Per spostare le etichette, useremo il posizionamento assoluto con un valore negativo su bottom. Poiché le barre hanno height pari a 8 em e il diagramma ha 10 em, sposteremo le etichette in basso di -2 em. Daremo loro anche un’interlinea line-height di 2 em percui, indipendentemente dalla dimensione del testo, avranno tutto lo spazio necessario in verticale. Le allineremo a sinistra delle barre, occupando tutta la larghezza con il testo allineato al centro.
.timeline li .label {
display: block;
position: absolute;
bottom: -2em;
line-height: 2em;
left: 0;
width: 100%;
text-align: center;
}
Poiché non mostreremo i conteggi su questo diagramma, useremo l’elemento count per indicare la barra e un’uguale combinazione di text-indent e overflow per nascondere il testo. Daremo alle barre un fondino pieno e le posizioneremo in basso a sinistra della voce di lista. Invertendo quanto fatto per il diagramma a barre orizzontali, imposteremo la larghezza a 100% e l’altezza a 0.
.timeline li a .count {
display: block;
position: absolute;
bottom: 0;
left: 0;
text-indent: -9999px;
overflow: hidden;
width: 100%;
height: 0;
background: #AAA;
}
Per questo diagramma non vogliamo che ogni barra rappresenti una percentuale del totale, poiché vi sono molte voci e le barre sarebbero minuscole. Invece, vogliamo che il giorno con il conteggio più alto abbia la barra più alta, percui avrà altezza pari a 100% e calcoliamo le altezze di tutte le percentuali di quel conteggio massimo giornaliero. Possiamo vedere il risultato (con dati fittizi ma matematicamente corretti) nell’esempio finito. Abbiamo anche inserito uno stile hover per evidenziare la barra, l’etichetta e l’area di sfondo per chiarire su quale voce si sta cliccando.
Linee segmentate
Ora che abbiamo invertito il diagramma in senso temporale, possiamo restringerlo in basso per creare una linea segmentata – un modo comodo per mostrare una sintesi di dati e testi (esempio finito). Possiamo vedere dall’esempio che abbiamo semplicemente ristretto la sequenza temporale del diagramma. Con le barre al posto delle linee non sarebbe una vera linea segmentata ma soddisfa il requisito di compattare molta informazione in un diagramma semplice e ridimensionato sul testo.
Questa volta il codice di partenza è leggermente diverso. Poiché stiamo crendo diagramma multipli, inizieremo sempre con una lista non ordinata ma ogni voce conterrà un intero diagramma. Poiché le linee segmentate sono da intendersi come un modo discreto per mostrare informazione allineata con testo, possiamo riprodurre ciò nel codice senza stile, usando l’elemento inline per ciascun dato. Quello che otteniamo è ragionevolmente chiaro anche senza applicare i fogli di stile. Diamo un’occhiata a questo esempio senza CSS.
Inizieremo con un span per contenere il diagramma e un altro con classe index per contenere ciascuna barra. Ogni numero della serie è raggruppato nel rispettivo span con la classe count. Questo per dare uno stile alla barra. Poiché nasconderemo tutto il testo all’interno del tag span.count, andiamo avanti e aggiungiamo delle virgole tra ognuno e delle parentesi attorno all’intero gruppo per dare più chiarezza al contenuto senza stile.
<span class="sparkline">
<span class="index"><span class="count">(60, </span></span>
<span class="index"><span class="count">220, </span></span>
<span class="index"><span class="count">140, </span></span>
<span class="index"><span class="count">80, </span></span>
<span class="index"><span class="count">110, </span></span>
<span class="index"><span class="count">90, </span></span>
<span class="index"><span class="count">180, </span></span>
<span class="index"><span class="count">140, </span></span>
<span class="index"><span class="count">120, </span></span>
<span class="index"><span class="count">160, </span></span>
<span class="index"><span class="count">175, </span></span>
<span class="index"><span class="count">225, </span></span>
<span class="index"><span class="count">175, </span></span>
<span class="index"><span class="count">125)</span></span>
</span>
Faremo slittare l’intero diagramma a sinistra per sistemarlo accanto al testo. L’uso di float qui è un pò fraudolento poiché le linee segmentate dovrebbero apparire direttamente allineate col testo. Ma fin quando non si avrà maggior compatibilità con la proprietà display inline-block (che è esattamente l’effetto che vogliamo), ci accontentiamo di questo. Poiché vogliamo che il diagramma abbia la stessa dimensione del testo, gli daremo height: 1em e un margine di respiro su ciascun lato.
.sparkline {
float: left;
height: 1em;
margin: 0 0.5em;
}
Poiché gli elementi .index questa volta contengono la barra, imposteremo position: relative e li faremo slittare a sinistra. Daremo alle barre una larghezza di 2px poiché 1px è un pò troppo piccola per vederla. Vogliamo che prendano l’intera altezza del diagramma, come nella sequenza temporale, percui daremo height: 100%.
.sparkline .index {
position: relative;
float: left;
width: 2px;
height: 1em;
}
Per le barre seguiremo esattamente le stesse caratteristiche per la sequenza temporale e applicheremo il trucco per nascondere il testo.
.sparkline .index .count {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #AAA;
overflow: hidden;
text-indent: -9999px;
}
Aggiungeremo alla lista non ordinata che contiene il nostro gruppo di linee segmentate anche un pò di stile e distanziamento dai margini. Possiamo vedere il risultato nell’esempio finito.
Non sottovalutiamo l’efficacia
Possiamo vedere tutti i diagrammi assieme nell’esempio finale. Provate a ridimensionare il testo e vedere come i diagrammi si adattano alla pagina oppure controllate la versione senza CSS per vedere come il codice degrada con gli screen reader o dispositivi che non supportano stili CSS.
Ovviamente, questi diagrammi sono semplici e queste tecniche non sono la soluzione migliore in assoluto. Se ci occorre del codice semanticamente ricco – con un’ampia base di dati o molte categorie da raffrontare, niente è meglio di una tabella. Per una visualizzazione impreziosita come i diagrammi a torte in 3D, possiamo scegliere alcuni strumenti lato server per generare le immagini. Per una maggiore interattività e animazione, Flash è probabilmente la soluzione.
Non si tratta certamente di un componente universale per la visualizzazione dei dati ma aggiunge moltissimo a ciò che diversamente apparirebbe come una cieca navigazione. E possiamo iniziare a vedere come queste tecniche possano essere i primi passi per utilizzi più complessi.
Percui, quando vogliamo costruire contesti di visualizzazione strutturati all’interno di un sito con molti dati, ricordiamoci: possiamo fare molto con un codice pulito e accessibile e un pò di semplice CSS.