2.1.4. Slideshows

A slideshow is a scrollable content panel that fits into a small space.

They generally include a system of pagination, navigation arrows, and/or a system for pausing or advancing the content in the case of a slideshow with automatic scrolling.

With regards to accessibility, two types of slideshow can be distinguished:

1. Slideshows with automatic scrolling.
2. Slideshows with manual scrolling.

An example of the basic HTML code for both types of slideshow is shown below. This code should be modified according to the context, especially with respect to the content of the panels.

<ul id="slideshow">
    <li class="panel" id="panel-1">
        Content of panel 1.
    </li>
    <li class="panel" id="panel-2">
        Content of panel 2.
    </li>
    <li class="panel" id="panel-3">
        Content of panel 3.
    </li>
</ul>

Without JavaScript, all the panels are displayed.

The scripts must handle the following points:

• An element for pausing or restarting the movement of the slideshow is included in the DOM, before the content of the panels.
• The title of this element changes dynamically according to whether the slideshow is paused or scrolling.
• The panels that are not displayed on the screen are moved outside the screen with the CSS position: absolute; and left: -999999px;. They are not hidden with display: none;.
• Then, if the panels contain interactive elements, a script handles the navigation with the keyboard:
  • Only the content of the active panel is tabulable. To obtain this, apply a tabindex=“0”, or delete the tabindex attribute on all the interactive elements contained in the panel (links, buttons, form fields, etc.).
  • To prevent the focus being set on the content of panels that are not displayed on the screen, a tabindex=”-1” is applied on all the interactive elements contained in these panels.
  • This behaviour is applied each time that a new panel is displayed.

The resulting code with JavaScript is as follows:

<button id="pause-play">Pause</button>
 
<ul id="slideshow">
    <li class="panel" id="panel-1">
        Content of panel 1 (hidden) with <a href="#" tabindex="-1">a link</a>.
    </li>
    <li class="active-panel panel" id="panel-2">
        Content of panel 2 with <a href="#">a link</a>.
    </li>
    <li class="panel" id="panel-3">
        Content of panel 3 (hidden) with <button tabindex="-1">a button </button>.
    </li>
</ul>

<button id="pause-play"><img src="images/pause.png" alt="Pause" /></button>

The scripts must handle the following points:

• An element for displaying the previous panel is included in the DOM, before the content of the panels.
• An element for displaying the following panel is included in the DOM, after the content of the panels.
• The panels that are not displayed on the screen are hidden using CSS with the property display: none;.

The resulting code in JavaScript is as follows:

<button id="previous">Previous</button>
 
<ul id="slideshow">
    <li class="panel" id="panel-1">
        Content of panel 1 (hidden).
    </li>
    <li class="active-panel panel" id="panel-2">
        Content of panel 2.
    </li>
    <li class="panel" id="panel-3">
        Content of panel 3 (hidden).
    </li>
</ul>
 
<button id="next">Next</button>

Démonstration à venir.