Altwise

Photo galleries and lightboxes: accessible image grids for small business sites

How to make photo galleries, portfolio grids and lightbox pop-ups accessible: useful alt text, keyboard-reachable thumbnails, lightboxes that trap and return focus and close with Escape, named next and previous buttons, readable captions, no surprise slideshows, and phone-friendly grids.

Photo galleries are on almost every small business website: a contractor's "Our work" page, a salon's styles, a venue's wedding photos, a restaurant's food shots, a real estate listing or a church's event album. Most are built from a theme or plugin that shows a grid of thumbnails and opens a big version in a pop-up "lightbox". Those galleries often look great and still fail people who use a keyboard, a screen reader or a phone with zoom. This guide covers how to make galleries and lightboxes work for everyone.

1. Decide what each photo is for, then write the alt text

Every photo that carries information needs alt text that says what matters about it (WCAG 1.1.1). For a contractor that might be "Finished kitchen with white shaker cabinets and quartz counters"; for a salon, "Shoulder-length layered cut with copper balayage". A gallery of 40 photos all named "IMG_2041" or "gallery image" tells a screen reader user nothing. If a photo is only decoration, give it empty alt text (alt="") so it is skipped. See alt text examples for small businesses and reviewing AI-generated alt text.

2. Thumbnails should be real links or buttons

Many gallery plugins make thumbnails clickable with a mouse but not reachable with the Tab key. Each thumbnail that opens a larger view should be a link or button that works with Enter (WCAG 2.1.1), shows a visible focus outline (WCAG 2.4.7) and has a name, which usually comes from the image's alt text (WCAG 4.1.2).

<ul class="gallery">
  <li>
    <a href="/photos/kitchen-large.jpg">
      <img src="/photos/kitchen-thumb.jpg"
           alt="Finished kitchen with white shaker cabinets">
    </a>
  </li>
</ul>

(The photo above is example data.) A plain link to the large image is a good fallback: if the lightbox script fails, people still get the photo.

3. The lightbox is a dialog: treat it like one

When the big photo opens, keyboard focus should move into it, stay inside while it is open, and return to the thumbnail that opened it when it closes (WCAG 2.4.3). The Escape key and a close button named "Close" should both close it, and people must never get stuck inside (WCAG 2.1.2). Give the dialog a name, for example the photo's caption or "Photo 3 of 12". See cookie banners, pop-ups and chat widgets for the same pattern.

4. Next and previous buttons that say what they do

Arrow icons with no text are read as just "button". Name them "Next photo" and "Previous photo" (WCAG 4.1.2), make them at least 24 by 24 CSS pixels so they are easy to tap (WCAG 2.5.8), and make sure they work with the keyboard, not only by swiping. Any action that needs a swipe or drag should also work with a single tap or click (WCAG 2.5.1, WCAG 2.5.7). For before-and-after sliders, see drag, swipe and before-and-after sliders.

5. Captions and the photo count in text

Captions such as "Bathroom remodel, finished March 2026" (example data) help everyone, and they should be real text, not words printed on the photo (WCAG 1.4.5). Captions and the "3 of 12" counter need enough contrast against a dark lightbox background (WCAG 1.4.3). Light grey text on a semi-transparent black overlay is a common failure.

6. No surprise movement

Galleries that auto-play as a slideshow need a visible pause or stop button if they run for more than five seconds (WCAG 2.2.2). Zoom-in and fly-in effects can make some people dizzy, so respect the reduced-motion setting on the device. See image sliders and carousels and animation, background video and motion.

7. Phones, zoom and big galleries

The thumbnail grid should reflow into one or two columns on a phone without sideways scrolling (WCAG 1.4.10), and the lightbox shouldn't block pinch-zoom, which people use to see detail in a photo. Very large galleries load faster and are easier to move through when split into albums with headings, such as "Kitchens", "Bathrooms" and "Decks" (WCAG 1.3.1). If you use "Load more" or infinite scroll, keep the page footer reachable and move focus sensibly to the new photos. See mobile accessibility, zoom and tap targets.

Common mistakes

A 5-minute check you can do today

  1. Open your gallery page and press Tab. Can you reach each thumbnail, and can you see where focus is?
  2. Press Enter on a thumbnail. Does the big photo open, and does Tab stay inside it?
  3. Press Escape. Does it close, and is focus back on the same thumbnail?
  4. Turn on VoiceOver or TalkBack and swipe through a few thumbnails. Do you hear useful descriptions or file names?
  5. On your phone, open a photo and try next, previous, close and pinch-zoom.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag images with no alt text, links and buttons with no name, low-contrast captions and blocked zoom on a gallery page. It can't judge whether your alt text describes the photo well, open a lightbox and test focus with a keyboard, or tell whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your gallery or portfolio pages, and gives copy-paste fixes for your platform.

Building portfolio and gallery pages for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any gallery plugin, theme or website builder.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.