Les solutions web existantes - Slidy HTML de Dave Ragget

Pour construire une présentation web avec Slidy HTML, voici les explications de Dave Ragget traduites en français.

Évaluation de l’accessibilité de Slidy HTML

La solution de construire une page (x)HTML garantit l’ accessibilité d’un certain nombre de points comme :

  • La langue de la page
  • La structure de la page (titres, listes d’énumération ordonnées ou non, paragraphes, etc.)
  • Les éléments sémantiques d’une page et leurs alternatives éventuelles (images, liens, abréviations, etc.)

Si le contenu d’un slide est trop important par rapport à la hauteur disponible du document, alors un ascenseur vertical apparaît.

Au clavier, la navigation se fait parfaitement (à condition de connaître les touches « de base » permettant les déplacements dans le document, à savoir :

  • Les touches Flèches gauche et droite pour avancer ou reculer dans le document
  • La barre espace pour avancer dans le document
  • La touche « a » pour supprimer l’effet du javascript et linéariser la page.
  • La touche « c » pour avoir la table des chapitres (ie. tous les titres cliquables et permettant d’aller à la diapositive désirée)

Slidy HTML propose cette même table des chapitres grâce à une liste déroulante en bas à gauche de l’écran. Contrairement à S5, il faut valider par la touche « entrée » lorsqu’une sélection est faite ; ce qui est mieux question accessibilité.

Attention  : Utiliser cette solution avec les lecteurs d’ écrans Jaws ou NVDA entraine quelques problèmes de conflits entre les raccourcis clavier des lecteurs d’écrans et les scripts permettant à la page HTML de se comporter en diaporama.

De plus, certaines fonctions comme le fait de pouvoir naviguer de titres en titres sont annihilées par la manipulation du DOM liée au script de Slidy HTML.

En effet, la navigation par titres est uniquement possible sur une partie du document (le slide affiché à l’écran) et non pas sur l’ensemble du document (cf. copie d’écran ci-après).

JAWS - Utilisation de la liste de titres avec Slidy HTML qui n'est effective que sur la diapositive courante

Exemples d’utilisation de Slidy HTML in vivo

Présentations de Dominique Hazaël-Massieux


Lire le troisième chapitre de mon mémoire : Les solutions web existantes - DOMSlides de Chris Heilmann

haut de page

Répondre à cet article

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom