Grafici 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 all’accessibilità.
Un grafico è racchiuso solitamente in un’area (un box). Quindi la prima cosa da fare è creare il proprio box in HTML.

<div class=”graph_area”>
</div>

A questo box associamo uno stile decorativo scrivendo in un CSS (nella stessa pagina o in un file esterno)

.graph_area{
    border: 1px solid #a0a0a0;
    background-color: #f0f0e0;
    width:  300px;
    height: 200px;
    margin-left: 100px;
    padding-left: 2px;
    padding-right: 4px;
}

Se proviamo a salvare quanto abbiamo scritto ed aprirla con il browser ci troveremo con una pagina con un box grigio ingiallito dal bordo grigio leggermente spostato sulla destra.
Abbiamo appena costruito il contenitore del nostro Grafico. Ed è disponibile nell’Esempio 1.
Bene, a questo punto andiamo a rappresentare una barra del grafico. Non per una questione politica e nemmeno per una non questione politica il grafico è di colore rosso: mi piace come colore.
Per una questione che spiegherò dopo un grafico è integrato in una sezione. Il grafico al suo interno mantiene l’informazione sulla percentuale:

<div class=”section”>
    <span class=”chart” style=”width:28%;”>
       <span class=”info” >28%</span>
    </span>
</div>

Solitamente un grafico è rappresentato oltre che con delle barre orizzontali anche da etichette che aiutano nella comprensione dei dati rappresentati da ciascuna barra. Notate che l’unica forzatura che gli si applica a livello di HTML è lo stile in linea per definirne la dimensione (width: 28%).
Le regole da applicare a questo blocco html è il seguente:

.chart{
    display: block;
    background-color: #800000;
    margin-top: 10px;
    border: 1px solid #900000;
    float: left;
    height: 2em;
}

Ciascuna barra è di colore rosso come avevo detto ed è alta 2em (nell’esempio allegato 1em = 10px, ne consegue quindi che 2em = 20px).
Talvolta sui grafici sono riportate anche delle etichette che agevolano la comprensibilità dei contenuti. Essendo però l’etichetta riferita a ciascuna, integreremo l’etichetta nella sezione. Anche per coerenza e comprensibilità del codice:

<span class=”label”> Firefox:</span>
<div class=”section”>
    <span class=”chart” style=”width:28%;”>
         <span class=”info” >28%</span>
    </span>
</div>

Proviamo ad immaginare dunque: le etichette saranno esterne al box sulla sinistra in corrispondenza di ciascuna barra. Quindi le regole di stile da applicare saranno le seguenti:

.graph_area .label{
    position: relative;
    display: block;
    float: left;
    clear: left;
    margin-left: -100px;
    margin-top: 10px;
    width: 100px;
    height: 2em;
    border-bottom: 1px dotted #a0a0a0;
}

Il nostro grafico è completato ed è disponibile nell’esempio 3!
Ma non sono soddisfatto a pieno della soluzione presentata. Quindi estendiamo il grafico!

Potrebbero interessarti anche i seguenti articoli

  • 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 […]
  • 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 1Grafici 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 […]
  • 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 […]
  • Giorno 25 – Usate barre orizzontali vere (o quasi)Giorno 25 – Usate barre orizzontali vere (o quasi) Giorno 25: Usate barre orizzontali vere (o quasi) Supponete di volere un divisore tra i vostri messaggi. Le normali barre orizzontali (tag <hr>) sono noiose, […]
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