Grafici a barre accessibili

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.


Pubblicato

in

,

da

Tag:

Commenti

3 risposte a “Grafici a barre accessibili”

  1. Avatar Diego La Monica
    Diego La Monica

    In base alla segnalazione di alcuni di voi, ho provveduto a sistemare l’incompatibilità che si presentava sulle varie versioni di Internet Explorer.
    Sostituendo il commento condizionale dell’esempio 5 con quanto segue, le etichette descrittive di ciascuna barra saranno posizionate correttamente nel posto in cui dovrebbero essere:

    <!--[if lt IE 7]>
    <style type="text/CSS">
    .graph_area .label{
    margin-left: -50px
    }
    </style>
    <![endif]-->
    <!--[if lte IE 7]>
    <style type="text/CSS">
    span.chart .info, span.chart2 .info{
    margin-top: 5px;
    margin-left: 2%;
    display: block !important;
    }
    </style>
    <![endif]-->
    
  2. Avatar Federico Volpini
    Federico Volpini

    il “quanto segue” all’interno del tuo commento risulta illeggibile (scritta bianca su sfondo verde-chiaro).

    ;)

    1. Avatar Diego La Monica

      Hai ragione Federico, provvederò quanto prima a sistemare questo maledetto CSS. :)

%d blogger hanno fatto clic su Mi Piace per questo: