Gli slideshow realizzati con i CSS possono sembrare l'ultimo ritrovato in fatto di effetti da aggiungere ad un sito. Il problema di questi slideshow, tuttavia, è che per funzionare richiedono l'uso di una marcatura non semantica e non valida. Vediamo nel concreto perchè questi slideshow sono da evitare.
Osserviamo più da vicino uno di questi slideshow preso da Codrops:
<div class="sp-slideshow">
<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
<label for="button-1" class="button-label-1"></label>
<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
<label for="button-2" class="button-label-2"></label>
<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
<label for="button-3" class="button-label-3"></label>
<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
<label for="button-4" class="button-label-4"></label>
<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
<label for="button-5" class="button-label-5"></label>
<label for="button-1" class="sp-arrow sp-a1"></label>
<label for="button-2" class="sp-arrow sp-a2"></label>
<label for="button-3" class="sp-arrow sp-a3"></label>
<label for="button-4" class="sp-arrow sp-a4"></label>
<label for="button-5" class="sp-arrow sp-a5"></label>
<div class="sp-content">
<div class="sp-parallax-bg"></div>
<ul class="sp-slider clearfix">
<li><img src="images/image1.png" alt="image01" /></li>
<li><img src="images/image2.png" alt="image02" /></li>
<li><img src="images/image3.png" alt="image03" /></li>
<li><img src="images/image4.png" alt="image04" /></li>
<li><img src="images/image5.png" alt="image05" /></li>
</ul>
</div><!-- sp-content -->
</div><!-- sp-slideshow -->
Cosa ci fanno degli elementi dei form al di fuori del contesto di un form, unico contesto a loro proprio? La semantica scompare, ma quello che più preoccupa è che anche la validità della marcatura viene compromessa.
Il punto è che se non si utilizzano quegli elementi, lo slideshow non funziona. Infatti lo stato :checked è uno stato permanente, mentre lo stato :active è transitorio.
In altre parole non è possibile rendere semantica quella marcatura (ad esempio utilizzando link con ancore) senza pregiudicare il funzionamento dello slideshow. Per questo si sconsiglia l'uso di queste soluzioni preferendo invece una più logica implementazione JavaScript.