EUCOOKIELAW_BANNER_TITLE

  • I think that

    Making the Web is like playing a game. Standard, Accessibility and Usability are only few rules.
    No game is awesome if you don't follow the rules.

    International Webmasters Association

  • Subscribe to my blog via email

    Insert here your e-mail address and you will receive a message when a new post will come.

Grafici a barre accessibili

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!

3 thoughts on “Grafici a barre accessibili

  1. 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. Federico Volpini

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

    ;)