Un diaporama sur la page d'accueil, s'il le faut vraiment

Pierre Jourdain le 23/07/2013 - Réagissez

Traduction de l'article en néerlandais Een slideshow op de homepage, als het echt moet.

En deux mots

  • n'utilisez pas de diaporama/slideshow sur votre page d'accueil.
  • ils ne sont pas accessibles comme tels et les utilisateurs les ignorent
  • si vous souhaitez néanmoins en placer un, nous vous conseillons ce jQuery slideshow (Github) adapté.

De nombreux sites web recourent à un diaporama ou carrousel pour attirer l'attention sur des produits ou services. Par exemple: SlideJS, construit avec jQuery.

capture d'écran slidejs

Pourquoi ne pas les utiliser

Un diaporama peut servir à présenter agréablement les photos d'une galerie par exemple. Mais lorsqu'on les trouve sur la page d'accueil, ils servent le plus souvent à attirer l'attention sur des parties spécifiques du site. Dans ce contexte, vous ne les utiliserez pas pour les raisons suivantes:

  • L'analyse faite avec Google Analytics de l'utilisation du diaporama du site de University of Notre Dame montre que seuls 1% des visiteurs cliquent une des diapositives. De ce 1 %, 84 % ne cliquent que la première. D'autres études arrivent aux mêmes conclusions.

  • Banner blindness: les diaporamas sont souvent perçus comme étant de la publicité par les visiteurs et ne reçoivent pas beaucoup d'attention.

  • La majorité des diaporamas ne sont pas conviviaux. Ils démarrent automatiquement et sont souvent trop rapides. Le contrôle (s'il existe) se fait en utilisant de très petits boutons. L'utilisateur n'a pas le contrôle. De plus chaque diaporama se comporte différemment ce qui contraint l'utilisateur à apprendre chaque fois le maniement de celui-ci. Cela détourne l'attention du visiteur du contenu de la page.

  • Ils ne sont généralement pas utilisables au clavier et sont source de confusion pour les personnes aveugles qui surfent avec un lecteur d'écran.

Pour en savoir plus:

Diaporama accessible

Si vous ne pouvez ou ne voulez pas renoncer à un diaporama, nous vous proposons une version accessible. Notre collègue Bart De Clercq a adapté le code Javascript de SlideJS pour le rendre accessible. Nous avons choisi SlideJS car il utilise le responsive design ainsi que les sprites CSS pour les boutons de commandes et également parce qu’il supporte les manipulations 'swipe' ou 'touch' des dispositifs mobiles.

Page démo du diaporama adapté. Vous trouverez la totalité du code sur Github.

capture d'écran diapositive Sean Connery

Adaptations

  • Il y a un titre de niveau 2 caché au-dessus de l'ensemble du diaporama qui indique: "Slideshow active slide 1 of 6". C'est surtout important pour les utilisateurs de lecteurs d'écrans. C'est pourquoi nous cachons ce texte visuellement. Pour les personnes voyantes, il est immédiatement clair qu'il s'agit d'un diaporama. Il n'est donc pas nécessaire de leur fournir cette information. De plus la mise en page existante ne prévoit généralement pas de place pour une titre.

    <h2 id="slidesjs-log" class="visuallyhidden">
    Slideshow active slide
    <span class="slidesjs-slide-number">1</span>
    of
    <span class="slidesjs-slide-total">6</span>
    </h2>
    /*
     * Hide only visually, but have it available for screenreaders: h5bp.com/v
     */
    
    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    
  • Seule la diapositive active est visible, les autres éléments sont cachés avec le code CSS display:none. Les images se trouvent à l'intérieur d'un lien. Leur attribut alt doit donc indiquer la destination du lien. Dans ce cas-ci, nous enverrons vers IMDB (Internet Movie DataBase).

    <div class="slidesjs-container" style="overflow: hidden; position: relative; width: 1170px; height: 668.571px;">
    <div class="slidesjs-control" style="position: relative; left: 0px; width: 1170px; height: 668.571px;">
    <div class="slidesjs-slide" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10;" slidesjs-index="0">
    <a title="Sean Connery on IMDB (Internet Movie DataBase)" href="http://www.imdb.com/name/nm0000125/?ref_=fn_al_nm_1">
    <img alt="Sean Connery on IMDB (Internet Movie DataBase)" src="img/sean_connery.png">
    </a>
    <div>
    </div>
    <div class="slidesjs-slide" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; display: none;" slidesjs-index="1">
    <div class="slidesjs-slide" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; display: none;" slidesjs-index="2">
    <div class="slidesjs-slide" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; display: none;" slidesjs-index="3">
    <div class="slidesjs-slide" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; display: none;" slidesjs-index="4">
    <div class="slidesjs-slide" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; display: none;" slidesjs-index="5">
    </div>
    </div>
    
  • Les boutons de commande sont des images d'arrière-plan. Ceux-ci ont une alternative textuelle cachée: "Play slideshow/Stop slideshow" (toggle), "Previous slide" et "Next slide".

    <a class="slidesjs-play slidesjs-navigation" href="#" title="Play slideshow" style="display: block;">Play slideshow</a>
    <a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop slideshow" style="display: none;">Stop slideshow</a>
    <a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous slide">Previous slide</a>
    <a class="slidesjs-next slidesjs-navigation" href="#" title="Next slide">Next slide</a>
    
    a.slidesjs-next, a.slidesjs-previous, a.slidesjs-play, a.slidesjs-stop {
        background-image: url("../img/btns-next-prev.png");
        background-repeat: no-repeat;
        float: left;
        height: 18px;
        overflow: hidden;
        text-indent: -9999px;
    }
    
  • En dessous, la liste des diapositives individuelles avec leur lien (puce sous le diaporama). Ces images ont également une alternative textuelle cachée avec CSS.

    <ul class="slidesjs-pagination">
    <li class="slidesjs-pagination-item active">
    <a href="#" data-slidesjs-item="0" title="Active slide 1">Active slide 1</a>
    </li>
    <li class="slidesjs-pagination-item">
    <a href="#" data-slidesjs-item="1" title="Show slide 2">Show slide 2</a>
    </li>
    <li class="slidesjs-pagination-item">
    <a href="#" data-slidesjs-item="2" title="Show slide 3">Show slide 3</a>
    </li>
    <li class="slidesjs-pagination-item">
    <a href="#" data-slidesjs-item="3" title="Show slide 4">Show slide 4</a>
    </li>
    <li class="slidesjs-pagination-item">
    <a href="#" data-slidesjs-item="4" title="Show slide 5">Show slide 5</a>
    </li>
    <li class="slidesjs-pagination-item">
    <a href="#" data-slidesjs-item="5" title="Show slide 6">Show slide 6</a>
    </li>
    </ul>
    
    .slidesjs-pagination li a {
        background-image: url("../img/pagination.png");
        background-position: 0 0;
        display: block;
        float: left;
        height: 0;
        overflow: hidden;
        padding-top: 13px;
        width: 13px;
    }
    
  • Le comportement souhaité lors de la navigation entre les diapositives est problématique: si vous cliquez sur la flèche "Next slide" vaut-il mieux que le focus se déplace vers la photo ou reste sur le lien "Next slide" ? Pour les utilisateurs de clavier il est préférable que le focus ne se déplace pas. Ainsi, il est possible de naviguer à travers toutes les diapositives rapidement. Par exemple, "Next slide - Next slide - Next slide". Si le focus se déplaçait, il faudrait de nombreuses tabulations pour atteindre le lien "Next slide". Pour les utilisateurs de lecteurs d'écran il est préférable de déplacer le focus car ils ne voient pas que la diapositive a changé. Ce déplacement du focus permet à l'utilisateur de comprendre ce qui s'est passé.

Conclusion

  • n'utilisez pas de diaporama/slideshow sur votre page d'accueil.
  • ils ne sont pas accessibles comme tels et les utilisateurs les ignorent
  • si vous souhaitez néanmoins en placer un, nous vous conseillons ce jQuery slideshow (Github) adapté.

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>