Accessibility
What the plugin does for you, and the four decisions that are yours.
A gallery is images, and images are the part of the web that most often excludes people. Some of that is handled for you; some of it is down to how you configure and fill your galleries.
What you get
Real controls. Buttons are <button> elements and links are <a> elements — so they're reachable by keyboard, announced correctly, and work the way a screen reader user expects.
A real modal. The lightbox is a native <dialog>, so the focus trap, making the page behind it inert, and closing on Escape are the browser's own behaviour rather than an approximation.
Keyboard operation in the lightbox. ← → move between images, Home / End jump to the ends, Esc closes, Tab reaches every toolbar control.
Off means removed. Switching off a lightbox toolbar button takes it out of the page entirely, so it can't be tabbed to or announced. A hidden-but-focusable control is worse than no control.
Named icon-only controls. The lightbox trigger badge and the toolbar buttons carry accessible names, so a screen reader announces what they do rather than reading "link".
Focus behaves like hover. Tabbing to a tile triggers the same reveal a pointer would, so hover animations and On Hover content aren't mouse-only.
Reduced motion is respected. Visitors who've asked their system for less motion get calmer treatment from entrance animations and the Perspective layout.
Translation-ready throughout, so a site in another language announces in that language.
What's up to you
1. Alt text
Nothing the plugin does can substitute for it. An image with no alt text is, to a screen reader user, an image that isn't there.
Write it in the Edit Gallery modal or in the Media Library:
- Describe what the image conveys in this context, not what's literally in the frame. A photo of a bride on a portfolio page might be "Bride laughing during the first dance", not "woman in white dress".
- Skip "image of" and "photo of" — the screen reader already says it's an image.
- If an image is purely decorative, leave alt text empty on purpose. An empty alt is a correct answer; a filename is not.
A gallery of files named DSC_0421.jpg
That's what a screen reader reads out when alt text is missing. Twelve of those in a row is a wall of noise.
2. Don't hide meaning behind hover
Content Visibility → On Hover is elegant on a laptop and invisible on a phone, where there is no hover. Keyboard focus triggers it, so keyboard users are covered — touch users aren't.
If the caption carries information — a project name, a price, a description — set Content Visibility to Always. Save On Hover for text that's decorative.
3. Contrast
Two places where it's easy to fall short:
Overlay text on photographs. Set Overlay Opacity high enough that the palest image in the gallery still supports the text, not just the darkest.
Filter chips. The Normal and Hover & Active states need enough contrast against their background — and the active chip needs to be distinguishable from the inactive ones by more than a slight tint. Aim for at least 4.5:1 for text.
4. Heading levels
Image Title's HTML Tag puts a real heading on every tile. Screen reader users navigate by heading, so twelve H2s in a row turns a page outline into a list of photo captions.
- Default to H4 (or whatever sits correctly under the page's existing headings).
- If the text is a label rather than a section, use Span — it styles the same and adds nothing to the outline.
Layout-specific notes
Thumbnails: Tab & key Navigation is off by default. Turn it on — a slider that can't be operated from the keyboard is a slider some visitors can't use at all.
Perspective: continuous motion. Reduced-motion preferences are honoured, but consider whether the page needs it at all, and don't put text on it that visitors have to read.
Ajax Pagination: Load More and Number are both real, focusable controls. Infinity Load gives keyboard users no stopping point and makes your footer very hard to reach — prefer one of the other two.
A quick audit
- [ ] Every non-decorative image has alt text that says what it conveys
- [ ] Nothing a visitor needs is hover-only
- [ ] Overlay text is readable over the palest image in the gallery
- [ ] Filter chips meet contrast, and the active one is obvious
- [ ] Heading levels fit the page's outline
- [ ] The gallery can be operated end to end with Tab, Enter, Esc and the arrow keys
- [ ] The lightbox opens, pages and closes from the keyboard alone