Format Portfolio Accessibility Checklist 2026 | WCAG 2.1 AA & EAA
Last updated: 2026-05-31
Format is a portfolio builder aimed at photographers, designers, illustrators, and other visual creatives, and its entire design philosophy - large imagery, minimal text, full-bleed galleries, and immersive slideshows - is what makes accessibility uniquely tricky on the platform. A portfolio is, by definition, almost all images, so the single most consequential accessibility decision is whether those images carry meaningful text alternatives. On most Format sites they do not: the platform offers an alt/caption field, but creatives building the site rarely fill it, reasoning that 'the work speaks for itself' - which leaves a screen reader user with a page of unnamed images and no idea what the portfolio actually contains. The visual-first templates add their own barriers. Grid and masonry galleries open into lightboxes whose next/previous and close controls are often not reachable or operable by keyboard. Fullscreen slideshows auto-advance with no pause control, which both fails the criterion on moving content and can be disorienting for people with vestibular or cognitive disabilities. Hero sections place project titles and contact details as light text directly over photographs, where contrast varies across the image and frequently drops below the required ratio. Some themes use autoplaying video backgrounds behind the work. And because the aesthetic prizes restraint, navigation and contact links are sometimes rendered as tiny low-contrast text or icons with no accessible name. None of this means a Format portfolio cannot be accessible - it means the work concentrates on a small number of high-impact surfaces. Format provides no built-in accessibility checker, so every fix here is verified with external tools and a manual keyboard and screen reader pass. This checklist covers the gallery-first experience a visitor actually moves through.
Common Accessibility Issues
On a portfolio the images are the content, yet Format's alt/caption fields are usually left blank or filled with a file name. A screen reader user then encounters the entire body of work as a sequence of unnamed images and cannot tell what the portfolio shows - the most fundamental possible accessibility failure for this kind of site.
Write a concise, descriptive alt text for each piece that conveys what a sighted visitor sees and why it matters in the portfolio ('Black-and-white street portrait of an elderly fisherman, Lisbon, 2025'). For series where a visible caption already names the work, keep alt text complementary rather than duplicating the caption verbatim. Mark genuinely decorative images (textures, dividers) with empty alt so they are skipped.
<img src="/media/gallery/DSC_4821.jpg" alt="DSC_4821"><img src="/media/gallery/DSC_4821.jpg" alt="Black-and-white street portrait of an elderly fisherman mending nets, Lisbon, 2025">Format grid and masonry galleries open selected images in a lightbox overlay. In many themes the next, previous, and close controls respond only to clicks or swipes, focus is not moved into the lightbox, and Escape does not close it - so keyboard users cannot browse the gallery and can get visually stuck behind the overlay.
Ensure the lightbox is a proper dialog: move focus into it on open, trap Tab within it, support Left/Right arrow keys plus visible focusable Previous/Next buttons, and close on both Escape and an accessible Close button, returning focus to the originating thumbnail. If a theme's lightbox cannot be made operable, link thumbnails to standalone image pages instead so every image is reachable by keyboard.
Format's fullscreen and slideshow layouts often auto-advance between images on a timer with no way to pause, stop, or step back. Moving content that starts automatically, lasts more than five seconds, and runs alongside other content fails WCAG 2.2.2, and the constant motion can disorient users with vestibular disorders or make reading any overlaid text impossible.
Provide a visible, keyboard-operable pause/stop control for any auto-advancing slideshow, or disable auto-advance and let visitors move through the work themselves with clearly labeled controls. Respect the prefers-reduced-motion setting so motion-sensitive visitors are not subjected to automatic transitions.
<!-- slideshow auto-advances every 4s, no controls -->
<div class="slideshow" data-autoplay="true"></div><div class="slideshow" data-autoplay="true">
<button type="button" aria-label="Pause slideshow">Pause</button>
<!-- Prev/Next buttons; honor prefers-reduced-motion to disable autoplay -->
</div>Hero and cover layouts in Format put the project title, the creative's name, and navigation links as text directly over an image. Because a photograph's brightness varies across its area, the same white or light-gray text can be readable over a dark region and invisible over a light one, dropping below the 4.5:1 ratio for part of the image.
Add a solid or semi-opaque overlay (a darkening scrim) behind text placed over images so the contrast ratio holds across the entire photo, or move the text to a solid band. Verify the worst-case area of the image, not just the average, with a contrast checker.
The minimalist aesthetic leads many Format sites to use icon-only menus (a hamburger glyph) and bare social icons with no text and no accessible name. Screen reader users hear 'link' or 'button' with no indication of where it goes, and the menu toggle gives no expanded/collapsed state.
Give every icon control an accessible name with aria-label ('Open menu', 'Instagram profile'), hide the decorative SVG/icon from assistive technology with aria-hidden="true", and add aria-expanded to the menu toggle so its state is communicated.
<button class="menu-toggle"><svg>...</svg></button><button class="menu-toggle" aria-label="Open menu" aria-expanded="false">
<svg aria-hidden="true">...</svg>
</button>Some Format themes support a video background behind the homepage or a project cover. When it plays automatically and loops with no control, it can distract or disorient visitors, interfere with reading overlaid text, and - if it has sound - talk over a screen reader.
Avoid autoplaying video with sound entirely; if a muted background loop is used, provide a visible pause control, keep it under five seconds or make it stoppable, and disable it when prefers-reduced-motion is set. Never place essential information only within the video.
Format-Specific Tips
- Make alt text part of your upload routine: fill the alt/caption field every time you add a piece, because retrofitting descriptions across an entire portfolio later is far more work.
- If a theme's lightbox or slideshow cannot be operated by keyboard, choose a simpler grid layout that links each thumbnail to its own image page - reachability beats immersion for compliance.
- Test the keyboard path through one full gallery: Tab to a thumbnail, open it, move Previous/Next, and close with Escape; if any step fails, the gallery is not accessible regardless of how it looks.
- Turn off auto-advance on slideshows by default and rely on visitor-controlled navigation; it removes a whole class of timing and motion failures at once.
- Check text-over-image contrast on your darkest and lightest images, not a typical one, and add a scrim if any fail; Format has no built-in checker, so verify with WAVE or axe on the published site.
Recommended Tools
axe DevTools (browser extension)
Run axe on the published portfolio to surface images missing alt text, icon controls without names, and contrast failures that the Format editor will not flag.
WAVE Browser Extension
WAVE's visual annotations make it quick to spot which gallery images lack alt text and which navigation icons lack an accessible name on a finished portfolio.
Colour Contrast Analyser (TPGi)
Use the eyedropper to sample text against the brightest and darkest regions of a hero photograph, confirming text-over-image contrast holds across the whole image.
Format Portfolio Accessibility: Visual-First Features vs. Fixes
| Plugin / Tool | Feature | Common Failure | WCAG Criterion | Fix Direction |
|---|---|---|---|---|
| Image galleries the core content | Blank or filename alt text | 1.1.1 Non-text Content | Describe every piece; mark decorative images empty | |
| Lightbox click-to-enlarge overlay | Next/Prev/Close not keyboard operable | 2.1.1 Keyboard | Dialog pattern with arrow keys, or link to image pages | |
| Fullscreen slideshow auto-advancing | No pause/stop control | 2.2.2 Pause, Stop, Hide | Add pause control; honor reduced-motion | |
| Hero text over photo title and nav overlay | Contrast drops over light image areas | 1.4.3 Contrast (Minimum) | Add a scrim or solid band behind text | |
| Icon navigation minimalist menus/socials | No accessible name on icons | 4.1.2 Name, Role, Value | aria-label on controls; aria-hidden on glyphs |
Frequently Asked Questions
Do I really need alt text on a photography portfolio?
Yes. On a portfolio the images are the content, so without alt text a screen reader user experiences your entire body of work as a list of unnamed images and learns nothing about it. 'The work speaks for itself' only holds for people who can see it. A concise description of each piece - subject, style, and why it belongs in the portfolio - makes your work discoverable to blind and low-vision visitors and improves how search engines understand your site.
Are Format's galleries and slideshows keyboard accessible?
It depends on the theme, and many are not. Lightbox galleries and fullscreen slideshows frequently respond only to clicks, swipes, or timers, with no keyboard controls and no way to pause auto-advance. Test one gallery end to end with the keyboard alone; if you cannot open, navigate, and close it, either switch to a theme whose galleries are operable or use a simpler grid that links each thumbnail to its own page.
How do I keep text readable over my photographs in Format?
Add a darkening overlay (a scrim) behind any text placed over an image so the contrast ratio stays above 4.5:1 across the whole photo, since a picture's brightness varies from area to area. Check the worst-case region with a contrast tool rather than assuming the average is fine, or move titles and navigation onto a solid background band. This protects low-vision visitors and anyone viewing the site in bright light.
Further Reading
- Alt Text Guide
- Accessible Images Beyond Alt Text
- Image Carousel Accessibility Lawsuits
- Website Animations Motion Accessibility
- How To Choose Accessible Website Template
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.