A HTML5-CSS3-JS framework for accessible keynotes.
Put the slides in the
main element with
section elements associated with a
section elements can be imbricated in
The first and the last slide need an extra class: respectively a
Short example of structure
<section class="slide"> <h2>Heading of the slide</h2> [content] </section> <section class="slide" aria-label="heading of the slide"> [content] </section>
html elements of a slide can be hidden using the
Cmasque class, they will appear with the action next slide.
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;
- a pagination;
- a configuration button.
LEFT ARROWPrevious slide
ALT + 0 (zero)Table of contents
To go to the next slide with Jaws: ignore the next keystroke (using INSERT + 3) then press SPACE to make the slideshow scroll.
With NVDA, ignoring the next key is not necessary, the SPACE keystroke works.
You can navigate in the slideshow with a remote.
Use the equivalent of
LEFT ARROW and
The available effects can be set in the configuration panel.
Create your own effect:
- Create a
class, for example
- In the AccesSlide.js file, create an entry in the
configobject (see the instructions in the file at the
- In the language file: create an entry for the tag's effect. Warning: the entry in the language file must have the same name than the
2 CSS files are necessary:
Several themes are delivered with AccesSlide in the folder css/themes.
<!-- Theme stylesheet --> <link rel="stylesheet" href="css/themes/default.css" type="text/css" media="all" />
The CSS is generated by the post-processor Myth.
Every file is also available in a non-minified version. This lets you change or create your own CSS without using a post-processor.
Automation with Grunt
A minimal Grunt configuration is also available for CSS compilation. 4 modules are configured in Gruntfile.js:
- grunt-myth: to compile CSS;
- grunt-contrib-cssmin: to minify CSS;
- grunt-combine-media-queries: to combine media queries;
The slideshow will adapt to the size of the font and the size of the window.
A print.css style sheet provides a layout for printing from the browser (Ctrl + p)
Only some of the styling from the chosen theme is kept on print (property
all from the theme's CSS). To hide an element or an entire section on print, add a
<section class="slide noprint"> [content] </section>
Customizing the interface
Icons (toolbar, configuration panel) are generated thanks to fontawesome.
If the font is not loading, images in the img folder take over. This fallback is provided by the a font garde script from the Filament Group.
AccesSlide CSS files don't include the entire fontawesome library. To edit an icon, check the fontawesome documentation and edit the AccesSlide CSS file with the required code.
You will find these parameters in the configuration panel. The parameters are persistent (use of
cookies or of
localStorage when possible). Use the Default button to go back to the default configuration.
- Slide number Read the slide number when displayed.
- Hidden content Beep when a hidden content appears.
- Slide Beep when displaying a slide.
- First slide Beep at the first slide.
- Last slide Beep at the last slide.
- Heading Read the heading of the current slide.
- Window heading Update the window heading when a slide is displayed.
- Next button Place the focus on the “Next” button when the slideshow is loading.
- Click Remove the click action (and the space bar) to display the next slide.
- Table of contents: Chose the behavior of the table of contents (modal or modeless). Slides are resized if the table of contents is modeless.
- Outline view: Display the slideshow linearly.
Configure these parameters in the configuration panel.
You can use your own scripts in the html page or in the slide.js file.
The outline view displays the slideshow linearly, allowing you to prepare and check the content of your presentation more quickly.
configuration panel to activate the outline view.
CSS styling of the slides is kept, but the effects aren't. The pagination and markers are there to help visualizing the content of each slide.
All elements of the interface can be localized using a language file (lang folder).
To use a language file, edit the file path in the
head of the page. Here is an example for the French file:
Create a language file
- Open the 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 language file using the filename
Check out the live demo: www.accesslide.net