Een slideshow op de homepage, als het echt moet

Gijs Veyfeyken op 16/07/2013 - 1 reactie

tl;dr

  • gebruik geen slideshow op uw homepage
  • ze zijn niet toegankelijk out of the box en gebruikers negeren het
  • als het echt moet, raden we deze aangepaste jQuery slideshow (Github) aan

Ontzettend veel websites gebruiken een slideshow of carrousel op hun homepage om zaken in de kijker te zetten. Een voorbeeld: SlideJS, gebaseerd op jQuery.

screenshot slidejs

Tegenargumenten

Een slideshow kan een efficiënte manier zijn om een fotogalerij van een specifiek onderwerp te tonen. Op homepages wordt het meestal gebruikt om specifieke onderdelen van de website in de kijker te zetten. In die context gebruikt u het beter niet:

  • Een Google Analytics onderzoek van de slideshow op de site van University of Notre Dame toont aan dat slechts 1% van bezoekers effectief op één van de slides klikt. Van die 1% clicks behoort 84% toe aan de eerste slide. Andere studies leveren gelijkaardige resultaten.

  • Banner blindness: slideshows zien er meestal uit als banners. De gebruiker associeert het met reclame en slaat het daarom over.

  • Ze zijn meestal ongebruiksvriendelijk. Ze bewegen automatisch en vaak te snel. De bediening (als er die is) bestaat vaak uit piepkleine knopjes. De gebruiker is niet "in control". Elke slideshow gedraagt zich ook verschillend, waardoor de gebruiker telkens moet uitzoeken hoe de bediening werkt. En het leidt de aandacht af van andere zaken op de pagina.

  • Ze werken meestal niet met het toetsenbord en zijn verwarrend voor blinden die surfen met een screenreader.

Meer lezen?

Toegankelijkere versie

Als u niet van een slideshow kan of wil afstappen, stellen we onderstaande implementatie voor. Bart De Clercq dook in de Javascript van de eerder vermelde SlideJS om die zo goed mogelijk aan onze wensen te laten voldoen. We vertrokken vanuit SlideJS omwille van het responsive design, het gebruik van CSS sprites voor de bedieningsknoppen en omdat het ook werkt met touch (swipe of vegen) op mobiel.

Demopagina van de aangepaste slideshow met James Bond acteurs. U vindt de volledige code op Github.

screenshot slide Sean Connery

Aanpassingen

  • Er staat een verborgen kop boven die het geheel verduidelijkt en zegt welke slide actief is "Slideshow active slide 1 of 6". Dit is vooral belangrijk voor screenreadergebruikers. Daarom verbergen we die kop visueel. Voor ziende gebruikers is het principe van de slideshow direct duidelijk en dus overbodig. Een extra kop past vaak ook niet in de layout.

    <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;
    }
    
  • Enkel de actieve slide is zichtbaar, de andere elementen worden verborgen met CSS display:none. De afbeeldingen staan in een link, dus beschrijft de alt-tekst het doel van de link, de "call to action". In dit geval linken we naar 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>
    
  • De bedieningsknoppen zijn CSS background-images met verborgen, betekenisvolle linkteksten: Een toggle knop "Play/Stop slideshow", "Previous slide" en "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;
    }
    
  • Daaronder staat de lijst met de links (bolletjes) naar de individuele slides. Ook CSS background-images in combinatie met verborgen linkteksten. De linktekst voor de actieve slide verschilt van de andere.

    <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;
    }
    
  • Het gewenst gedrag bij het navigeren tussen de slides is een probleempunt: als men klikt op het pijltje voor "next slide" is het dan beter dat de focus verspringt naar de foto of blijft staan op de link "next slide"? Voor toetsenbordgebruikers verspringt de focus best niet. Zo kan men snel doorheen alle slides bladeren. Bijvoorbeeld "next slide - next slide - next slide". Als de focus zou verspringen, moet men telkens opnieuw naar de link "next slide" tabben. Voor screenreadergebruikers verspringt de focus best wel omdat ze niet zien dat de slide is gewisseld. Die verplaatsing van focus helpt om te begrijpen wat er gebeurd is.

Conclusie

  • gebruik geen slideshow op uw homepage
  • ze zijn niet toegankelijk out of the box en gebruikers negeren het
  • als het echt moet, raden we deze aangepaste jQuery slideshow (Github) aan

Reacties

Gijs Veyfeyken schreef 4 jaar geleden

Lees zeker ook even de bevindingen van AG Consult: Wat krijgt meer kliks: een carrousel of statische banners op je website?

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>