Pixpa Accessibility Checklist 2026 | WCAG 2.1 AA & EAA for Portfolios
Last updated: 2026-06-08
Pixpa is an all-in-one, no-code platform built for photographers, designers, artists, and other visual creatives, bundling a portfolio website, an online store, a blog, and client-proofing galleries into a single subscription. Because the whole point of a Pixpa site is to showcase imagery, the platform leans heavily on full-bleed galleries, slideshows, lightboxes, and grid layouts - and that image-first design is exactly where the accessibility risk concentrates. Creative portfolios are some of the hardest sites to make accessible precisely because so much meaning lives in pictures: when galleries ship without alt text, when the lightbox cannot be opened, navigated, and closed with the keyboard, and when an autoplaying homepage slideshow cannot be paused, blind and low-vision visitors, keyboard-only users, and people with vestibular conditions are locked out of the core experience. Photographers often assume accessibility does not apply to a visual business, but it does: the European Accessibility Act is now in force for businesses selling to EU consumers (and a Pixpa store that takes payment is exactly that kind of service), and ADA Title III claims in the US regularly name small creative and e-commerce sites. The good news is that Pixpa exposes the controls you need - per-image alt text, theme color settings, gallery and slideshow options - so most of these issues are fixable inside the builder without code. This checklist covers the issues we see most often on Pixpa sites and the specific settings and markup targets that fix each one. None of this is legal advice; consult a qualified attorney for your jurisdiction.
Common Accessibility Issues
Pixpa galleries can hold dozens or hundreds of images, and the per-image alt-text/caption field is easy to skip when bulk-uploading. On a portfolio site the images are the content, so an empty or filename-based alt attribute means a screen reader user gets nothing of value from the page - no sense of the work, the subject, or the style. This is the single highest-impact failure on most creative sites.
Add meaningful alt text to every informative image in the image's settings - describe the subject and what matters about it (for a photographer, the scene and mood; for a designer, what the piece is). Keep it concise but specific. For large galleries, set alt text as you upload rather than retrofitting later. Genuinely decorative images (a repeating texture, a pure background) should have empty alt so they are skipped, not a filename.
<!-- Gallery image, no alt -->
<img src="/media/_DSC4821.jpg" alt=""><img src="/media/_DSC4821.jpg"
alt="Bride and groom dancing under string lights at an outdoor evening reception">Clicking a gallery thumbnail on a Pixpa site typically opens a full-screen lightbox with next/previous controls and a close button. If the lightbox can only be opened and navigated with a mouse - or if focus is not moved into it, trapped while open, and returned to the trigger on close - keyboard-only and screen reader users cannot view the enlarged images or escape the overlay, which can also create a keyboard trap.
Verify on the published site that you can open the lightbox with Enter, move between images with the arrow keys or Tab-reachable controls, and close it with Escape and a focusable Close button. Focus must move into the dialog on open, stay within it while open, and return to the thumbnail that launched it on close. The dialog should expose role="dialog" with an accessible name. If the theme's lightbox does not behave this way, choose a gallery style/theme that does, or avoid lightbox-only access to important images.
<!-- Lightbox opens on click only, no Escape, no focus management -->
<div class="lightbox" onclick="open()"> ... </div><div role="dialog" aria-modal="true" aria-label="Image viewer">
<button aria-label="Close image viewer">X</button>
<button aria-label="Previous image">Prev</button>
<button aria-label="Next image">Next</button>
</div>
<!-- Esc closes; focus trapped while open; returns to trigger -->Many Pixpa themes feature a full-screen homepage slideshow that auto-advances through hero images. When the rotation runs longer than five seconds with no built-in, clearly labelled pause control reachable by keyboard and screen reader users, it fails WCAG 2.2.2. Large auto-moving imagery is also disorienting for people with vestibular, attention-related, and cognitive conditions.
In the slideshow/homepage settings, turn auto-advance off or extend the interval and, more importantly, ensure a visible, keyboard-operable Pause/Play control with an accessible name and aria-pressed state. Make the previous/next controls reachable by Tab and operable with Enter/Space. For many portfolios a static hero image or a manually advanced gallery is the better choice and still looks striking.
<!-- Homepage slideshow auto-advancing, no pause -->
<div class="home-slideshow" data-autoplay="true" data-interval="4000"> ... </div><!-- Autoplay off, or add a pause control: -->
<div class="home-slideshow"> ... </div>
<button type="button" aria-pressed="false" aria-label="Pause slideshow">Pause</button>Pixpa's e-commerce features let you sell prints, products, and downloads. Product grids often make the image itself the link with no accompanying text, so screen reader users hear only a filename or 'link' with no product name, and repeated 'Add to cart' or 'Buy' buttons across a grid all share the same accessible name with nothing to distinguish them. That fails WCAG 2.4.4 Link Purpose and makes shopping with assistive technology confusing.
Ensure each product links via its visible product-name text (or an image with alt text equal to the product name), so the link has a clear accessible name. Give per-item 'Add to cart' buttons a distinguishing accessible name where possible (for example aria-label='Add Sunrise Print to cart'). Make sure price and key details are real text, not baked into an image. Test the store grid and product page with a screen reader and the keyboard.
<a href="/store/sunrise-print"><img src="sunrise.jpg" alt=""></a>
<button>Add to cart</button><a href="/store/sunrise-print">
<img src="sunrise.jpg" alt="Sunrise Over the Bay framed print">
</a>
<button aria-label="Add Sunrise Over the Bay print to cart">Add to cart</button>Pixpa's client-gallery and proofing features let clients view, favorite, comment on, and download images. These galleries are heavily mouse- and hover-driven (favorite hearts and download icons appearing on hover), so keyboard users may be unable to reach the favorite/select/download controls, and screen reader users get unlabelled icon buttons. A client with a disability then cannot complete the proofing task you sent them.
Confirm that the favorite, select, comment, and download controls in client galleries are reachable by Tab and operable with Enter/Space, not hover-only, and that each icon control has an accessible name (for example aria-label='Favorite image 12'). Provide a text alternative or list view where possible. If a client needs accommodation and the gallery cannot deliver it, offer an alternative delivery method (a downloadable contact sheet or PDF) so the proofing task is still completable.
<!-- Favorite icon appears on hover, no label -->
<span class="fav-icon" onmouseover="show()"></span><button class="fav-icon" aria-label="Favorite image 12" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>
<!-- focusable, keyboard-operable, labelled -->Pixpa themes favor minimal, light typography - thin gray menu links, small captions, and text overlaid on full-bleed photos. These choices frequently drop below the 4.5:1 minimum for normal text and 3:1 for large text and UI components, and text over a photo can be readable on one image and invisible on the next as the background changes.
Check menu links, captions, body text, and button colors with a contrast checker and adjust them in the theme's design/color settings. For text placed over images, add a solid or semi-opaque overlay so contrast holds across every photo, or place the text on a solid panel beside the image. Re-check hover and focus states and any light-on-light combinations in the footer and navigation.
/* Thin gray nav text on white */
.nav a { color: #b3b3b3; } /* ~2.1:1 - fails *//* Darkened to meet 4.5:1 */
.nav a { color: #404040; } /* ~9:1 - passes */Pixpa contact and booking-inquiry forms can present field names as placeholder text rather than persistent, programmatically associated labels. Placeholder text disappears on typing, is read inconsistently by screen readers, and is usually low-contrast gray, so a visitor who clicks away mid-form loses the prompt and a screen reader user may never get it.
Enable visible, persistent labels associated with each input via for/id in the form settings. Indicate required fields in text rather than color alone, associate any error message with its field via aria-describedby, set aria-invalid on failed fields, and confirm the submit confirmation is announced. Test the form with a keyboard and a screen reader, including the success and error states.
<!-- Field name as placeholder only -->
<input type="text" name="name" placeholder="Your name"><label for="name">Your name <abbr title="required">*</abbr></label>
<input type="text" id="name" name="name"
required aria-required="true" aria-describedby="name-error">
<span id="name-error" role="alert"></span>Pixpa-Specific Tips
- Treat alt text as core content, not an afterthought. On a portfolio the images are the page, so set meaningful alt text on every gallery and store image as you upload, and leave alt empty only for genuinely decorative graphics.
- Test the lightbox/image viewer with the keyboard on the published site: open with Enter, navigate with arrows, close with Escape, and confirm focus moves in on open and returns to the thumbnail on close.
- Turn off homepage slideshow auto-advance, or add a visible, keyboard-operable pause control. A static hero image still looks striking and removes a common WCAG 2.2.2 failure.
- If you sell prints or products, make the product name the link text (or the image alt) and give repeated 'Add to cart' buttons distinguishing accessible names, and keep price and details as real text.
- Check client-proofing galleries for keyboard access: favorite, select, comment, and download controls must be Tab-reachable and labelled, not hover-only. Offer a PDF/contact-sheet fallback for clients who need it.
- Audit theme contrast: thin gray navigation, small captions, and text over photos are the usual Pixpa contrast failures. Use overlays for text on images and verify hover/focus states.
Recommended Tools
axe DevTools
Browser extension that scans the published Pixpa page for WCAG violations with specific fixes. Run it with galleries, the lightbox, the slideshow, and the store grid in place on the live front-end.
WAVE by WebAIM
Visual evaluator that flags missing alt text, empty links, low contrast, and heading-order issues directly on the rendered page - especially useful for spotting image-only links and missing gallery alt text.
WebAIM Contrast Checker
Check Pixpa theme navigation, caption, body, and button colors against 4.5:1 and 3:1, including text overlaid on full-bleed photos where the background changes per image.
VoiceOver + Safari / NVDA + Firefox
Manual screen-reader testing verifies that galleries, the lightbox, store products, and client-proofing controls are announced and operable - the parts of a portfolio site automated scanners cannot fully judge.
Keyboard-only testing
Unplug the mouse and tab through the homepage slideshow, galleries, lightbox, store, and forms. If you cannot open and close the lightbox or reach a buy or favorite button by keyboard, neither can your visitors.
Pixpa Feature Accessibility At a Glance
| Plugin / Tool | Feature | Common Failure | WCAG | Best Fix |
|---|---|---|---|---|
| Galleries core portfolio content | Images with empty alt text | 1.1.1 | Meaningful alt on every informative image | |
| Lightbox / Viewer enlarged images | Mouse-only, no Escape, no focus trap | 2.1.1 | Keyboard open/navigate/close + focus management | |
| Homepage Slideshow hero | Autoplay, no pause control | 2.2.2 | Static hero or visible pause button | |
| Store prints / products | Image-only links, duplicate buy buttons | 2.4.4 | Product-name link text + distinct button names | |
| Client Galleries proofing | Hover-only, unlabelled icon controls | 2.1.1 | Keyboard-reachable, labelled controls + PDF fallback |
Frequently Asked Questions
Does web accessibility really apply to a photography or design portfolio?
Yes. A common myth is that a visual business is exempt because its audience is sighted, but accessibility law and standards apply to the website as a service, not to the subject matter. Blind and low-vision people hire photographers and designers, browse on behalf of others, and buy prints; keyboard-only and switch users navigate creative sites; and people with vestibular conditions are affected by autoplaying slideshows. If your Pixpa site has a store that takes payment from EU consumers, the European Accessibility Act applies, and in the US ADA Title III claims regularly name small creative and e-commerce sites. The fix is mostly about alt text, keyboard-operable galleries and lightboxes, a pausable slideshow, and adequate contrast - none of which compromises the visual design.
How do I add alt text to a whole Pixpa gallery efficiently?
Set alt text as part of your upload workflow rather than retrofitting it. When you add images to a gallery, each image has a settings/caption area where you can enter its alternative text; doing it image-by-image at upload time is far faster than auditing a 200-image gallery later. Write a short, specific description of the subject and what matters about it - for a wedding photographer that might be the scene and mood; for a designer, what the piece is and its purpose. Reserve empty alt for genuinely decorative images. If you reuse images across galleries, keep the alt text consistent so the same work is described the same way everywhere.
Can a Pixpa client-proofing gallery be made accessible for a client with a disability?
Partly, and you should plan a fallback. Client galleries are heavily hover- and mouse-driven - favorite hearts and download icons that appear on mouseover - so first confirm on the live gallery that the favorite, select, comment, and download controls are reachable by Tab, operable with Enter or Space, and have accessible names. Provide a list or text view if the theme offers one. If a specific client still cannot complete proofing with the gallery as built, offer an alternative such as a downloadable contact sheet or PDF and collect their selections by email or form. Having a documented accessible alternative both serves the client and reduces your legal exposure.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.