Image Compare Accessible Slider

This module provides a new formatter for image fields using the Image Compare javascript library.

The main point of interest of this library is the use of a simple HTML input element of type range to implement the slider. This makes it one of the most accessible image comparison slider available at the moment.

Installation

• Download and enable the module.
• Check the README file for the image-compare javascript library installation instructions.
• Select Image Compare Accessible Slider formatter in your multivalued image field display configuration.
• Remember that you have to upload at least 2 images.

A dedicated submodule, Image Compare Accessible Slider for Media, allows to extend this module to make it compatible with medias of type Image (or referencing other medias of type Image via this module).

Configuration

• A custom starting point between 0 and 100 can be specified (default: 50).
• alt or title image attributes can be used as a caption.
• A custom field can also be used as a caption, useful with custom media images for example.
• A custom field can be used to override the global field formatter configuration options with some content specific ones which allows more flexibility than most other available sliders.
• Captions are optional and can be disabled globally, by not specifying any caption field, or on a per-instance basis by using a custom options field.

Available configuration options

• label_text: usage explanation message for screen readers.
• keyboard_step: the keyboard step, higher value can improve keyboard usability.
• step: can be set to value below 1, 0.01 for example, to improve smoothness when using the mouse to slide. Use in conjunction with keyboard_step configuration option above.
• show_captions: set to false to remove captions.
• starting_position: starting position of the slider between 0 and 100.

Around the Web

• Image Compare Accessible Slider is a 5-Star immersive user experience Drupal module providing extended SEO/GEO features

Keywords: A11y