Image gallery frameworks! They're everywhere! And yet I haven't found even one that doesn't suck. They're clunky at best and inaccessible at worst.

Here is a sampler of issues I've encountered on various image galleries:

• Requires Javascript to work (clunky, inaccessible)
• Doesn't have alt text (inaccessible)
• Lightboxes (clunky, usually inaccessible, probably requires Javascript)
• Just a bunch of thumbnails that link to image files (inaccessible)
• Images open in a tooltip (worse than lightboxes in every conceivable way)

There must be a better way. Right???

If we're going to make an image gallery that doesn't suck, we need to 1. avoid all the aforementioned pitfalls, 2. make it usable with a screen reader, and 3. (important) make it enjoyable to use with (or without) a screen reader.

Most social networking websites use alt text and image descriptions interchangeably, but they're two separate things that serve separate purposes. Alt text is the text inside the alt tag on an image. Alt text replaces images for screen readers, so it should be concise so the screen reader can quickly move onto the text that comes after it. Conversely, image descriptions are detailed descriptions that are included, in plain text, adjacent to the image they're describing.

Here are websites that talk about this better than I can:

• Alternate Text (WebAIM)
• How to Write Alt Text and Image Descriptions (Veronica with Four Eyes)
• How to Write Alt Text for Amateur Art (Veronica with Four Eyes)
• The Image Problem (Building Accessible Websites) - Don't use this for coding advice because it was published in 2002, but there's some useful insight on the actual substance of alt text and image descriptions

Alt text is sufficient if you're working in a written medium where the images are just there to supplement the text. If you're working with a whole-ass gallery, the images are the point, you need to throw some descriptions in there. That takes care of making the gallery accessible, so now it's a matter of making it enjoyable.

Where some galleries are straight up inaccessible, there are others that are technically accessible. They will work for screen reader users, but they're clunky and don't take user experience into account at all. In my view, this is barely a step up from inaccessibility. I mostly see stuff like this:

• Descriptions in alt text (tedious, inaccessible if you don't use a screen reader)
• Terse alt text with no descriptions (screen reader users hardly get anything, non-users get nothing)
• Thumbnails link to their descriptions but have no alt text (screen reader users get no information from thumbnails)

If you're sighted, you probably skim the thumbnails and click on pictures that catch your eye to get a closer look at them. The closest approximation of that experience for a screen reader user is the ability to skim through alt text (the thumbnail) and click on pictures that sound interesting to hear a more detailed description (the full view). So all that you need to do is add alt text to your gallery thumbnails, then have the thumbnails link to a separate full view/long description page.

I also put a few other quality of life features in to cut down on unnecessary clicking or keying around the gallery. There are previous/next links that cycle you through images, as well as a gallery index link. The index link pops you back to the anchor point of the image you were just looking at so you don't lose your place in the sea of thumbnails.

In theory, you could implement this by hand, but it's much easier to do with some degree of automation. If you want to use static code, you can implement this season's hottest new gallery system with my static gallery generator. Everything happens on your machine via Node.js, then you can upload the finished product to your website however you usually do that.

If you know PHP, this isn't a very difficult exercise, and you're welcome to set up your own version. I'm also working on a public release of the PHP code if you want to use PHP but aren't familiar with it!