Every image gallery sucks (except mine)

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 isn't garbage, we need to 1. avoid all the aforementioned pitfalls and 2. make it so people who use screen readers can actually use it.

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 not making it clunky.

Where some galleries are straight up inaccessible, there are others that are technically accessible. They will work for screen reader users, but they're not easy or enjoyable. 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, think about how you look at galleries. 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 and click on pictures that sound interesting to hear a more detailed description.

So... that means you just have to put alt text on your thumbnails and have them link to a page with the full-sized image and the description. That's it! That's all there is to it.

I threw in a few anchor links on top of that for added convenience. 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. It's nice. You should try it. (In fact, you can try it over at my art gallery.)

You can implement this hot new gallery system right this instant with my hot new static gallery generator! Or, if you're not too familiar with PHP, you can sit and wait patiently for me to push that release out. Super!