AccesSlide : Finally an accessible slideshow

AccesSlide is an accessible, easy-to-use and customizable JavaScript presentation framework. Here is the story of how it came into being.

As every firm who cares for accessibility, we searched for a presentation framework to create accessible slideshows. Some lacked functionnalities, others were too difficult to use (especially with a screen reader) and others were difficult to customize.

So we made our own !

Presentations almost accessible to everyone

There are many scripts to create slideshows that are said to be ‘accessible’ because they use HTML.

Some prefer to keep it simple, often at the expense of essential functionnalities such as the creation of a table of contents. Others have numerous functionnalities, like the well-known reveal.js framework, at the expense this time of the interface accessibility.

Instead of reinventing the wheel, we thought about improving the existing scripts, but we soon realized, it would be easier to start from scratch.

Presentations accessible to everyone

At Access42, we like to be thorough. That’s why we gave ourselves uncompromising goals.

We wanted a slideshow :

  • easy to make ;
  • easy to use, for screen reader users included ;
  • easy to customize (themes, animation effects) ;
  • and responsive, of course.

To tell you everything, we are quite proud of this first result, enough to publish it and to share it.

A long work of improvement

The AccesSlide project began last summer with first release, a bit raw but quickly functionnal.

Since, we have kept improving it. Everyone in the team has participated. We’ve tested it in-real life, with screen reader users also, who really appreciated it for being easy-of-use.

It is now a polished and robust product that has quite a few interesting functionnalities.

Accessible first

We added functionnalities for an enhanced accessibility that might help a lot users that would need it :

  • sound signals ;
  • voicing of headings and of the current page numer ;
  • enrichment of keyboard interactions.

Productive and simple

Entirely based on a HTML5 structure, creating slides is very simple. Simply use a succession of titled sections, with a slide class.

To prepare and check the content of your presentation more quickly, switch to the outline view to display the slideshow linearly.

Ergonomy of the interface

To manage each of theses functionnalities, simply open the panel configuration where you’ll find :

  • accessibility options ;
  • behaviour options ;
  • and a list of the available animation effects.

You can entirely customize and localize (by default, only French and English are available) the interface.

Finally, you can also control AccesSlide with a remote.

CSS customization and animation effects

The organization of CSS files have been strongly rationalized and ordered logically and thematically.

A theme is merely a CSS file added to the other CSS files used for the behaviour and animation effects.

Animation effects are particularly simple to implement. Simply create a CSS class and add some JavaScript parameters. The list of available effects will automatically be updated.

AccesSlide is of course responsive and has a particularly effective print style sheet.

And, for the most advanced users, AccesSlide uses the post-processor myth. A minimal Grunt configuration is also available for CSS compilation.

More technical informations are to be found in the dedicated page of Access42 Labs section.

The project is of course open source under GPL licence and published on GitHub.
But, no more talking, let’s see it in action : accesslide.net

Forum posts

Gaël Poupard,

C’est absolument génial, merci beaucoup !

Armony ALTINIER,

Merci Gaël pour tes encouragements, ça fait plaisir d’avoir des retours positifs et nous incite à continuer nos efforts.

À bientôt !
Armony

Any message or comments?

All fields are required

Who are you?

Enter your comment here

This form accepts SPIP shortcuts [->urls] {{bold}} {italics} <quotes> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.