Grafici a barre accessibili – Parte 1

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.

Potrebbero interessarti anche i seguenti articoli

  • Grafici a barre accessibiliGrafici a barre accessibili Ogni volta che si fruisce un insieme di statistiche, la documentazione è corredata da grafici che ne agevolano la comprensione; su internet molti sono i siti che […]
  • Grafici a barre accessibili – Parte 4Grafici a barre accessibili – Parte 4 Miglioriamo il grafico – compatibilità con Internet Explorer 6 e precedenti Se provate il codice su Firefox, Internet Explorer 7 oppure Opera, […]
  • Grafici a barre accessibili – Parte 2Grafici a barre accessibili – Parte 2 La soluzione Proviamo ad immaginare un grafico a barre orizzontali (barre che partono dalla sinistra per arrivare a destra). Bene adesso disegnamolo pensando anche […]
  • Grafici a barre accessibili – Parte 3Grafici a barre accessibili – Parte 3 Estendiamo il grafico - parte 1: elementi storici Pensiamo di riportare anche un grafico storico (per esempio il picco delle visite storiche) integrato nello stesso […]
  • La spaziatura tra i testi ALTLa spaziatura tra i testi ALT Considerate alcune immagini ammucchiate insieme, per esempio come pulsanti di navigazione: <IMG SRC=univ.gif ALT="L'Università"><IMG SRC=citta.gif […]
Condividi:

Informazioni sull'autore

Diego La Monica
Diego La Monica
Programmatore esperto nei linguaggi del Web, ha scritto diversi articoli di carattere tecnico. Ha partecipato allo sviluppo di alcuni progetti OpenSource e ha tenuto diversi corsi per lo sviluppo di applicazioni web con strumenti Open Source. Le sue competenze in materia di analisi e sviluppo software gli hanno consentito di sviluppare un Framework Javascript per rendere più agevole lo sviluppo di applicazioni e siti web di ultima generazione cross-browser e multi piattaforma. La sua membership in IWA, gli ha consentito di partecipare ad alcuni gruppi di lavoro del W3C: HTML5 Working Group e Protocols and Formats Working Group al quale attualmente partecipa attivamente. Inoltre per IWA ha incarichi di responsabilità per la gestione e coordinamento delle Mailinglist tecniche e supporto alla manutenzione dei siti web.  Grazie alle sue competenza in materia di Standards, Usabilità ed Accessibilità ha avuto incarichi da diverse PA per lo  sviluppo e la resa di accessibilità dei siti istituzionali oltre ad avere incarichi per la manutenzione di software orientato al Web.

Commenti

Nessun commento

    Rispondi

    Link e informazioni