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
index.htm file to create a presentation.
Put the content of a slide between a
<section class="slide"> [your slide] </section>
Note that the first and the last slide must use an extra class (
end) for the layout to be properly managed.
<section class="slide couv"> [first slide] </section>
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>
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.
Click: to go to the next slide ;
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.
Use the configuration panel to :
- enable or disable the accessibility options ;
- customize behaviour of the slideshow ;
- choose the animation effects.
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.
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.
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.
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.
AccesSlide themes are CSS files.
Creating your own theme is really easy :
- Add your own CSS file theme in the
- 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" />
Likewise, you can very simply create your own animations effects, using only CSS3 :
- Create a CSS 3 animation class.
- In the file
AccesSlide.js, create an entry in the
configobject, at the
Effectssection. Use the model provided in the .js file to help you.
- 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
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 -->
To create a new language file :
- Open a language file with a text editor.
- Edit the buttons labels
label, image alternatives
alt, options values
valueof the effects list, buttons or windows titles
titleand help messages
- Save your file using the filename
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).
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.