Comment nous avons rendu nos présentations accessibles avec AccesSlide

Mini guide de tweaking du framework AccesSlide. Au programme :

  • réorganiser l’arborescence pour faciliter l’usage hors connexion
  • créer un thème CSS
  • et ajouter des boutons dans les slides.

Réorganiser l’arborescence

L’arborescence d’AccesSlide comporte une quinzaine d’éléments, ce qui peut désorienter les utilisateurs auxquels ont envoie la présentation. Ils ne savent pas quel fichier choisir pour lancer la présentation :

L’arborescence d’AccesSlide

J’ai simplifié cette arborescence en laissant le fichier “index.html” à la racine et en regroupant les autres éléments dans un dossier “assets” :

L’arborescence simplifiée

Cette modification nécessite de modifier les liens dans le fichier index.html : rajouter “assets/” au début de l’url.

Exemple :
href=“css/font/small.css”
devient
href=“assets/css/font/small.css”

Liens à modifier dans le fichier index.html sont :

  • href=“css/font/small.css”
  • href=“css/style.css”
  • href=“css/themes/default.min.css”
  • href=“css/print.css”
  • src=“AccesSlide.js”
  • src=“lang/lang_fr.js”
  • src=“highlight/highlight.pack.js”
  • href=“en/index.htm”
  • href=“css/themes/default.css”
  • src=“img_slide/responsive.png”
  • src=“slide.js”
  • src=“afontgarde.js”

Créer un thème CSS

L’aide d’AccesSlide est claire sur ce sujet. Je vais plutôt me concentrer sur quelques astuces simples que j’utilise pour mon travail avec AccesSlide.

Distinguer les slides en cours d’édition

J’ai créé une classe CSS “en_cours_edition”.
Cette classe sert de pense-bête, en forçant un affichage avec un fond orange.
Cela permet de repérer le contenu qui n’est pas en état livrable :

.en_cours_edition {
 color: orange;
}

Distinguer les slides à masquer

J’ai créé une classe CSS “inutilise”.
Cette classe sert de pense-bête, en forçant un affichage en italique.
Cela permet de voir le contenu à éditer, avant de le masquer si nécessaire :

.inutilise {
 font-style: italic;
}

Ajouter des boutons pour suivre les actions utilisateur

Le besoin

Chez Octave nous souhaitions proposer des supports de recette de paramétrage. La forme est proche de celle de supports de formation :

  • dans un premier temps on montre comment réaliser une action
  • dans un second temps on demande à l’utilisateur d’indiquer s’il a pu réaliser l’action demandée.

Si tout s’est bien passé, l’utilisateur accède à “l’exercice” suivant. Par contre, s’il a rencontré un problème, il doit pouvoir nous le signaler en créant un “ticket” (un message dans notre système de support utilisateur).

Nous avons donc besoin de 3 “boutons” :

1- un lien vers la slide suivante

2- un lien vers notre système de gestion de tickets

3- un bouton pour que l’utilisateur indique qu’il a créé un ticket et passe à la slide suivante.

Mais en réalité notre premier “bouton” est sémantiquement un lien, qu’il va falloir déguiser en bouton avec un peu de CSS.

Des liens en forme de boutons

C’est typiquement le genre de manipulations non sémantiques que je préfère éviter.
Le web est fait de documents reliés entre eux par des liens hypertextes : changer l’apparence ou le comportement des liens, c’est violer les règles de base de l’interface utilisateur.

Cependant, d’un point de vue UX il m’a semblé plus naturel pour l’utilisateur de voir un groupe de boutons apparemment identiques en bas de page, même si l’un d’eux est un lien hypertexte alors que les autres sont de vrais boutons de formulaires.
Le résultat est bien plus intuitif pour l’utilisateur : 3 boutons (au lieu de 1 lien et 2 boutons) clairement libellés pour indiquer le résultat de l’exercice qu’il vient de réaliser.

Christiane Lagacé a publié un tutoriel qui résume les enjeux et les techniques possibles :

J’ai choisi d’associer à la classe btn d’AccesSlide une nouvelle classe stylebouton, qui se charge d’uniformiser l’aspect des vrais et des faux buttons.

On ne peut pas avoir plusieurs boutons de validation pour un formulaire. Chaque bouton est donc dans son propre formulaire, la seule donnée à retourner au serveur étant le résultat de l’exercice (en fait, un booléen) :

<div class=”resultat_exercice”> 
 <span>
 <! — Cette span permet de répartir correctement horizontalement le <a> et les <button> 
 pour donner au <a> un conteneur comme le <form > des <button>.
 C’est correct d’un point de vue sémantique et ça évite du CSS lourd.
 → 
 <a href=”http://example.com” target=”_blank” class=”btn stylebouton”>Créer un ticket</a> 
 </span>
 <form>
 <button type=”button” data-slide=”2" class=” btn stylebouton btn-next ticket_cree”>
 J’ai créé un ticket, exercice suivant
 </button>
 </form>
 <form>
 <button type=”button” class=”btn stylebouton btn-next pas_de_ticket”>
 Exercice validé, je passe au suivant
 </button>
 </form> 
 </div>

Note : l’attribut data-slide et la classe btn-next sont utilisés par AccesSlide pour gérer la navigation.

Un style CSS uniformise l’aspect du lien et des buttons :

.resultat_exercice .btn.stylebouton {
 border-radius: 1px;
 border: solid thin #929292;
 text-shadow: none;
 background: #F6F6F6;
 background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD);
 padding: 3px 8px;
 margin: 2px;
 text-decoration: none;
}

On inverse le relief du bouton lorsqu’il est survolé :

.resultat_exercice .btn.stylebouton:hover {
 background-image: linear-gradient(to bottom, #DDDDDD, #F6F6F6); 
}

Un style CSS gère le focus :

.btn
a:focus,
.resultat_exercice a:focus,
select:focus,
button:focus {
 outline: 2px solid yellow;
}

Une couleur de base différente est affectée à chacun des 3 boutons :

button.btn.stylebouton.pas_de_ticket {
 background: #9DCD5D;
 background-image: linear-gradient(to bottom, #F6F6F6, #9DCD5D);
}
button.btn.stylebouton.pas_de_ticket:hover {
 background-image: linear-gradient(to bottom, #9DCD5D, #F6F6F6); 
}

Modifier les outils de navigation

Les outils de navigation d’AccesSlide sont très riches, ce qui peut dérouter certains utilisateurs lorsque le formateur leur envoie ce support.

Outils de navigation d’Accesslide

Ainsi l’accès direct à une slide par son numéro est fourni via : 
1- je choisis le numéro de slide dans la liste déroulante (à droite du bouton “précédent”)
2- je clique sur le bouton “avance rapide”.
Mais cette manœuvre ne se révèle pas intuitive pour les béotiens.

J’ai donc décidé de simplifier le menu de navigation, en ôtant cette navigation rapide qui fait double emploi avec le sommaire :

Outils de navigation d’AccesSlide simplifiés

Ces outils sont générés en javascript après le chargement du document html.
Le code à modifier se trouve dans le fichier AccesSlide.js :

Ligne 332 : supprimer le Json configurant le bouton select-goto
Ligne 432 : supprimer l’appel de la fonction TocP(), seulement à cet endroit !
Ligne 467 : supprimer les gestionnaires d’événement associés aux éléments html à supprimer
Ligne 707 : mettre en commentaire le code de la fonction TocP()
Ligne 1155 : supprimer le code de création du l’élément html select-goto (entre //Select + button et // Next)

Les fonctions de navigation

On remarque au passage la mécanique d’AccesSlide : la fonction GotoSlide() assure l’affichage d’une slide sélectionnée dans le sommaire ou la liste des numéros de slides.
On pourrait imaginer utiliser un timer pour assurer un défilement automatique du diaporama.

Les fonctions GotoNext() et GotoPrev() se chargent du changement de slide lors du clic sur le bouton idoine.

Le clic n’importe où sur la slide déclenche également l’exécution de GotoNext(). Ce comportement peut être désactivé via le menu de configuration.

Pour aller plus loin

  • L’aide d’AccesSlide vous aidera à vous familiariser avec le framework.
  • Vous pouvez aussi vous inspirer d’AccessReader, le lecteur accessible basé sur AccesSlide. Il est utilisé pour des rapports annuels de la SNCF :
  • Gaël Poupard a également réalisé un tutoriel sur Accesslide (création de thème, transition CSS, etc.) :

Suite de nos aventures avec AccesSlide :