On this page
  1. Desired features
  2. Demo

Looking for automated testing for technical SEO?

With SiteLint you can help search engine spiders crawl and index your site more effectively.

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

Comments

Leave a Reply

SiteLint Audits: Monitoring in real-time Accessibility, Performance, Privacy, Security, SEO, Runtime Errors and Console Logs