AccesSlide : create accessible presentations

AccesSlide is an accessible, easy-to-use and customizable JavaScript presentation framework.

Introduction

After an unsuccessful search for a presentation framework that would fit our need, we decided to make our own.

To learn more about how AccesSlide came into being, read our blog post : AccesSlide, finally an accessible slideshow.

To see AccesSlide in action, check the dedicated website : accesslide.net/en

Quick user guide

Download AccesSlide from the GitHub repository.

Create a presentation

Edit the index.htm file to create a presentation.
Put the content of a slide between a section.
<section class="slide"> [your slide] </section>

Note that the first and the last slide must use an extra class (couv et end) for the layout to be properly managed.
<section class="slide couv"> [first slide] </section>

Every html elements of a slide can be hidden using the Cmasque class, they will appear with the action next slide.
<p class="Cmasque">A hidden content</p>

Navigation bar

The navigation bar has (in order of appearance) :

  • a previous button ;
  • a selection list : select the number of the slide you want to reach ;
  • a next button ;
  • a table of contents : reach a slide through its title (keyboard shortcut : Alt + 0) ;
  • a pagination ;
  • a configuration button.

Keyboard navigation

Use :

  • SPACE or RIGHT ARROW or Click : to go to the next slide ;
  • SHIFT + SPACE or LEFT ARROW : to go to the previous slide ;
  • Start : to go the first slide ;
  • End : to go the last slide ;
  • ALT + 0 (zero) to open the table of contents.

Configuration panel

Use the configuration panel to :

  • enable or disable the accessibility options ;
  • customize behaviour of the slideshow ;
  • choose the animation effects.

Accessibility

We added functionnalities for enhancing accessibility :

  • sound to signal when the slides are displayed ;
  • voicing of the heading of the current slide right away or using the window heading ;
  • voicing of the current page ;
  • focus on the “Next” button at the opening of the slideshow.

Behaviour

You can use the table of contents as a modal window. If you don’t, it will appear at the right of the presentation.
You can also disable the mouse click. This is useful if you want to interact more easily with the content of the slideshow.

Outline view

The outline view displays the slideshow linearly, allowing you to prepare and check the content of your presentation more quickly.

The CSS styling of the slides is kept, but the effects aren’t.

Effects library

By default, AccesSlide comes with 4 effects. You can add personal effects if you want.

Open the configuration panel and choose the wanted animation effect.

Customization

AccesSlide themes are CSS files.
Creating your own theme is really easy :

  1. Add your own CSS file theme in the css/themes folder.
  2. Apply your theme or one of the default themes by editing the link of the stylesheet.
    <!-- Theme stylesheet -->
    <link rel="stylesheet" href="css/themes/default.css" type="text/css" media="all" />

CSS effects

Likewise, you can very simply create your own animations effects, using only CSS3 :

  1. Create a CSS 3 animation class.
  2. In the file AccesSlide.js, create an entry in the config object, at the Effects section. Use the model provided in the .js file to help you.
  3. Add the label of your effect in the language file (see below). It will be used as a label in the effects list of the configuration panel.

Warning : the entry in the language file must have the same name than the config object.

Localization

All elements of the interface can be localized using a language file (lang folder). To change the language of AccesSlide interface, just call the language file :

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

To create a new language file :

  1. Open a language file with a text editor.
  2. Edit the buttons labels label, image alternatives alt, options values value of the effects list, buttons or windows titles title and help messages help.
  3. Save your file using the filename lang_[language code].js.

CSS and automation

The CSS is generated by the post-processor Myth.

Source files are in the css/sources folder and in the css/sources/themes folder for themes.
Compiled files are in the css/themes folder for themes and in the css/ folder for the general layout.

Every file is also available in a non-minified version. This lets you change or create your own CSS without using a post-processor.

A minimal Grunt configuration is also available for CSS compilation (compile, minify, media queries combination, watcher).

Responsive design

To provide the best user experience for tablets and smartphones users, we particularly worked on an responsive web design for AccesSlide.

Tested and approved

We have been using AccesSlide for several months now (during our training courses particularly or during conferences). It turned out to be particularly solid, easy to edit and completely accessible for screen reader users.