JavaScript: usare una struttura HTML semantica per gli slideshow

Uno slideshow JavaScript può e deve avere una struttura HTML semantica.

Dobbiamo tenere presente che la marcatura deve mantenere una struttura semantica anche in assenza di CSS e JavaScript. Per far questo dobbiamo conoscere quali componenti faranno parte della nostra struttura. Di solito questi componenti sono:

1. Un contenitore esterno.
2. Un contenitore interno (facoltativo).
3. Le slide.
4. I link della paginazione (facoltativi).
5. Due bottoni per andare avanti ed indietro nella sequenza delle slide (facoltativi).

I componenti 2, 4 e 5 sono facoltativi per i seguenti motivi:

• Le slide possono essere racchiuse da un singolo elemento, di solito quando l'effetto usato è di assolvenza/dissolvenza.
• I link della paginazione e i bottoni possono essere omessi quando gli slideshow sono automatici.

Ecco una possibile struttura HTML:

<div class="slider" id="main-slider"><!-- contenitore esterno -->
	<div class="slider-wrapper"><!-- contenitore interno -->
		<div class="slide">...</div><!-- slide -->
		<div class="slide">...</div>
		<div class="slide">...</div>
	</div>
	<div class="slider-nav"><!-- "Precedente" e "Successivo" -->
		<button type="button" class="slider-previous">Precedente</button>
		<button type="button" class="slider-next">Successivo</button>
	</div>
</div>

Si raccomanda di usare le classi sugli elementi degli slideshow perché potrebbero esserci più slideshow nella stessa pagina. Per identificarli univocamente possiamo usare un ID sul contenitore esterno.

Usiamo elementi button perché i link in questo caso non punterebbero a nessuna risorsa effettiva: potete consultare You can't create a button di Nicholas Zakas per approfondire i motivi di questa scelta.

Se le slide sono immagini, la struttura può essere modificata come segue:

<div class="slider" id="main-slider"><!-- contenitore esterno -->
	<div class="slider-wrapper"><!-- contenitore interno -->
		<img src="image1.jpg" alt="Descrizione" class="slide" /><!-- slide -->
		<img src="image2.jpg" alt="Descrizione" class="slide" />
		<img src="image3.jpg" alt="Descrizione" class="slide" />
	</div>
	<div class="slider-nav"><!-- "Precedente" e "Successivo" -->
		<button type="button" class="slider-previous">Precedente</button>
		<button type="button" class="slider-next">Successivo</button>
	</div>
</div>

Bisogna sempre usare attributi alt sulle immagini: non dimentichiamo mai l'accessibilità della nostra implementazione. Per usare i link della paginazione possiamo modificare il codice come segue:

<div class="slider" id="main-slider"><!-- contenitore esterno -->
	<div class="slider-wrapper"><!-- contenitore interno -->
		<div class="slide" id="slide-1">...</div><!-- slide -->
		<div class="slide" id="slide-2">...</div>
		<div class="slide" id="slide-3">...</div>
	</div>
	<nav class="slider-nav"><!-- link della paginazione -->
		<a href="#slide-1">1</a>
		<a href="#slide-2">2</a>
		<a href="#slide-3">3</a>
	</nav>
</div>

Abbiamo fatto puntare ciascun link ad una slide grazie all'ancora impostata sull'attributo href. Ricordate che il nostro slideshow deve essere accessibile anche senza JavaScript.

Altri slideshow combinano i bottoni di controllo con i link della paginazione:

<div class="slider" id="main-slider"><!-- contenitore esterno -->
	<div class="slider-wrapper"><!-- contenitore interno -->
	    <!-- slide -->
		<div class="slide" id="slide-1"></div>
		<div class="slide" id="slide-2"></div>
		<div class="slide" id="slide-3"></div>
	</div>
	<!-- "Precedente" e "Successivo" -->
	<div class="slider-nav">
		<button type="button" class="slider-previous">Precedente</button>
		<button type="button" class="slider-next">Successivo</button>
	</div>
	<!-- link della paginazione -->
	<nav class="slider-pagination">
		<a href="#slide-1">1</a>
		<a href="#slide-2">2</a>
		<a href="#slide-3">3</a>
	</nav>
</div>	

Se si considerano infine le slide come una serie di elementi, allora possiamo modificare la nostra struttura HTML come segue:

<ul class="slider-wrapper"><!-- contenitore interno -->
		<li class="slide" id="slide-1">...</li><!-- slide -->
		<li class="slide" id="slide-2">...</li>
		<li class="slide" id="slide-3">...</li>
</ul>

Se le slide sono in un ordine preciso (ad esempio una presentazione), potete anche usare liste ordinate (<ol>).