Per star rating si intende un sistema a immagini con cui visualizzare i voti assegnati dagli utenti a determinati contenuti di un sito. In genere le immagini usate sono piccole stelle (star). Un numero maggiore di queste immagini indica un voto superiore assegnato al contenuto (per esempio un prodotto o un articolo). Il problema di accessibilità posto da questa soluzione è che molto spesso l'elemento che contiene le immagini è privo di contenuto effettivo, essendo queste ultime interamente generate usando la tecnica delle sprite CSS. Possiamo ovviare facilmente a questo problema utilizzando la tecnica della sostituzione del testo con immagini. Vediamo come.
Questa è la nostra struttura HTML, in cui i voti sono già stati generati dal server:
<ul id="gallery">
<li><img src="1.jpg" alt="" />
<div class="rating five">Voto: 5</div></li>
<li><img src="2.jpg" alt="" />
<div class="rating four">Voto: 4</div></li>
<li><img src="3.jpg" alt="" />
<div class="rating three">Voto: 3</div></li>
<li><img src="4.jpg" alt="" />
<div class="rating two">Voto: 2</div></li>
<li><img src="5.jpg" alt="" />
<div class="rating one">Voto: 1</div></li>
</ul>
Questo sistema di star rating è già accessibile, in quanto l'elemento che mostrerà i voti contiene già del testo esplicativo.
Ora dobbiamo applicare la tecnica delle sprite CSS all'elemento con classe rating utilizzando al contempo le altre classi CSS per il posizionamento verticale dell'immagine di sfondo in modo da mostrare 5, 4, 3, 2 e infine una sola stella. Per rendere il tutto funzionale, dobbiamo nascondere il testo all'interno dell'elemento tramite l'indentazione negativa:
#gallery li div.rating {
width: 104px;
height: 16px;
margin: 0.4em auto;
text-indent: -1000em;
background-image: url(star-rating.png);
background-repeat: no-repeat;
}
.five {
background-position: 0 -77px;
}
.four {
background-position: 0 -60px;
}
.three {
background-position: 0 -43px;
}
.two {
background-position: 0 -28px;
position: relative;
top: 2px;
}
.one {
background-position: 0 -12px;
}
In questo modo il testo risulterà nascosto (ma sempre accessibile) e verranno mostrare solo le immagini che compongono la sprite CSS. Potete visionare l'esempio finale in questa pagina.