(Guides · Accessibility)

Accessibility and motion

Vale moves slowly and on purpose, and it stays still when a visitor asks it to. Every interaction works with a keyboard, and every page reads properly without JavaScript.

Motion settings

In Theme settings > Animations:

In Theme settings > Layout, Film grain adds a subtle moving texture (strength 7 by default). It is decorative, stands still for visitors who prefer reduced motion, and can be turned off.

Each scroll section has its own Animate on scroll and Intensity settings. See Scroll sections. Background videos play only while on screen and never for visitors who prefer reduced motion, who see the poster image instead.

Scroll effects

Theme settings > Animations > Scroll effects adds gentle movement that follows the scroll, across the sections you already have. It is separate from the scroll sections, which keep their own switches, and from Reveal sections on scroll, which plays once as a section appears.

What moves, at Subtle and Expressive:

• Photographs drift inside their frames. The image moves a little slower than its frame and is scaled just enough that no edge shows: in the editorial cover, editorial letter, image with text, rooms grid, showroom, statement with image, story opening, lookbook, founder quote and product spotlight.
• The editorial cover gains depth as it scrolls away: on desktop the text rises and fades while the plate lags behind, and the giant wordmark sinks at every width.
• Headlines settle. Each line of the heading arrives from a small sideways offset, the lower lines from further (collection tabs, editorial letter, product spotlight, lookbook, rooms grid, showroom). In the closing statement the lines arrive from alternate sides.
• Images open with the scroll. The lead lookbook image and the founder quote portrait open from a slight inset as they cross the screen.
• Cards drift in. Featured collection cards slide in sideways, the far ones further, and the collection tabs grid starts with alternate tiles lower, then settles level.
• The footer curtain. The giant footer wordmark grows and rises into place as the footer arrives.
• The ground shifts. Where a light section is followed by a dark one (or the other way round), the leaving section takes on part of the coming colour, so the change feels like light fading. Pinned stories (route stack, chapter counter) keep their own ending.
• Velocity lean (Expressive only). The moving text lines and the statement with image lean very slightly with scroll speed, then straighten.

Everything starts and ends at the normal layout, so nothing shifts while the page loads, and the first hero image is never clipped or faded. Browsers that support CSS scroll timelines run the effects without any script on scroll; others use a small fallback that only runs while a section is on screen.

Reduced motion

When a visitor has turned on reduced motion in their system settings, Vale shows every section in its final, still state: no reveals, no page curtain, no drifting images, no auto-rotating slides, no scroll effects, no background video and no moving grain. The same applies inside the theme editor, so you always edit what you see.

Keyboard and screen readers

• A skip link, landmarks and one H1 per page.
• Menus, the mega menu, drawers and pop-ups announce their state, trap focus while open, close with Escape and return focus to the button that opened them.
• Carousels and rotating announcements have pause controls and pause on hover and focus.
• Forms have labels, inline errors and an error summary.
• Primary controls are at least 44px, and every control at least 24px.

Color contrast

The default schemes meet WCAG AA contrast for text. When you change colors, keep body text at 4.5:1 against its background, and check the muted color too, since it is used for labels.

Your content

• Add alt text to images in the admin; Vale uses it everywhere, including the mega menu and lookbook.
• Set a Video description on video sections.
• Use the page.accessibility template for an accessibility statement.