Grafici 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 grafico.
Questo fa sempre parte della sezione di ciascuna barra, quindi basta modificare la section in questo modo:

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

Notate la presenza di un nuovo elemento span nell’HTML con classe chart2.
Le regole di stile applicate a questo elemento saranno le seguenti:

.chart2{
    display: block;
    background-color: #c0c0c0;
    margin-top: 10px;
    border: 1px solid #909090;
    float: left;
    height: 2em;
}

Insomma: identiche alle regole della classe chart, ma cambiando il colore!
Guardiamo il risultato… stupendo!!!
Ma non mi sento ancora realizzato…sono una persona incontentabile io!

Estendiamo il grafico – parte 2: l’informazione al passaggio del mouse

Per rendere maggiormente “cool” come direbbe un mio amico l’effetto di questo grafico, adesso faremo in modo che (sfruttando la potenza di CSS) le informazioni sulle percentuali saranno visualizzate solo al passaggio col mouse sulla relativa barra del grafico.
Bene allora dobbiamo metter mano solo al CSS ed aggiungere una serie di regole.

span.chart .info, span.chart2 .info{
    font-size: 1em;
    position: absolute;
    background-color: #fffff0;
    border: 1px solid #c00000;
    margin-top: 15px;
    margin-left: 30px;
    padding-top:1px;
    padding-left: 1px;
    height: 1.5em;
    display: none;
}

questo fa in modo che l’informazione risulti sfalsata di poco rispetto alla barra alla quale appartiene. Ma l’ultima regola ( display: none; ) ci dice che non verrà renderizzata dal browser. Quindi se provassimo ad eseguire ora il codice, ci accorgeremo che il grafico sarà identico a prima… ma senza etichette!
Quindi gestiamo la pseudo-classe :hover che ci consente di monitorare quando il mouse è su un elemento della pagina.

span.chart:hover .info, span.chart2:hover .info{
    display: block;
}

Abbiamo fatto… Ma… Ops… su Internet Explorer le etichette informative non funzionano affatto come ci aspettavamo. Che facciamo cancelliamo quello che abbiamo fatto? No! Sfruttiamo quando possibile la potenzialità dei CSS e per Internet Explorer usiamo i commenti condizionali, ai quali siamo tanto

purtroppo abituati.

<!–[if IE]>
    <style>
        span.chart .info, span.chart2 .info{
            margin-top: 5px;
            margin-left: 2%;
            display: block !important;
        }
    </style>
<![endif]–>

In alternativa potremmo modificare il codice così da sfruttare quanto già descritto in uno dei precedenti articoli: Tooltips senza Javascript.
Adesso su Internet Explorer funziona in modo leggermente differente: abbiamo le etichette leggermente sfalsate, e non scompaiono mai.

Dopo aver fatto tutto ciò diamo uno sguardo all’accessibilità: provate a disabilitare i CSS così come farebbe uno screen reader…
Cosa leggete?
Perfetto! Il nostro scopo è raggiunto!
Eccovi l’esempio completo.

Potrebbero interessarti anche i seguenti articoli

  • 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 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 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 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 […]
  • 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