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

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.