Lo scopo di un grafico
Il grafico usualmente è utilizzato per mostrare l’andamento di un mercato o comunque di un generico valore nel tempo.
Solitamente un grafico è seguito sui libri da una leggenda che ne descrive velocemente il senso. Un esempio di etichetta potrebbe essere “densità della popolazione negli anni”. Sappiamo cosa contiene il grafico perché lo abbiamo letto, ma non sappiamo quali sono i valori in esso contenuti se questi non sono contenuti nel testo o (se lo fossero) se non lo avessimo ancora letto.
L’esempio più lampante che tutti i giorni abbiamo sotto gli occhi sono i contatori visite, Shinystat, toSend.it, ed altri esempi sono disponibili sulla rete. Attualmente tutti quanti soffrono di un gravissimo difetto: il non essere accessibili o non esserlo completamente. Alcuni perché fanno uso di Flash senza curarsi delle regole di accessibilità che questo mette a disposizione, altri perché fanno uso di una unica immagine elaborata sul server e restituendo quindi una didascalia per l’immagine: “Grafico delle visite per il mese di….”.
L’analisi
La soluzione che andremo ad implementare, fa uso semplicemente di XHTML e CSS.
Come al solito per evitare problemi di compatibilità con alcune policy aziendali, non si farà uso di Javascript. Quindi mettiamoci all’opera!
Il concetto di base è creare un grafico a barre orizzontali in un box.
Ciascuna barra sarà proporzionale al valore che dovrà indicare.
Ciascuna barra riporterà l’informazione sul valore percentuale da rappresentare.
Nel caso non fossero supportati i CSS (browser testuali o screen reader), il significato del grafico non si perderà riportando descrizioni esatte sul cosa si sta rappresentando.
Commenti
3 risposte a “Grafici a barre accessibili”
In base alla segnalazione di alcuni di voi, ho provveduto a sistemare l’incompatibilità che si presentava sulle varie versioni di Internet Explorer.
Sostituendo il commento condizionale dell’esempio 5 con quanto segue, le etichette descrittive di ciascuna barra saranno posizionate correttamente nel posto in cui dovrebbero essere:
<!--[if lt IE 7]> <style type="text/CSS"> .graph_area .label{ margin-left: -50px } </style> <![endif]--> <!--[if lte IE 7]> <style type="text/CSS"> span.chart .info, span.chart2 .info{ margin-top: 5px; margin-left: 2%; display: block !important; } </style> <![endif]-->il “quanto segue” all’interno del tuo commento risulta illeggibile (scritta bianca su sfondo verde-chiaro).
;)
Hai ragione Federico, provvederò quanto prima a sistemare questo maledetto CSS. :)