Simple image gallery – accessible, responsive and with preloading

Create automatically an image gallery - accessible, responsive, and with automated preload.

Creating an image gallery that is accessible, responsive and with automatic preload has always been a challenge.

Galleries offer a useful method for displaying a selection of high-quality pictures. To make it simpler for visitors to browse photographs on websites, developers use image galleries to display images in a grid-like style.

This time we took a challenge to create an image gallery that is easy to use. You only need only an HTML and our Accessible Gallery package.

Desired features

The gallery should be:

• Accessible:
  • The user should be able to navigate over images displayed on overlay using the keyboard.
  • The screen reader user should be able to get a notification while image loading progress.
  • Focus should be set back when leaving the gallery.
• Responsive UI – adapting to all viewport sizes.
• Preload previous or next image.
• The left/right swipe gesture support. Very useful on mobile devices.
• Support base64 encoded image.
• Small package size (at the moment 19 KB).
• Available on the npm repository to be able to use it inside your current code. See Accessible Gallery on the npm repository.
• No complex HTML, CSS or JavaScript.

Demo

There is nothing more convenient than an example. See Accessible Gallery in an action.

You may also be interested in reading about 8 tips to speed up image loading.