AccesSlide

AccesSlide est un framework JavaScript qui vous permet de produire des diaporamas accessibles, facilement utilisables et personnalisables.

Préambule

Après des recherches infructueuses pour trouver un framework permettant de produire des présentations sous la forme de diaporama accessible qui nous convenait, nous avons décidé de faire le nôtre !

Pour en savoir plus sur AccesSlide vous pouvez consulter le billet de blog : AccesSlide, enfin un diaporama accessible.

Pour voir une démonstration, vous pouvez consulter le site dédié : accesslide.net

Guide d’utilisation rapide

Vous pouvez télécharger à partir du dépôt GitHub.

Créer votre diaporama

Éditer le fichier index.htm pour créer le diaporama.

Une diapo s’implémente avec un élément section.
<section class="slide"> [votre diapo] </section>Vous pouvez utiliser ce que vous voulez dans une diapo.

À noter que les diapos de début et de fin doivent utiliser une classe supplémentaire (couv et end) afin de gérer correctement la mise en page.
<section class="slide couv"> [première diapo] </section>
Pour cacher du contenu, qui apparaitra à la prochaine action (clic, bouton suivant...), vous pouvez utiliser la classe Cmasque.
<p class="Cmasque">Un contenu masqué</p>

Menu de navigation

Le menu de navigation contient respectivement :

  • un bouton précédent ;
  • une liste de sélection permettant d’atteindre rapidement une diapo par son numéro d’index ;
  • un bouton suivant ;
  • un bouton pour afficher le sommaire (raccourci clavier : Alt + 0) ;
  • l’index du diaporama ;
  • un bouton permettant d’afficher le panneau de configuration.

Navigation au clavier

La navigation s’effectue grâce aux touches suivantes :

  • Diapo suivante : Espace, Flèche droite, Clic de souris ;
  • Diapo précédente : Flèche gauche, MAJ + Espace ;
  • Première ou dernière diapo : Début et Fin.

Le panneau de configuration

Le panneau de configuration permet d’activer ou désactiver des options d’accessibilité, de personnaliser le comportement ou de choisir les effets d’animation.

Accessibilité

Nous avons implémenté des fonctionnalités d’amélioration de l’accessibilité :

  • des signaux sonores pour signaler l’affichage des diapos ;
  • la vocalisation du titre de la diapo courante, directement ou via le titre de la fenêtre ;
  • la vocalisation de l’index courant ;
  • le transfert du focus directement sur le bouton « suivant » à l’ouverture.

Comportement

Vous pouvez utiliser le sommaire comme une fenêtre modale ou comme un insert, à droite de la présentation.
Vous pouvez également désactiver le Clic de la souris, par exemple pour interagir plus facilement avec des éléments du contenu.

Le mode plan

Le mode plan propose une vue linéaire du diaporama en conservant les styles (mais pas les animations), ce qui se révèle particulièrement pratique en phase de conception.

La bibliothèque d’effets

Le panneau de configuration vous permet de choisir des effets d’animations (il y en a quatre par défaut), effets que vous pourrez enrichir à votre guise.

Personnalisation

AccesSlide utilise des « thèmes » sous la forme de fichier CSS qui viennent s’ajouter aux styles dédiés au comportement et aux effets d’animations.

Vous pouvez facilement créer votre propre thème en ajoutant votre propre fichier CSS de thème dans le dossier css/thèmes. Pour appliquer votre thème ou l’un de ceux proposés par défaut, il suffit de modifier la référence au fichier CSS :

<!-- Theme stylesheet -->
<link rel="stylesheet" href="css/themes/default.css" type="text/css" media="all" />

Effets CSS

De même que vous pouvez développer vos propres thèmes, vos pouvez également développer vos propres effets d’animation, exclusivement via CSS 3, de manière très simple.
Vous pouvez animer deux éléments :

  • un volet, superposé à la diapo (utilisé pour l’effet « flash » par exemple) ;
  • la diapo.

La création d’un effet d’animation passe par ces trois étapes :

  1. Créer une classe d’animation CSS 3.
  2. Créer une entrée, dans le fichier AccesSlide.js, dans l’objet config, à la section Effects. Vous pouvez vous aider du modèle fourni dans le fichier .js.
  3. Renseigner l’étiquette de votre effet dans le fichier de langue (voir ci-dessous) qui servira d’étiquette pour la liste des effets dans le panneau de configuration. Attention l’entrée dans le fichier de langue doit avoir le même nom que celle dans l’objet config.

Localisation

Par défaut, AccesSlide est disponible en français et en anglais.

Vous pouvez traduire intégralement l’interface à l’aide de fichier de langue, situés dans le dossier lang et qu’il suffit d’appeler de la manière suivante :

<!-- Theme stylesheet -->
<script type="text/javascript" src="lang/lang_fr.js"></script>

Pour créer un nouveau fichier de langue :

  1. Ouvrez le fichier de langue avec un éditeur de texte.
  2. Modifier les étiquettes label des boutons, les alternatives alt d’images, les intitulés value des options de la liste des effets, les titres title de boutons ou de fenêtres, les messages help d’aide.
  3. Enregistrer votre fichier de langue en utilisant le nom de fichier lang_[code de langue].js.

Gestion des CSS et automatisation

Le CSS est généré à l’aide du post-processeur grunt est à votre disposition pour la compilation des css (compilation, minification, regroupement des media queries et le watcher).

Vue responsive

Nous avons particulièrement travaillé sur le RWD afin de permettre la meilleure expérience utilisateur sur les tablettes ou les smartphones.

Testé et approuvé

Nous utilisons AccesSlide pour nos propres besoins depuis plusieurs mois, lors de nos formations par exemple. Il s’avère particulièrement robuste, facile à modifier et parfaitement accessible, particulièrement pour les utilisateurs de lecteurs d’écran.