AccesSlide
AccesSlide est un framework JavaScript qui vous permet de produire des diaporamas accessibles, facilement utilisables et personnalisables.
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 !
Guide d’utilisation rapide
Vous pouvez télécharger AccesSlide à 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
.
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.
Pour cacher du contenu, qui apparaitra à la prochaine action (clic, bouton suivant…), vous pouvez utiliser la classe Cmasque
.
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 :
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 :
- Créer une classe d’animation CSS 3.
- Créer une entrée, dans le fichier
AccesSlide.js
, dans l’objetconfig
, à la sectionEffects
. Vous pouvez vous aider du modèle fourni dans le fichier.js
. - 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 :
Pour créer un nouveau fichier de langue :
- Ouvrez le fichier de langue avec un éditeur de texte.
- Modifier les étiquettes
label
des boutons, les alternativesalt
d’images, les intitulésvalue
des options de la liste des effets, les titrestitle
de boutons ou de fenêtres, les messageshelp
d’aide. - 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.