Readymag Accessibility Checklist 2026 | WCAG 2.1 AA & EAA
Last updated: 2026-06-18
Readymag is a design-first builder for websites, portfolios, and digital publications, popular with designers, studios, and editorial teams who want pixel-level control and rich animation. Its free-canvas model, where you place and position every element exactly where you want it, is what makes Readymag attractive and what makes accessibility uniquely challenging on it. On a free canvas, the visual order you arrange on screen and the order the markup is read in by a screen reader or traversed by the keyboard can diverge completely: an element you placed last but positioned at the top of the page may come last in the reading order, so a screen reader user encounters the page in an order that makes no sense. Design tools that prioritize absolute positioning and layered, animated compositions tend to produce exactly this mismatch, and Readymag is squarely in that category.
The characteristic Readymag accessibility issues follow from this. Reading and focus order frequently do not match the visual layout, leaving keyboard and screen reader users disoriented. Heading structure is often absent because text is treated as a design element sized by eye rather than as semantic headings. Animations, transitions, and scroll-triggered motion - a core Readymag feature - can trigger vestibular discomfort and ignore the user's reduced-motion preference. Text set over full-bleed images and bold color palettes regularly fails contrast. Images, which on a design-led site carry much of the meaning, are published without alt text. And richly interactive elements (custom buttons, lightboxes, sliders) may not be keyboard operable or may lack accessible names. This checklist maps each issue to its WCAG 2.1 AA success criterion and gives a fix you can apply in the Readymag editor or its element settings. It is ordered by impact, leading with reading order and headings because on a free-canvas builder those structural problems are the ones most likely to make the whole page unusable to assistive technology, followed by motion and contrast, which are the issues design-heavy Readymag sites most reliably get wrong.
Common Accessibility Issues
Readymag's free canvas positions elements absolutely, so the order in which content appears in the markup (and therefore the order a screen reader reads and the keyboard tabs through) often bears no relation to the visual top-to-bottom, left-to-right order. A user relying on assistive technology can hear the footer before the headline, or tab into elements in a jumbled sequence, making the page incoherent.
Build the page so the source order matches the intended reading order: add and arrange elements in the sequence you want them read, and check the result by tabbing through with the keyboard and by listening with a screen reader. Where Readymag exposes layer or order controls, use them to align the underlying order with the visual flow. For complex layered compositions, simplify the structure so the logical order is unambiguous rather than relying on visual position alone.
On a design-first canvas, large display text is typically just styled text boxes, not heading elements, so pages often have no H1 and no heading outline at all. Screen reader users, who rely on headings to understand and navigate a page, are left with an undifferentiated stream of text and no way to jump between sections.
Mark up the genuine headings as headings, not as plain styled text: set one H1 for the main page or publication title and H2/H3 for sections and sub-sections, using whatever heading or text-level control Readymag provides. Keep the visual size you want through styling while assigning the correct semantic level. Verify the outline with a heading-map tool so the structure is present even though the layout is free-form.
Animation, parallax, and scroll-triggered transitions are a signature Readymag feature, and they are frequently applied heavily. Large or continuous motion can cause nausea, dizziness, and disorientation for users with vestibular disorders, and motion that plays regardless of the operating-system reduced-motion setting gives those users no way to opt out.
Use motion sparingly and avoid large, sweeping, or parallax effects on essential content. Honor the user's reduced-motion preference: where Readymag allows, disable or tone down non-essential animation, and prefer subtle transitions over dramatic movement. Ensure no content moves, blinks, or scrolls automatically for more than five seconds without a way to pause or stop it, and never rely on an animation to convey information that is not also available statically.
Readymag sites often include auto-advancing slideshows, looping animations, and background video that start on load and continue indefinitely. Content that moves or auto-updates for more than five seconds with no pause, stop, or hide control violates WCAG and is both distracting and a barrier for people with attention and cognitive disabilities.
Give every auto-playing or looping element a visible, keyboard-operable pause or stop control, or set it not to loop. For background video, provide a pause control and ensure it is not the only way essential information is presented. For slideshows, allow the user to stop autoplay and move between slides manually with real, focusable controls that have accessible names.
Design-led Readymag pages place text over full-bleed photography and use strong, stylish color palettes where text frequently falls below the 4.5:1 contrast minimum. Text over images is especially risky because the background brightness varies across the photo, so the same text can be readable in one area and invisible in another.
Check every text-over-background combination with a contrast checker and adjust until normal text reaches 4.5:1 and large text 3:1. For text over images, add a solid or semi-opaque overlay, a text background panel, or a scrim behind the text rather than relying on the photo. Re-check link, button, and caption colors against their actual backgrounds, including hover and focus states.
On a visual portfolio or publication, images carry much of the meaning, yet they are routinely published with no alt text, and custom interactive elements (lightboxes, sliders, hotspots, custom buttons) may not be reachable or operable by keyboard or may lack an accessible name. Screen reader and keyboard users then miss the core content and cannot use the interactions.
Add descriptive alt text to every meaningful image, conveying what it shows and any text within it, and set purely decorative images to empty alt so they are skipped. Make custom interactive elements real, focusable controls with visible focus and accessible names, and confirm lightboxes and sliders can be opened, navigated, and closed with the keyboard. Where an interaction cannot be made operable, provide an accessible alternative path to the same content.
Readymag-Specific Tips
- Readymag's free canvas means visual order and reading/focus order can diverge completely; fix source order first and verify by tabbing and listening, because it is the issue most likely to break the whole page.
- Mark genuine headings as real headings (one H1, then H2/H3), keeping the display size through styling, so the page has an outline despite the free-form layout.
- Use animation sparingly, avoid large parallax on essential content, and honor reduced-motion preferences; never convey information by motion alone.
- Give every auto-playing slideshow, loop, or background video a keyboard-operable pause or stop control.
- Add a scrim or overlay behind text placed over images and run all text-over-background combinations through a contrast checker.
- Add alt text to every meaningful image and make custom lightboxes, sliders, and buttons focusable, keyboard-operable, and properly named.
Recommended Tools
WAVE Browser Extension
Run it on each published Readymag page to surface missing headings, empty alt text, low-contrast text, and elements without accessible names.
WebAIM Contrast Checker
Verify text over images, bold palette colors, links, and buttons against the 4.5:1 and 3:1 minimums on a design-led Readymag layout.
Keyboard-only testing (Tab, Enter, Escape)
Tab through every page to check that focus order matches the visual layout and that lightboxes, sliders, and custom buttons are operable and focus is visible.
NVDA + Firefox / VoiceOver + Safari
Screen-reader testing reveals whether your free-canvas content is read in a sensible order, whether headings exist, and what your images convey.
axe DevTools
Automated WCAG scanning that flags missing alt text, absent heading structure, controls without accessible names, and contrast failures in Readymag output.
Readymag Accessibility At a Glance
| Plugin / Tool | Area | Common Failure | WCAG | Best Fix |
|---|---|---|---|---|
| Reading order free canvas | Source order jumbled | 1.3.2 | Match source to visual order | |
| Headings display text | Styled text, no outline | 1.3.1 | Real H1/H2/H3 levels | |
| Motion animation/parallax | Ignores reduced-motion | 2.3.3 | Sparing motion, honor preference | |
| Autoplay sliders/video | No pause control | 2.2.2 | Keyboard pause/stop control | |
| Contrast & images text over photos | Below 4.5:1, no alt | 1.4.3 | Scrim + 4.5:1; add alt text |
Frequently Asked Questions
Why is reading order such a big problem on Readymag specifically?
Because Readymag uses a free canvas where every element is positioned absolutely, the order content appears in the underlying markup is driven by how and when you added elements, not by where they sit on screen. A screen reader reads the page in source order and the keyboard tabs through it in roughly that order too, so if you placed a headline last but dragged it to the top, an assistive-technology user may encounter it last. On a grid-based or section-based builder the tool tends to keep source order and visual order aligned for you; on a design-first canvas like Readymag that alignment is your responsibility. The fix is to think about the sequence in which you want content read, build and order elements in that sequence, and then verify by tabbing through with the keyboard and listening with a screen reader. Where Readymag gives you layer or ordering controls, use them to make the underlying order match the visual flow, and simplify heavily layered compositions where the logical order would otherwise be ambiguous.
How do I handle Readymag's animations and motion accessibly?
Treat motion as an enhancement that some users need to be able to turn down or off, not as a load-bearing part of the experience. The key rules are: avoid large, sweeping, or parallax animations on essential content because they can cause dizziness and nausea for people with vestibular disorders; respect the operating-system reduced-motion preference by disabling or softening non-essential animation where Readymag lets you; and never use motion as the only way to convey information. In addition, anything that auto-plays, loops, or scrolls for more than five seconds - slideshows, background video, looping animations - needs a visible, keyboard-operable pause or stop control. Practically, that means using subtle transitions instead of dramatic ones, keeping background video pausable and never the sole carrier of meaning, and giving slideshows real focusable controls so a user can stop autoplay and navigate manually. Design-led sites win attention with motion, but the accessible version keeps that motion optional and calm.
Do accessibility laws apply to a portfolio or publication built on Readymag?
Yes. The obligation attaches to the website and the experience it provides, not to the design tool behind it, so a Readymag portfolio, studio site, or digital publication is treated like any other public website. In the US, the ADA covers businesses serving the public, and the failures common on design-first sites - jumbled reading order, no headings, uncaptioned or unpausable motion, text that fails contrast, images with no alt text - are exactly the barriers that draw complaints and demand letters. In the EU, the European Accessibility Act, in force since June 2025, brings many consumer-facing digital services within scope, so a Readymag site selling services or products to EU consumers is likely covered, subject to a limited microenterprise carve-out. WCAG 2.1 AA is the practical technical target under both. Because Readymag's free canvas does not handle structure, order, or motion preferences for you, reaching that standard is deliberate work, but it is achievable with the fixes in this checklist. This is general guidance, not legal advice; consult a qualified attorney about your specific situation.
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.