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

La soluzione

Proviamo ad immaginare un grafico a barre orizzontali (barre che partono dalla sinistra per arrivare a destra). Bene adesso disegnamolo pensando anche all’accessibilità.
Un grafico è racchiuso solitamente in un’area (un box). Quindi la prima cosa da fare è creare il proprio box in HTML.

<div> </div>

A questo box associamo uno stile decorativo scrivendo in un CSS (nella stessa pagina o in un file esterno)

.graph_area{
                border: 1px solid #a0a0a0;
                background-color: #f0f0e0;
                width:  300px;
                height: 200px;
                margin-left: 100px;
                padding-left: 2px;
                padding-right: 4px;
        }

Se proviamo a salvare quanto abbiamo scritto ed aprirla con il browser ci troveremo con una pagina con un box grigio ingiallito dal bordo grigio leggermente spostato sulla destra.

Abbiamo appena costruito il contenitore del nostro Grafico. Ed è disponibile nell’Esempio1.

Bene, a questo punto andiamo a rappresentare una barra del grafico. Non per una questione politica e nemmeno per una non questione politica il grafico è di colore rosso: mi piace come colore.

Per una questione che spiegherò dopo un grafico è integrato in una sezione. Il grafico al suo interno mantiene l’informazione sulla percentuale:

        <div class="section">

                <span class="chart" style="width:28%;">

                        <span class="info" >28%</span>

                </span>

        </div>

Solitamente un grafico è rappresentato oltre che con delle barre orizzontali anche da etichette che aiutano nella comprensione dei dati rappresentati da ciascuna barra. Notate che l’unica forzatura che gli si applica a livello di HTML è lo stile in linea per definirne la dimensione (width: 28%).

Le regole da applicare a questo blocco html è il seguente: 

        .chart{
                display: block;
                background-color: #800000;
                margin-top: 10px;
                border: 1px solid #900000;
                float: left;
                height: 2em;
        }

Ciascuna barra è di colore rosso come avevo detto ed è alta 2em (nell’esempio allegato 1em = 10px, ne consegue quindi che 2em = 20px).

Talvolta sui grafici sono riportate anche delle etichette che agevolano la comprensibilità dei contenuti. Essendo però l’etichetta riferita a ciascuna, integreremo l’etichetta nella sezione. Anche per coerenza e comprensibilità del codice: 

        <span class="label"> Firefox:</span>
        <div class="section">
                <span class="chart" style="width:28%;">
                        <span class="info" >28%</span>
                </span>
        </div>

Proviamo ad immaginare dunque: le etichette saranno esterne al box sulla sinistra in corrispondenza di ciascuna barra. Quindi le regole di stile da applicare saranno le seguenti: 

        .graph_area .label{
                position: relative;
                display: block;
                float: left;
                clear: left;
                margin-left: -100px;
                margin-top: 10px;
                width: 100px;
                height: 2em;
                border-bottom: 1px dotted #a0a0a0;
        }

Il nostro grafico è completato ed è disponibile nell’esempio 3!

Ma non sono soddisfatto a pieno della soluzione presentata. Quindi estendiamo il grafico!

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).

    ;)