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

We have set the following requirements:

• 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.
  • Avoid using auto-play for the gallery, as this can be disorienting for some users.
  • The colors used in the image gallery have sufficient contrast to be easily visible to users with visual impairments.
• Responsive UI – adapting to all viewport sizes.
• Preload previous or next image.
• The left/right swipe gesture support. Very useful on mobile devices.
• Generate a thumbnail list from all images located at the bottom of the page. Some call it Quick Access to the Image.
• 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.
• Use semantic HTML elements like

  and

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

Tips for creating an accessible image gallery

Creating an accessible image gallery is essential for ensuring that all users can access your content.

Here are some tips for creating an accessible image gallery:

• Use descriptive alt text: Alt text is used to describe the content of an image to users who cannot see it. Make sure to use descriptive alt text that accurately describes the content of each image in your gallery.
• Test your gallery: Test your image gallery with a screen reader to ensure that it is accessible to users with disabilities.
• Optimize images: Optimize your images by compressing them and reducing their file size. This will help improve page load times and make your gallery more accessible to users with slow internet connections.