Cargo Site Accessibility Checklist 2026 | WCAG 2.1 AA for Portfolio Websites
Last updated: 2026-04-14
Cargo is a website builder favored by designers, photographers, architects, and other creative professionals who want highly customized portfolio sites. Its template system prioritizes visual impact and creative expression, which often comes at the cost of accessibility. Cargo sites tend to be image-heavy, rely on unconventional navigation patterns, use experimental typography, and feature non-standard scrolling behaviors that can create significant barriers for users with disabilities. The platform gives users substantial control over CSS and layout, which means accessibility outcomes depend heavily on individual design decisions rather than platform defaults alone. Many Cargo portfolio sites score poorly on automated accessibility scans because their creative layouts lack semantic HTML structure, images serve as primary content without adequate text alternatives, and custom navigation patterns are not keyboard accessible. With the European Accessibility Act now enforceable and accessibility lawsuits increasingly targeting professional service websites, creative professionals cannot afford to ignore these requirements. This checklist addresses the specific accessibility challenges found on Cargo sites and provides practical solutions that maintain creative design integrity while meeting WCAG 2.1 AA standards. Each issue is prioritized by severity to help you address the most impactful barriers first.
Common Accessibility Issues
Portfolio sites built on Cargo typically use images as the primary content. Photographers display their work, designers show project screenshots, and architects present building renderings. When these images lack alt text, the entire purpose of the site becomes inaccessible to screen reader users. Cargo's image upload interface does not prominently feature alt text fields, and many users are unaware that their portfolio is essentially invisible to assistive technology users.
Add descriptive alt text to every portfolio image by editing image properties in the Cargo editor. For photographs, describe the subject, composition, and mood. For design work, describe the project and key visual elements. If you have image grid or gallery pages, ensure each thumbnail also has alt text. Cargo's custom code options allow you to add alt attributes directly in the HTML if the visual editor does not expose the field.
Cargo encourages unconventional navigation designs: hidden menus revealed on hover, navigation triggered by scrolling, side panels that slide in from screen edges, and overlay menus with custom animations. These creative navigation patterns almost always rely on mouse-specific interactions and fail completely for keyboard users. The underlying JavaScript event handlers respond to mouseover and click events but do not handle keydown events for Enter, Space, or Escape keys.
Test all navigation elements using only the Tab and Enter keys. If any menu or navigation element cannot be reached and activated by keyboard, add keyboard event handlers through Cargo's custom code feature. Ensure that overlay menus can be closed with the Escape key, that focus is moved into the menu when it opens, and that focus returns to the trigger element when the menu closes. If your navigation uses hover-only triggers, add a visible toggle button that serves as a keyboard-accessible alternative.
Cargo sites frequently use light gray text on white backgrounds, thin weight fonts at small sizes, or white text on lightly-tinted photographic backgrounds for a minimalist aesthetic. While this may look refined, it fails WCAG contrast requirements and makes content difficult to read for users with low vision, color blindness, or anyone viewing the site on a screen with glare.
Check all text elements with a contrast checker tool. Ensure body text meets the 4.5:1 minimum contrast ratio and large text (18px+ bold or 24px+ regular) meets 3:1. Cargo allows full CSS customization, so you can increase font weight, darken text colors, or add text shadow or background overlays behind text on images. A slightly bolder, higher-contrast design often looks more professional than a faded, low-contrast aesthetic.
Cargo's freeform layout system often generates HTML that uses generic div elements for all content sections rather than semantic HTML5 elements like main, nav, article, header, and footer. This means screen reader users have no landmarks to navigate by and cannot quickly jump to the main content, navigation, or specific sections of the page.
Use Cargo's custom code feature to wrap your content sections in appropriate semantic elements. Add a main element around your primary content, nav around navigation links, and header/footer around those respective sections. If Cargo's editor does not allow direct semantic element insertion, use ARIA landmark roles (role='main', role='navigation', role='banner', role='contentinfo') on existing div elements as a fallback.
Cargo's built-in lightbox feature for image galleries often fails to manage keyboard focus correctly. When a lightbox opens, focus may remain behind the overlay, allowing keyboard users to tab through page content that is visually hidden. The close button may not be the first focusable element in the lightbox, and pressing Escape may not close it.
Test the lightbox by opening it and pressing Tab to verify that focus stays within the lightbox modal. If focus escapes, use Cargo's custom JavaScript options to add a focus trap: when the lightbox opens, move focus to the close button, and restrict Tab cycling to elements within the lightbox. Add an Escape key handler to close the lightbox and return focus to the image that triggered it.
Cargo templates sometimes implement horizontal scrolling, parallax effects, scroll-hijacking, and scroll-triggered animations. These effects can cause motion sickness in users with vestibular disorders, break expected keyboard scrolling behavior, and make content unreachable for users who rely on standard page navigation.
Respect the prefers-reduced-motion media query by wrapping scroll animations and parallax effects in a CSS or JavaScript check. Add this CSS through Cargo's custom code: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; scroll-behavior: auto !important; } }. Avoid scroll-hijacking entirely if possible, as it breaks fundamental browser navigation expectations.
Cargo-Specific Tips
- Cargo gives you full access to custom CSS and JavaScript, which means you have more power to fix accessibility issues than on most website builders. Use this to add ARIA attributes, semantic elements, and keyboard event handlers that the templates may lack.
- When choosing a Cargo template, test it with keyboard-only navigation before committing. Templates with simpler, more conventional navigation patterns are generally more accessible than those with experimental interaction designs.
- For portfolio images that are your primary content, invest time in writing detailed alt text. Think of it as making your work accessible to curators, art directors, and clients who may use screen readers. Good alt text also improves your SEO for image search.
- Consider adding a text-based project description alongside or below each image or image gallery. This provides context for all users and ensures that the meaning of your visual work is not lost when images cannot be seen.
Recommended Tools
axe DevTools
A browser extension for automated accessibility testing that integrates with Chrome DevTools. Particularly useful for Cargo sites because it can identify semantic structure issues and missing ARIA attributes in custom layouts.
Colour Contrast Analyser
A desktop application by TPGi that includes an eyedropper tool for picking colors directly from your screen. Ideal for checking contrast on Cargo sites with text overlaid on images or gradient backgrounds.
NVDA Screen Reader
A free, open-source screen reader for Windows. Testing your Cargo portfolio with NVDA reveals how your site's content and navigation are experienced by screen reader users and helps identify issues that automated tools miss.
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.