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.

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.

Rispondi

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