WebCssDesign

Comment créer widget diaporama accessible et utilisable pour votre site en utilisant le HTML, CSS et JavaScript (jQuery).

La partie la plus importante de tout bon site est une solide structure HTML. Une base sémantique signifie que le contenu de votre site web sera accessible dans presque tous les navigateurs clients.

La partie HTML
<div id= »slideshow »>
<div id= »slidesContainer »>
<div class= »slide »>
<!– Content for slide 1 goes here –>
<div class= »slide »><! – Contenu pour slide 1 va ici.–></div>
<div class= »slide »><! – Contenu pour slide 2 va ici.–></div>
<div class= »slide »><! – Contenu de diapositive 3 va ici.–></div>
<div class= »slide »><! – Contenu de diapositive 4 va ici.–></div>
</div>
</div>
</div>

<! – Diaporama HTML ->

Style du diaporama

#slideshow {
	margin:0 auto;
	width:640px;
	height:263px;
	background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
	position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}

/**
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

Pour #slidesContainer, nous avons mis le overflow la propriété d’auto pour que les barres de défilement apparaissent lorsque notre contenu déborde sur l’ensemble de la hauteur de 263px (la hauteur de nos diapositives).

Nous devons réduire la largeur de .slide 20px par classe pour tenir compte de la main droite la barre de défilement qui apparaissent lorsque JavaScript est désactivé.
Sans JavaScript, le contenu est encore accessible, mais les utilisateurs peuvent faire défiler vers le haut et vers le bas pour afficher l’aide de nos diapositives.

Pour la démonstration en live c’est par là :  live slideshow
Télécharger la sources avec les fichiers .PSD slick_accessible_slideshow.zip (ZIP, 2.8 MB)

Catégories: Ajax, Css
Tags: accessible, diaporama, jquery