Paris sculptures piece exhibit

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.

Related posts

Leave a Reply