AccesSlide Slideshow - Access 42

Structure

Put the slides in the main element with section elements associated with a slide class.

The first and the last slide have an extra class: respectively a couv and end class.

section elements can be imbricated in section elements.

Short example of structure

<section class="slide">
 <h2>Title of the slide</h2>
 [content]
</section>

<section class="slide" aria-label="title of the slide">
 [content]
</section>

Hide elements

Every html elements of a slide can be hidden using the Cmasque class, they will appear with the action next slide.

Example: there is three hidden elements in this slide.

• A hidden text,
• a second hidden text, a hidden inline element.

Navigation

The navigation bar has (in order of appearance):

1. a previous button;
2. a selection list: select the number of the slide you want to reach;
3. a next button;
4. a table of contents: reach a slide through its title;
5. the index (number of the current slide and total of slides);
6. a configuration button.

Keyboard navigation

• SPACE or RIGHT ARROW or Click Next slide
• SHIFT + SPACE or LEFT ARROW Previous slide
• Start First slide
• End Last 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.

Remote navigation

You can navigate in the slideshow with a remote.

Use the equivalent of LEFT ARROW and RIGHT ARROW.

Effects

The available effects can be set in the configuration panel.

To create your own effect:

1. Create a class, for example .my-effect.
2. In the AccesSlide.js file, create an entry in the config object (see the instructions in the file at the Effects section).
3. 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 config object.

The new effect will be automatically added to the list of effects in the configuration panel.

CSS

2 CSS files are necessary:

• css/style.css general properties of the slideshow
• css/themes/default.css theme

Themes

Several themes are delivered with AccesSlide in the folder css/themes.

• Default theme
• Christmas theme
• Dark theme

<!-- Theme stylesheet -->
<link rel="stylesheet" href="css/themes/default.css" type="text/css" media="all" />

Post-processor

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.

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
• grunt-contrib-watch

Customizing the interface

.icon-setting-sound:before{
	content: "\f028";
}

Tables

Pictures

You can put cute cats

but also scary cats!

Headings

The heading hierarchy begins with <h1>, used for the heading of the slideshow.

You can use all the other headings.

H2 heading

H3 heading

H4 heading

H5 heading

H6 heading

Responsive design

The slideshow will adapt to the size of the font and the size of the window.

Accessibility parameters

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.

Sounds library

Other parameters

• 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 Linearize the slideshow.

Configure these parameters in the configuration panel.

Print

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 noprint class.

<section class="slide noprint">
 [content]
</section>

JavaScript

You can use your own scripts in the html page or in the slide.js file.

Outline view

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

Use the configuration panel to activate the outline view.

The 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.

Localization

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: <script type="text/javascript" src="lang/lang_fr.js"></script>.

Create a language file

1. Open the 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 language file using the filename lang_[language code].js